在控制器中定義監聽器ExtJS

Question

我有'tabpanel' - 它是'主'形式（視圖）。 在這個'tabpanel'中，我定義了不同的標籤 - xtype'panel'。 所以，我有一個'主'（控制器），'主'視圖和一些標籤視圖。 選項卡的視圖在「主」視圖中引用。

我想在'main'控制器中定義某個孩子面板的'activate'事件的監聽者。 我該怎麼做？

'主' 控制器：

Ext.define('KP.controller.account.apartment.Main', { 
    extend: 'Ext.app.Controller', 

    views: ['account.apartment.Main', 
     'account.apartment.Requisites' 
    ], 

    models: ['account.apartment.Requisites' 
    ], 
    stores: ['account.apartment.Requisites' 
    ], 


    init: function() { 

    } 
}); 

'主' 視圖：

Ext.define('KP.view.account.apartment.Main', { 
    extend: 'Ext.window.Window', 
    alias: 'widget.ApartmentData', 

    height: 566, 
    width: 950, 
    activeItem: 0, 
    layout: { 
     type: 'fit' 
    }, 
    autoShow: false, 

    initComponent: function() { 
     var me = this; 

     Ext.applyIf(me, {    
      items: [ 
       { 
        xtype: 'tabpanel', 
        activeTab: 0, 
        deferredRender: true, 

        items: [       

         { 
          xtype: 'RequisitesApartment' 
         } 
        ] 
       } 
      ] 
     }); 

     me.callParent(arguments); 
    } 

}); 

的子面板RequisitesApartment（視圖）：

Ext.define('KP.view.account.apartment.Requisites', { 
    extend: 'Ext.panel.Panel', 
    alias: 'widget.RequisitesApartment', 


    id: 'panel_accountrequisites', 
    height: 350, 
    width: 1124, 
    autoScroll: true, 
    layout: { 
     type: 'fit' 
    }, 


    listeners: { 
     activate: function() {   
       ....load data.... 
       ...this listeners I want to push in 'main' controller...    
     } 
    }, 

    initComponent: function() { 
     var me = this; 

     var grid_store = Ext.create('KP.store.account.apartment.Requisites'); 

     Ext.applyIf(me, { 
      dockedItems: [ 
       { 
        xtype: 'gridpanel', 
        height: 260, 
        autoScroll: true, 
        dock: 'bottom', 
        store: grid_store, 
        id: 'r_gridFlatParams', 
        forceFit: true, 


        columns: [ 
         ...some columns.... 
        ], 
        viewConfig: { 
       } 
      } 
      ] 
     }); 

     me.callParent(arguments); 
    } 
}); 

Answer 1

好吧，我應該把這個代碼在「主」（控制器）：

this.control({ 
     'ApartmentData tabpanel RequisitesApartment': { 
      activate: function() { 
       console.log('hello!');     
      } 
     } 
    }); 

的問題是錯誤的選擇，我用。 正確選擇器是：

'ApartmentData tabpanel RequisitesApartment' 

有 'ApartmentData'（定義諸如alias: 'widget.ApartmentData'） - 是 '窗口' 的xtype -the主要形式。 tabpanel - 在'window'和'apartServList'（定義類似alias: 'widget.RequisitesApartment'）中的選項卡 - 面板。

感謝您的sra！

Answer 2

直接註冊爲control負責人控制器內

以下是有工作查詢的示例。當然，你只需要查詢，但我認爲這是一個很好的例子。自定義cfg屬性ident可以很容易地找到每個選項卡。如下例所示，您將在每個面板中指定一個tabConfig並在其中定義標識。

Ext.create('Ext.tab.Panel', { 
    width: 400, 
    height: 400, 
    renderTo: document.body, 
    items: [{ 
     title: 'Foo', 
     tabConfig: { 
      ident: 'foo' 
     }, 
    }, { 
     title: 'Bar', 
     tabConfig: { 
      ident: 'bar', 
      title: 'Custom Title', 
      tooltip: 'A button tooltip' 
     } 
    }] 
}); 

console.log(Ext.ComponentQuery.query('tabpanel tabbar tab[ident=foo]')[0]); 
console.log(Ext.ComponentQuery.query('tabpanel tabbar tab[ident=bar]')[0]); 

另一種方法是使用CSS的id可以查詢該像'#my-name'，但我建議使用一個自定義如上

Answer 3

正確的事情的例子做的是一個配置對象傳遞給成員函數控制分成控制器初始函數。從Sencha文檔：控制函數使您可以輕鬆地偵聽視圖類上的事件，並使用處理函數進行一些操作。

一個簡單的例子直接從ExtJS的文檔：

Ext.define('MyApp.controller.Users', { 
extend: 'Ext.app.Controller', 

init: function() { 
    this.control({ 
     'viewport > panel': { 
      render: this.onPanelRendered 
     } 
    }); 
}, 

onPanelRendered: function() { 
    console.log('The panel was rendered'); 
} 
}); 

希望這有助於。 乾杯