本文地址：[http://blog.csdn.net/sushengmiyan/article/details/39102335](http://blog.csdn.net/sushengmiyan/article/details/39102335) 官方例子:[?http://dev.sencha.com/ext/5.0.1/examples/window/layout.html?theme=neptune](http://dev.sencha.com/ext/5.0.1/examples/window/layout.html?theme=neptune)[](http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext-method-each) 本文作者：[sushengmiyan](http://blog.csdn.net/sushengmiyan) ------------------------------------------------------------------------------------------------------------------------------------ 做一個系統的話，一般都需要有導航欄啊，工具條啊這些東西。看到Ext官方例子中有個window的layout window ，看了下效果看起來蠻不錯，就學習了下，加入到了我之前做的[extjs5登錄系統](http://blog.csdn.net/sushengmiyan/article/details/38815923)中。這樣看起來就像是一個系統了。 先看下官方例子的效果吧，看起來很不錯的喲：  看下官方給的代碼： 代碼地址：[http://dev.sencha.com/ext/5.0.1/examples/window/layout.js](http://dev.sencha.com/ext/5.0.1/examples/window/layout.js) 代碼內容： ~~~ Ext.require([ 'Ext.tab.*', 'Ext.window.*', 'Ext.tip.*', 'Ext.layout.container.Border' ]); Ext.onReady(function(){ var win, button = Ext.get('show-btn'); button.on('click', function(){ if (!win) { win = Ext.create('widget.window', { title: 'Layout Window with title <em>after</em> tools', header: { titlePosition: 2, titleAlign: 'center' }, closable: true, closeAction: 'hide', maximizable: true, animateTarget: button, width: 600, minWidth: 350, height: 350, tools: [{type: 'pin'}], layout: { type: 'border', padding: 5 }, items: [{ region: 'west', title: 'Navigation', width: 200, split: true, collapsible: true, floatable: false }, { region: 'center', xtype: 'tabpanel', items: [{ // LTR even when example is RTL so that the code can be read rtl: false, title: 'Bogus Tab', html: '<p>Window configured with:</p><pre style="margin-left:20px"><code>header: {\n titlePosition: 2,\n titleAlign: "center"\n},\nmaximizable: true,\ntools: [{type: "pin"}],\nclosable: true</code></pre>' }, { title: 'Another Tab', html: 'Hello world 2' }, { title: 'Closable Tab', html: 'Hello world 3', closable: true }] }] }); } button.dom.disabled = true; if (win.isVisible()) { win.hide(this, function() { button.dom.disabled = false; }); } else { win.show(this, function() { button.dom.disabled = false; }); } }); }); ~~~ 現在看看我的最后成果：  看起來是不是跟官方的差不多呀，哈哈。這就是模仿咯，能知道如何看官方的例子了，感覺就來啦，可以順利上手的樣子了。 哈哈。 看看需要做哪些就可以達到如上效果吧！ 1.增加菜單項的內容，就是 學生檔案、教室檔案那些，這個我們暫時放在mainmodel下的data里面，這個自己制定，可以直接在panel的items定死也是可以的，這里動態獲取一下。 ~~~ /** * 應用程序主要視圖.author： sushengmiyan *blog: http://blog.csdn.net/column/details/sushengextjs5.html */ Ext.define('oaSystem.view.main.MainModel', { extend: 'Ext.app.ViewModel', alias: 'viewmodel.main', //數據模塊 ViewModel中的data可以在指定當前ViewModel的地方獲取 data: { name: 'oaSystem', // 左邊菜單的加載 NavigationMenu : [{ text : '檔案管理',// 菜單項的名稱 description : '', // 菜單項的描述 expanded : true,// 在樹形菜單中是否展開 items : [{ text : '學生檔案',// 菜單條的名稱 module : 'StudentArchives',// 對應模塊的名稱 glyph : 0xf00b // 菜單條的圖標字體 },{ text : '教師檔案', module : 'TeacherArchives', glyph : 0xf1a2 },{ text : '教室資源', module : 'RoomArchives', glyph : 0xf183 }] },{ text : '系統設置', description : '', items : [{ text : '系統參數', module : 'SytemInfo', glyph : 0xf0f7 }, { text : '高級設置', module : 'HigherSetting', glyph : 0xf02e }] } ] }, //增加 data, formulas and/or methods 來支持你的視圖 }); ~~~ 在regions目錄下新建Left.js內容如下： ~~~ Ext.define( //左側導航條 'oaSystem.view.main.region.Left', { extend: 'Ext.panel.Panel', alias: 'widget.mainleft', title: '折疊菜單', glyph: 0xf0c9, split: true, collapsible: true, floatable: false, tools: [{type: 'pin'}], header: { titlePosition: 2, titleAlign: 'center' }, maximizable: true, layout: { type: 'accordion', animate: true, //點擊的時候有動畫動作 titleCollapse: true, enableSplitters: true, hideCollapseTool: true, }, viewModel: 'main', //指定后可獲取MainModel中data數據塊 initComponent: function() { this.items = []; var menus = this.getViewModel().get('NavigationMenu'); for (var i in menus) { //先獲取分組顯示 var group = menus[i]; var leftpanel = { menuAccordion : true, xtype: 'panel', title: group.text, bodyStyle: { padding: '10px' }, layout: 'fit', dockedItems: [{ dock : 'left', xtype : 'toolbar', items : [] }], glyph: group.glyph }; //遍歷分組下的菜單項 for (var j in group.items) { var menumodule = group.items[j]; leftpanel.dockedItems[0].items.push({ text: menumodule.text, glyph: menumodule.glyph, handler: 'onMainMenuClick' }); } this.items.push(leftpanel); } this.callParent(arguments); }, } ); ~~~ 在main.js中引入這個單元： ~~~ uses:['oaSystem.view.main.region.Top', 'oaSystem.view.main.region.Bottom','oaSystem.view.main.region.Left'], ~~~ 在items中增加這個折疊導航： ~~~ ,{ xtype : 'mainleft', region : 'west', // 左邊面板 width : 250, split : true } ~~~ OK，完工。現在就可以有個折疊導航啦