ExtJS6.2开发-首页左菜单区域(三)

菜单区域开发
一、创建做左菜单组件
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.数据在后面统一灌入。