一、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 });显示页面图：
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 });然后再把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 })给leftpanel添加树，把lefttree对象添加到leftpanel->items中
显示页面图
属性详细(1)Ext.data.TreeStore数据组件expanded:true的时候吗，菜单栏是打开着的（如菜单导航的”Ext基础篇“），false的时候菜单栏是关闭着的（如Ext数据篇）（2）Ext.tree.PaneluseArrows：菜单栏是否显示三角图标，默认的时候为”+“号图标rootVisible:是否显示跟节点菜单；如果为true，次了；例子的根节点就会多出一个root的根节点listeners：监听事件；itemclick单击菜单栏时的事件（其中rec.get('text')中的get为获取store中属性，返回其属性的值）； beforeitemexpand点击张开三角图标加载数据时候触发的事件；itemexpand点击三角图标加载数据完成后触发的事件
