ExtJs4.X之Viewport布局

一、Viewport-border

 1     Ext.create('Ext.container.Viewport', {
 2                 layout: 'border',
 3                 items: [{
 4                     //split: true,
 5                     //collapsible:true,
 6                     region: 'north',
 7                     //html: '<h1>这是标题部分</h1>',//填充内容
 8                     contentEl:'top_div',//这是从页面中取出ID为top_div的标签作为内容
 9                     border: false,
10                     margins: '0 0 5 0'
11                 }, {
12                     region: 'west',
13                     collapsible: true,
14                     title: '左边_West',
15                     width: 150,
16                     split:true
17                 }, {
18                     region: 'south',
19                     title: '底部_south',
20                     collapsible: true,
21                     contentEl:'bottom_div',
22                     //split: true,
23                     height: 100,
24                     minHeight: 100
25                 }, {
26                     region: 'east',
27                     title: '右边_East',
28                     //collapsible: true,//是否可折叠
29                     split: true,
30                     width: 150
31                 }, {
32                     region: 'center',
33                     xtype: 'tabpanel', 
34                     activeTab: 2,      // 配置默认显示的激活面板,页面加载的时候默认打开的页面
35                     items: [{
36                         title: '首页_default',
37                         html: '这里是中间内容部分', //closable: true
38                     }, {
39                         title: '第一个页面',
40                         html: '这里是第一个页面', closable: true
41                     }]
42                    
43                 }]
44             });

View Code

显示页面图：

body部分的div为：

<div id="top_div" style="margin-left:35%"><h1>这是标题部分</h1></div>
<div id="bottom_div" style="margin-left:35%;"><h2>Author：mimi信使</h2></div>

 属性详细：

 region:west、east、north、south、center；注意：center必须有，否则报错

contentEl：从页面中选择id的标签作为内容填充

collapsible：是否可折叠

split：是在collapsible为true的基础上才有效果，在border中间增加折叠箭头（如左边部分），

activeTab：为页面加载是默认显示的第几个tab

二、Viewport-Accordion

 1    var leftpanel = Ext.create("Ext.panel.Panel", {
 2                 title: "west",
 3                 layout: "accordion", 
 4                 width: 200,
 5                 minWidth: 100,
 6                 region: "west",
 7                 split: true,
 8                 collapsible: true,
 9                 items: [
10                             { title: "菜单管理", html: "菜单管理", iconCls: "icon_tag_green" },
11                             { title: "素材管理", html: "素材管理", iconCls: "icon_tag_green" },
12                             { title: "内容设置", html: "内容设置", iconCls: "icon_tag_green" },
13                 ]
14             });

View Code

然后再把leftpanel作为对象替换原来的布局为border->items中region为west的对象

显示页面图：

三、给左菜单导航添加树

 1  var store = Ext.create('Ext.data.TreeStore', {
 2                 root: {
 3                     expanded: true,
 4                     children: [{
 5                         text: "Ext基础篇", expanded: true, children: [
 6                           {
 7                               text: "基本属性1", children: [
 8                                 { text: "基本属性1.1", leaf: true },
 9                                 { text: "基本属性1.1", leaf: true }
10                               ]
11                           },
12                           { text: "基本属性2", leaf: true },
13                           { text: "基本属性3", leaf: true },
14                           { text: "基本属性4", leaf: true }
15                         ]
16                     },
17                         {
18                             text: "Ext数据篇",  children: [
19                               { text: "Ext数据篇", leaf: true },
20                               { text: "Ext数据篇", leaf: true }
21                             ]
22                         },
23                         { text: "Ext其他知识", leaf: true }
24                     ]
25                 }
26             });
27 
28             var lefttree = Ext.create('Ext.tree.Panel', {
29                 title: '菜单导航',
30                 width: 200,
31                 height: 150,
32                 store: store,
33                 rootVisible: false,
34                 iconCls: "icon_tag_green",
35                 useArrows: true,
36                 listeners: {
37                     itemclick: function (view, rec, item, index, e) {
38                         if (rec.get('text')) {
39                             Ext.Msg.alert("获得的内容","<font color='red'>标题内容为：</font>"+rec.get('text'))
40                         }
41                     },
42                     beforeitemexpand: function () { Ext.Msg.alert("Title", "加载中...") },
43                     itemexpand: function () { Ext.Msg.alert("Msg","加载完成")}
44                 }
45             })

View Code

给leftpanel添加树，把lefttree对象添加到leftpanel->items中

显示页面图

属性详细

(1)Ext.data.TreeStore数据组件
expanded:true的时候吗，菜单栏是打开着的（如菜单导航的”Ext基础篇“），false的时候菜单栏是关闭着的（如Ext数据篇）
（2）Ext.tree.Panel
useArrows：菜单栏是否显示三角图标，默认的时候为”+“号图标
rootVisible:是否显示跟节点菜单；如果为true，次了；例子的根节点就会多出一个root的根节点
listeners：监听事件；itemclick单击菜单栏时的事件（其中rec.get('text')中的get为获取store中属性，返回其属性的值）；
           beforeitemexpand点击张开三角图标加载数据时候触发的事件；itemexpand点击三角图标加载数据完成后触发的事件

 

转载于:https://www.cnblogs.com/QustionMark/p/4607170.html