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”项目的click事件？我看到当我在this.control查询上使用“tab”选择器时，该工作，但我不能只获得“包”选项卡组件。

提前谢谢。

Answer 1

在您的tabpanel定义中，您可以指定 -

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

Answer 2

如果我理解正确这是控制器代码，并且您正试图抓住项目，请单击面板上的一个项目，该面板是tabpanel中的众多面板之一

您可以做的是通过组件查询语法，通过任何属于它的独特属性来识别您的面板，如下所示：button[myprop=blah]
此语法将使用以下配置匹配页面上的任何按钮：

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

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

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

Answer 3

你需要这样做

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

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

ExtJS和this.control查询

3 个答案: