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

• 查看圖片附件