щелкните прослушиватель для панели вкладок в EXTJS

Question

я использую панель вкладок в extjs. Я хочу отображать предупреждение при нажатии на вкладку. Но я не уверен, как.

Вот что я делаю сейчас:

{
                xtype: 'tabpanel',
                activeTab: 0,
                region: 'center',
                items: [
                    {
                        xtype: 'panel',
                        title: 'All',
                        items: [grid]

                    },
                    {
                        xtype: 'panel',
                        title: 'Closed'
                    },
                    {
                        xtype: 'panel',
                        title: 'Open'
                    }
                ],
                 listeners: {
            click: function () {
                alert('test');
            }
                         }
            }

Как можно отобразить все, закрыто или открыто, если на этой вкладке нажата кнопка?

Answer 1

Нет события для нажатия вкладки в TabPanel, однако вы можете привязать событие клика на каждой вкладке:

Ext.createWidget('tabpanel', {
    items: [...],
    listeners: {
        render: function() {
            this.items.each(function(i){
                i.tab.on('click', function(){
                    alert(i.title);
                });
            });
        }
    }
});

Примечание: это код на основе ExtJS 4.

Answer 2

Мне удается сделать это, используя событие tabchange.В приведенном ниже примере я использовал свойство newCard.xtype, где значение xtype (то есть task-archive) - это просто моя панель с элементами управления и соответствующим свойством xtype.

Ext.define('ComplexBrigade.controller.taskArchive.TaskArchive', {
    extend: 'Ext.app.Controller',

    init: function() {
        this.control({
            '#tabWorks': {
                tabchange: this.doTest
            }
        });
    },

    doTest: function ( tabPanel, newCard, oldCard, eOpts) {
        switch (newCard.xtype) {
            case "task-archive":
                console.log("task-archive");
                break;
            case "task-creation":
                console.log("task-creation");
                break;
        }
    }
});