在控制器中定义监听器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'); 
} 
}); 

希望这有助于。 干杯