[ExtJS5学习笔记]第十七节 Extjs5的panel组件增加accodion成为折叠导航栏

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;
});
}
});
});

/**
* 应用程序主要视图.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 来支持你的视图
});

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);
},
}

);

uses:['oaSystem.view.main.region.Top', 'oaSystem.view.main.region.Bottom','oaSystem.view.main.region.Left'],

,{
xtype : 'mainleft',
region : 'west', // 左边面板
width : 250,
split : true
}