单击 EXTJS 中选项卡面板的侦听器

Posted 2023-02-22

【中文标题】单击 EXTJS 中选项卡面板的侦听器

【英文标题】：click listener for tab panel in EXTJS

【发布时间】：2012-02-17 15:00:00

【问题描述】：

我在 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');
            
                         
            

点击该选项卡时如何显示全部、关闭或打开？

【参考方案1】：

TabPanel没有标签点击事件，但是你可以绑定到每个标签的点击事件：

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

注意：这是基于 ExtJS 4 的代码。

【参考方案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;
        
    
);