Ext JS基础（面板布局viewport）

Posted 2020-12-02 ditto

  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.Panel
101                 {
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 });

效果：