javascript 在 ExtJS 4 的 tabpanel 中，如何在每次单击选项卡时捕获 tabchange 事件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14635476/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
In the tabpanel of ExtJS 4, how to catch the tabchange event anytime I click a tab?
提问by skywang
For each tab in the tabpanel, I have one floating panel located in a fixed spot. When I switch the tabs, I need to bring the corresponding floating panel to the front. However, the tabchange event is fired only the first time. How can I catch this tabchange or other similar event when I click a tab?
对于 tabpanel 中的每个选项卡，我有一个位于固定位置的浮动面板。当我切换标签时，我需要将相应的浮动面板带到前面。但是，tabchange 事件仅在第一次触发。单击选项卡时，如何捕获此 tabchange 或其他类似事件？
Alexey, Here is my example code with more specific questions:
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 }
}
});
});
The "tabchange" message just prints once. What I really want is to show the message "beforeshow on ..." everytime I click a tab.
“tabchange”消息只打印一次。我真正想要的是每次单击选项卡时都显示“beforeshow on ...”消息。
Leoh, you are the man! It turned out the problem in my code is the "fn". The following code works perfectly by removing "fn", "scope", and "single". I don't know why though. Can anybody explain?
利奥，你是男人！原来我的代码中的问题是“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");
}
}
});
});
回答by leoh
Please attached a function to event tabchange
请将功能附加到事件 tabchange
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);
}
}
});
});
回答by dbrin
You can try using beforeshow events on the panels that are being shown after tab change
您可以尝试在选项卡更改后显示的面板上使用 beforeshow 事件
