ExtJS 和 this.control 查询

Question

我对下一个代码块有疑问：

run: function(e, row){
    var me = this;

    var container = Ext.getCmp('centercontainer');

    try {
        container.removeAll();
    } catch(e) {  }

    // This block is called from another file, I just put it here to show you.
    me.panels = [{
        xtype: 'tabpanel',
        id: 'containertabpanel',
        items: [{
            itemId: 'package',
            title: me.PackageTitle
        },{
            itemId: 'excursion',
            title: me.ExcursionTitle
        }]
    }];

    // Reset
    container.setTitle(me.EditDestinationTitle + row.data.name);
    container.add(me.panels);
    me.tabs = container.getComponent('containertabpanel');

    // console.log(Ext.ComponentQuery.query('#containertabpanel > #package'))

    me.control({
        // Work with 
        // 'tab': {

        // Doesn't work
        'containertabpanel > package': {
            mouseover: me.doPackage
        }
    })

},

有人知道如何捕获 tabpanel 组件的“package”项的单击事件吗？ 我看到当我在 this.control 查询上仅使用“选项卡”选择器时，可以工作，但我无法仅获得“包”选项卡组件。

先感谢您。

Answer 1

在选项卡面板的定义中，您可以指定 -

listeners:{
    click:{
        fn: function(){
           //click handling code goes here
        }
    }
}

Answer 2

如果我理解正确，这是控制器代码，并且您试图捕获面板上的一个项目单击，这是选项卡面板中的许多项目之一，

您可以做的是通过组件查询语法通过其唯一的任何属性来识别您的面板，例如这个：按钮[myprop=blah]
此语法将使用以下配置匹配页面上的任何按钮：

{
    xtype:'button' 
    myprop:'blah'
}

在您的情况下，您可以尝试 tab[itemId=package]

您还需要注意的是控制器只能侦听以下事件：由组件触发。确保您正在侦听的事件被触发（检查文档）。如有必要，您始终可以触发自定义事件。

Answer 3

你需要这样做

me.control({
    // Work with 
    // 'tab': {

    // Doesn't work
    'containertabpanel > #package': {
        mouseover: me.doPackage
    }
})