ExtJS6.2开发-首页左菜单绑定事件(五)

Extjs顶部区域开发
一、Extjs创建中部内容组件
1.在在app目录下创建main\core\index\component下创建indexCenter.js
2.编写基础代码如下：

Ext.define('appcenter.main.core.index.component.indexCenter', {
    extend : 'Ext.tab.Panel',alias : 'widget.indexCenter',id : 'indexCenter',layout:'fit',closeAction : 'close',autoDestroy : true,defaults : {
    bodyPadding : 0,reorderable : true},initComponent : function() {
    this.callParent();}
});

二、Extjs创建页面控制器
1.在在app目录下创建main\core\index\controller下创建indexController.js
2.编写基础代码如下：

Ext.define('appcenter.main.core.index.controller.indexController', {
    extend: 'Ext.app.ViewController',alias: 'controller.indexController',requires : ['appcenter.main.core.index.component.indexMenuTree'],/*路由器部分*/titile:'',treeId:'',config:{
    control:{
    'indexMenuTree':{
    select:'onMenuSelectForRout'}}},addTab : function(contentPanel,node,moduleId){
    var contentPanel = contentPanel,id ="item" + node.data.id,tab = contentPanel.items.getByKey(id);if (!tab){
    Ext.suspendLayouts();var module = Ext.create(node.data.hrefTarget);tab = contentPanel.add(Ext.widget('panel', {
    itemId : id,closable : true,title : this.title,layout:'fit',items: [module]}));}contentPanel.setActiveTab(tab);},onMenuSelectForRout:function(tree,record,node,index,e){
    this.title=record.get('text');this.treeId=record.get('id');if(record){
    var splitArray = record.get('hrefTarget').split('.'); var menuName = splitArray[splitArray.length-1].substring(0,1).toLowerCase()+splitArray[splitArray.length-1].substring(1,splitArray[splitArray.length-1].length);contentPanel = this.getView().down('indexCenter'),moduleId =menuName;if(record=="" || null==record){
    return false;}if(moduleId!='main'){
    this.addTab(contentPanel,record,moduleId);   Ext.resumeLayouts(true);}}}
});

三、Extjs修改主视图
1.找到app目录下main\core\index\view\index.js文件
2.修改代码内容如下：

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','appcenter.main.core.index.component.indexCenter','appcenter.main.core.index.controller.indexController'],// 当前控件和其子控件的控制器，也就是事件处理的控制器。controller : 'indexController',layout : {
    type : 'border' },items : [ {
    xtype : 'indexTop',region : 'north'}, {
    region : 'west', xtype : 'indexLeftMenu',width : 230,collapsible : true,split : true,hidden : false }, {
    region : 'center', xtype : 'indexCenter'}]
});

修改部分如图：

四、Extjs修改菜单树数据
1.找到app目录下main\core\index\component\indexMenuTree.js文件
2.修改代码内容如下：

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.store = Ext.create('Ext.data.TreeStore', {
    root : {
    text : '系统菜单',leaf : false,expanded : true,children : [{
    text :'系统管理',leaf : false,expanded : true,children:[{
     text : '用户管理' , leaf : true ,hrefTarget:'appcenter.main.core.user.view.maCrUser'},{
     text : '组织管理' , leaf : true },  ]}]}});this.callParent(arguments);}
});

五、Extjs运行结果如下图：

至此整个首页框架开发结束，后面的工作就是开始来增加整个基础能力！