Ext JS基础（面板布局viewport）

 ?1 Ext.onReady(function () { ?2 ????//创建一个TreeStore,TreeStore负责为Tree提供数据 ?3 ????var store = Ext.create(‘Ext.data.TreeStore‘, ?4 ????????{ ?5 ????????????root:{ ?6 ????????????????expanded:true, ?7 ????????????????children:[ ?8 ????????????????????{text:"古典",expanded:true,children: ?9 ????????????????????????[ 10 ????????????????????????????{id:1,text:"西游记",leaf:true}, 11 ????????????????????????????{id:2,text:"三国演义",leaf:true}, 12 ????????????????????????????{id:3,text:"水浒传",leaf:true}, 13 ????????????????????????????{id:4,text:"红楼梦",leaf:true}, 14 ????????????????????????????{id:5,text:"封神演义",leaf:true}, 15 ????????????????????????????{id:6,text:"搜神记",leaf:true} 16 ????????????????????????] 17 ????????????????????}, 18 ????????????????????{ 19 ????????????????????????text:"言情",expanded:true,children: 20 ????????????????????????[ 21 ????????????????????????????{id:7,text:"相思树",leaf:true}, 22 ????????????????????????????{id:8,text:"相爱十年",leaf:true} 23 ????????????????????????] 24 ????????????????????} 25 ????????????????] 26 ????????????} 27 ????????}); 28 ?29 ????//创建一个布局容器，存放上面这棵树 30 ????Ext.create(‘Ext.container.Viewport‘, 31 ????????{ 32 ????????????layout:‘border‘, 33 ????????????items:[ 34 ????????????????//上面区域的内容 35 ????????????????{ 36 ????????????????????region:‘north‘, 37 ????????????????????html:‘<div style="width:900px"><a href="www.cctv.com"></div>‘ 38 ????????????????}, 39 ????????????????//左边放一颗树 40 ????????????????{ 41 ????????????????????region:‘west‘, 42 ????????????????????xtype:‘treepanel‘,//这是Ext.tree.Panel 43 ????????????????????title:‘珍藏图书‘, 44 ????????????????????listeners:{ 45 ????????????????????????//为itemclick事件添加监听器 46 ????????????????????????itemclick:function (view,record,item) 47 ????????????????????????{ 48 ????????????????????????????//如果是叶子节点 49 ????????????????????????????if (record.data.leaf){ 50 ????????????????????????????????//获取页面中my_center组件，该组件时Ext.tab.Panel组件 51 ????????????????????????????????var tabPanel = Ext.getCmp(‘my_center‘);//在下面的‘my_center已经定义了，决定这是一个tab容器‘ 52 ????????????????????????????????//如果页面上没有该图书id对应的组件 53 ????????????????????????????????if (!Ext.getCmp(record.data.id)){ 54 ????????????????????????????????????//向Ext.tab.Panel组件中插入一个新的Tab页面 55 ????????????????????????????????????var tab = tabPanel.add( 56 ????????????????????????????????????????{ 57 ????????????????????????????????????????????//设置新Tab页面的属性 58 ????????????????????????????????????????????id:record.data.id, 59 ????????????????????????????????????????????title:record.data.text, 60 ????????????????????????????????????????????html:record.data.text, 61 ????????????????????????????????????????????closable:true 62 ????????????????????????????????????????} 63 ????????????????????????????????????); 64 ????????????????????????????????} 65 ?66 ????????????????????????????????//查询正在激活的图书 67 ????????????????????????????????tabPanel.setActiveTab(record.data.id); 68 ????????????????????????????????//向下区域的Ext.panel.Panel组件中插入内容 69 ????????????????????????????????Ext.getCmp(‘info‘).add({html:‘正在操作《‘+record.data.text+‘》图书！‘}); 70 ????????????????????????????} 71 ?72 ????????????????????????} 73 ????????????????????}, 74 ?75 ????????????????????width:200, 76 ????????????????????store:store, 77 ????????????????????rootVisible:false 78 ????????????????}, 79 ????????????????//下面区域的内容，使用一个普通Ext.panel.Panel 80 ????????????????//没有指定xtype，默认是Ext.panel.Panel 81 ????????????????{ 82 ????????????????????id:‘info‘, 83 ????????????????????region:‘south‘, 84 ????????????????????title:‘操作信息‘, 85 ????????????????????collapsible:true, 86 ????????????????????split:true, 87 ????????????????????height:100, 88 ????????????????????minHeight:100 89 ????????????????}, 90 ?91 ????????????????//右边区域的内容，使用一个普通的Ext.panel.Panel 92 ????????????????{ 93 ????????????????????region:‘east‘, 94 ????????????????????title:‘右边栏‘, 95 ????????????????????collapsible:true, 96 ????????????????????split:true, 97 ????????????????????width:150 98 ????????????????}, 99 100 ????????????????//中间面板的内容：使用Ext.tab.Panel101 ????????????????{102 ????????????????????region:‘center‘,103 ????????????????????id:‘my_center‘,104 ????????????????????xtype:‘tabpanel‘,105 ????????????????????activeTab:0,106 ????????????????????items:{107 ????????????????????????title:‘首页‘,108 ????????????????????????html:‘学习Ext.container.Viewport的例子‘109 ????????????????????}110 ????????????????}]111 ????????});112 });