Question

我有tabpanel - 它是main表单（视图）。在此tabpanel中，我定义了不同的标签 - xtype:'panel'。

所以，我有一个main（控制器），main视图和一些标签视图。标签的视图在main视图中引用。

我想在activate控制器中定义某个孩子panel的{{1}}事件的监听器。

我该怎么做？

main控制器：

main

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 () { } });视图：

main

孩子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（视图）：

panel

Answer 1

在负责的控制器

中直接注册为 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'，但我建议使用自定义的css id，如上例所示

Answer 2

好吧，我应该把这段代码放在'main'（控制器）中：

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

问题在于错误的选择器，我用过。正确的选择器是：

 'ApartmentData tabpanel RequisitesApartment'

'ApartmentData'（定义为alias: 'widget.ApartmentData'） - 是'window'xtype - 主要形式。 tabpanel - 带有'window'选项卡的面板，'apartServList'（定义为alias: 'widget.RequisitesApartment'） - 某些面板。

感谢sra！

Answer 3

正确的做法是将配置对象传递给成员函数控制到 controller init 功能。来自Sencha文档：控制功能使您可以轻松地监听视图类上的事件，并使用处理函数执行某些操作。

直接来自extjs docs的简单例子：

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');
}
});

希望这会有所帮助。干杯

在控制器ExtJS中定义侦听器

3 个答案: