ext4使用总结（四）Ext4跨命名空间引用-优快云博客

本文介绍如何在ExtJS项目中通过配置加载公用组件，并在多个地方复用这些组件及其实现逻辑。主要讨论了如何设置加载配置、跨命名域引入组件、避免Controller实例重复等问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

调用端Ext的加载配置


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

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

[img]http://dl.iteye.com/upload/attachment/0082/0534/f43fd739-6c38-3d9f-b329-78a168ff673b.png[/img]

在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();
}

[color=green][b]需要特别说明的是：[/b][/color]

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 权威指南》这本书，带给我非常多的启发！

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

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