extMvc 按需加载controller

Ext.define('AM.controller.Left', {

    extend : 'Ext.app.Controller',

    views  : ['public.Tob','public.Left','public.Right'],

    init   : function(){

   this.control({

           'panel > treepanel[iconCls="tree_item"]': {

                itemclick: this.putTabPanel

            }

        });

    },

    putTabPanel : function(view, record, element, index, eventObject,object) {

       var controller  = record.raw.controller;//获取需要加载的 controller

       var tabPanel   = Ext.getCmp("Right");

       var tab           = tabPanel.getComponent("tab_"+controller);

       if(!tab){

          this.addController(controller);

          tab = {

          id      : "tab_"+controller,

          closable: true,

          iconCls : "tabs",

          layout  : "fit",

          title   : record.raw.text,

          items   : Ext.widget(controller)

      };

      Ext.getCmp("Right").add(tab);

   }

   tabPanel.setActiveTab(tab.id); 

  },

  addController:function(controller)

  {

       var c = this.application.getController(controller);

       c.init(this.application);

  }

});

原理:

在控制器controller内绑定加载运行 其他 controller  的 事件

extjs   application.getController 方法载入 controller时会自动加载controller依赖的 view store model

点击左边的菜单项  会触发加载controller的函数  ( this.control 绑定) 

controller加载完成后 渲染新的tab 并添加到 管理首页TAB 右侧  

Ext.getCmp("Right").add(tab);

tabPanel.setActiveTab(tab.id); 

需要需要加载的控制器信息  放在  左侧 Ext.tree.Panel -> store -> children 子元素中的  controller 属性中