ExtJS and this.control query

ExtJS and this.control query

本文关键字：query control this and ExtJS      更新时间：2023-09-26

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

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查询上只使用"tab"选择器时，这是有效的，但我不能只得到"package"选项卡组件。

提前谢谢。

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

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

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

您可以通过组件查询语法（如button[myprop=blah]
）通过任何对面板唯一的属性来标识面板此语法将使用以下配置匹配页面上的任何按钮：

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

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

您还需要注意的是，控制器只能侦听组件触发的事件。确保您正在侦听的事件已被激发（请查看文档）。如果需要，您可以随时激发自定义事件。

您需要执行此

me.control({
    // Work with 
    // 'tab': {
    // Doesn't work
    'containertabpanel > #package': {
        mouseover: me.doPackage
    }
})
相关文章：