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

},

Кто-нибудь знает, как мне получить, чтобы поймать событие щелчка элемента "package" компонента tabpanel?Я видел, когда я использую только селектор «вкладка» в запросе this.control, это работает, но я не могу получить только компонент вкладки «пакет».

Заранее спасибо.

Answer 1

Если я правильно понял, это код контроллера, и вы пытаетесь поймать элемент, нажмите на панель, которая является одной из многих в панели вкладок

Что вы можете сделать, это идентифицировать вашу панель по любому свойству, уникальному для нее, с помощью синтаксиса запроса компонента, например: button[myprop=blah]
Этот синтаксис будет соответствовать любой кнопке на странице со следующей конфигурацией:

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

В вашем случае вы можете попробовать tab[itemId=package]

Вам также необходимо соблюдать осторожность, чтобы контроллер мог прослушивать только события, запускаемые компонентами. Убедитесь, что событие, которое вы слушаете, сработало (проверьте документы). При необходимости вы всегда можете запустить пользовательские события.

Answer 2

Это нужно сделать

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

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

Answer 3

В вашем определении табульной панели вы можете указать -

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