Ext4使用总结（四）Ext4跨命名空间 引用

调用端Ext的加载配置

     Ext.Loader.setConfig({
        enabled: true,
        paths : {
            'CommonView.common.plugin' : '../common/plugin'
        }
});

在公用的命名域内，可以做action,event,logic等的处理，如下图：



在plugin中的controller文件夹中的CommonController中，可以定义如下的页面引用：

    refs : [
        { ref : 'displayItem',selector: '#displayItem'}
    ]

displayItem，引用了不同命名空间中的view中的组件的ID,客户端调用代码如下：

{
    xtype:'container',
    id:'displayItem',
    layout:'fit'
}

客户端,调用公用组件中的Controller,代码如下：

{
   var companentController = this.getController('CommonView.common.plugin.controller.CommonController')
  companentController .init(); 
  companentController.displayItem();
}

需要特别说明的是：

this.getController('CommonView.common.plugin.controller.CommonController')，
如果组件的Controller中的这个方法，被调用多次，这里就返回多个CommonController，
就可能造成，组件事件的一次触发，就会被CommonController响应多次，因为有多个CommonController实例。我认为方法getController()应该是一个工厂方法。

我们只需要在调用端的Controller的init方法，初始化公用组件的Controller，使得公用组件Controller，成为调用端Controller的一个类成员变量，在调用端的Controller代码如下：

   commonController:null,
   init:function(application) {
        this.commonController  =   this.getController('CommonView.common.plugin.controller.CommonController');
        this.commonController.init();
   }
   

我们可以在组件CommonController中的方法displayItem中创建
common plugin中的common view,并add到客户端的ID为displayItem的容器中，代码如下：

    function displayItem() {
       var displayItem = this.getDisplayItem()
       var commonView = Ext.create('CommonView.common.plugin.view.CommonView');
       displayItem.removeAll();
       displayItem.add(commonView);
    }
    

这样，我们就可以把通用组件commonView以及这个组件的处理逻辑，增加到调用端指定的ID为displayItem的Container中。
需要特别注意的是，客户端调用common plugin的controller、view时的路径：

CommonView.common.plugin.controller.CommonController
CommonView.common.plugin.view.CommonView
总之，如果想在多处复用这个公用的组件CommonView，和这个组件的逻辑，只需要在调用端,按照指定路径，跨命名域引入组件。

     Ext.Loader.setConfig({
        enabled: true,
        paths : {
            'CommonView.common.plugin' : '../common/plugin'
        }
});

并在调用端的View中的需要这个组件的地方写，如下代码：

{
    xtype:'container',
    id:'displayItem',
    layout:'fit'
}

最后，很感谢黄灯桥老师，写了《Ext JS 权威指南》这本书，带给我非常多的启发！

• 
• 大小: 6.4 KB

• 查看图片附件