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.数据在后面统一灌入。