菜单区域开发
一、创建做左菜单组件
1.在在app目录下创建main\core\index\component下创建indexLeftMenu.js
2.编写基础代码如下:
Ext.define('appCenter.main.core.index.component.indexLeftMenu', {
extend : 'Ext.panel.Panel',
alias : 'widget.indexLeftMenu',
reference:'indexLeftMenu',
requires : [
'appcenter.main.core.index.component.indexMenuTree'
],
layout : {
type : 'fit'
},
iconCls : 'fa fa-list',
title : '功能模块',
tools : [{
type : 'expand',
reference : 'expandtool',
handler : 'expandTreeMenu',
hidden:false,
tooltip : '展开所有菜单项'
}, {
type : 'collapse',
reference : 'collapsetool',
handler : 'collapseTreeMenu',
hidden:false,
tooltip : '折叠所有菜单项'
}],
initComponent : function() {
this.items = [{
xtype : 'indexMenuTree'
}];
this.callParent();
}
});
3.在在app目录下创建main\core\index\component下创建indexMenuTree.js.js
4.编写基础代码如下
Ext.define('appcenter.main.core.index.component.indexMenuTree', {
extend : 'Ext.tree.Panel',
alias : 'widget.indexMenuTree',
reference:'indexMenuTree',
rootVisible : false,
lines : false,
initComponent : function() {
this.style = "";
this.callParent(arguments);
}
});
5.在index主视图引入,代码如下:
Ext.define('appcenter.main.core.index.view.index', {
extend: 'Ext.container.Viewport',
xtype: 'app-main',
id : 'appviewport',
requires : [
'appcenter.main.core.index.component.indexTop',
'appcenter.main.core.index.component.indexLeftMenu',
],
layout : {
type : 'border'
},
items : [ {
xtype : 'indexTop',
region : 'north'
}, {
region : 'west',
xtype : 'indexLeftMenu',
width : 230,
collapsible : true,
split : true,
hidden : false
}, {
region : 'center',
html : 'center'
}]
});
6.运行结果如下图:
7.数据在后面统一灌入。