Question

对于tabpanel中的每个标签，我有一个浮动面板位于固定位置。当我切换标签时，我需要将相应的浮动面板放在前面。但是，tabchange事件仅在第一次触发时触发。单击选项卡时如何捕获此tabchange或其他类似事件？

Alexey，这是我的示例代码，其中包含更具体的问题：

Ext.onReady(function() {
    panel1 = Ext.create('Ext.panel.Panel', {
        title: 'title1', width: 800, height: 50,
        listeners: { 'beforeshow': { fn: function() { 
            console.log("beforeshow on title1"); 
        }, scope: this, single: true } }
    });
    panel2 = Ext.create('Ext.panel.Panel', {
        title: 'title2', width: 800, height: 50,
        listeners: { 'beforeshow': { fn: function() { 
            console.log("beforeshow on title2"); 
        }, scope: this, single: true } }
    });
    panel3 = Ext.create('Ext.panel.Panel', {
        title: 'title3', width: 800, height: 50,
        listeners: { 'beforeshow': { fn: function() { 
            console.log("beforeshow on title3"); 
        }, scope: this, single: true } }
    });
    var tabpanel = Ext.createWidget('tabpanel', {
        renderTo: document.body,
        activeTab: 0,
        width: 800, height: 50, plain: true,
        items: [panel1, panel2, panel3],
        listeners: {
            'tabchange': { fn: function() {
                 console.log("tabchange");
            }, scope: this, single: true }
        }
    });
});

“tabchange”消息只打印一次。我真正想要的是每次点击标签时都会显示“在......之前”的消息。

Leoh，你是男人！事实证明我的代码中的问题是“fn”。通过删除“fn”，“scope”和“single”，以下代码可以完美地运行。我不知道为什么。有人可以解释一下吗？

Ext.onReady(function() {
    panel1 = Ext.create('Ext.panel.Panel', {
      title: 'title1', width: 800, height: 50,
      listeners: { 'beforeshow': function() { console.log("beforeshow on title1"); } }
    });

    panel2 = Ext.create('Ext.panel.Panel', {
      title: 'title2', width: 800, height: 50,
      listeners: { 'beforeshow': function() { console.log("beforeshow on title2"); } }
    });

    panel3 = Ext.create('Ext.panel.Panel', {
      title: 'title3', width: 800, height: 50,
      listeners: { 'beforeshow': function() { console.log("beforeshow on title3"); } }
    });

  var tabpanel = Ext.createWidget('tabpanel', {
    renderTo: document.body,
    activeTab: 0,
    width: 800,
    height: 50,
    plain: true,
    items: [panel1, panel2, panel3],
    listeners: {
        'tabchange': function() {
             console.log("tabchange");
        }
    }
  });
});

Answer 1

请将功能附加到事件标签页

Ext.onReady(function () {
    panel1 = Ext.create('Ext.panel.Panel', {
        title: 'title1'


    });
    panel2 = Ext.create('Ext.panel.Panel', {
        title: 'title2'

    });
    panel3 = Ext.create('Ext.panel.Panel', {
        title: 'title3'

    });
    var tabpanel = Ext.createWidget('tabpanel', {
        renderTo: document.body,
        activeTab: 0,
        width: 800,
        height: 50,
        plain: true,
        items: [panel1, panel2, panel3],
        listeners: {
            'tabchange': function (tabPanel, tab) {
                console.log(tabPanel.id + ' ' + tab.id);
            }
        }
    });
});

<强> Live Demo Here

Answer 2

您可以尝试在更改标签后显示的面板上使用beforeshow事件

在ExtJS 4的tabpanel中，如何在单击选项卡时捕获tabchange事件？

2 个答案: