在 ExtJS 4 的选项卡面板中,如何在单击选项卡时捕获选项卡更改事件
In the tabpanel of ExtJS 4, how to catch the tabchange event anytime I click a tab?
对于选项卡面板中的每个选项卡,我都有一个位于固定位置的浮动面板。当我切换选项卡时,我需要将相应的浮动面板带到前面。但是,选项卡更改事件仅在第一次触发。单击选项卡时如何捕获此选项卡更改或其他类似事件?
阿列克谢,这是我的示例代码,其中包含更具体的问题:
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 }
}
});
});
"选项卡更改"消息仅打印一次。我真正想要的是显示消息"之前显示......"每次我点击一个选项卡时。
里奥,你就是男人!事实证明,我的代码中的问题是"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");
}
}
});
});
请将函数附加到事件选项卡更改
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);
}
}
});
});
现场演示在这里
您可以尝试在选项卡更改后显示的面板上使用 beforeshow 事件
相关文章:
- AngularJs列表ng单击以选择选项转换
- 如何在不需要单击按钮的情况下获取选项的值
- 单击按钮即可在浏览器的新选项卡中打开 Sapui5 详细信息页面
- 单击Chrome通知后,转到已打开的选项卡
- 如何在快速选项卡式面板中禁用选项卡单击
- 如何在ASP.NET中单击按钮后激活启动选项卡
- 如何禁用鼠标中键单击超链接以在新选项卡或新窗口中打开
- 单击select'时将数组行回显到文本区域中;s选项
- 单击选项卡时jquery选项卡选择不起作用
- 单击按钮进入下一个选项卡,而不是单击选项卡
- 单击选项卡时,为什么不在每次单击时切换
- 如何更改单击按钮时的javascript滑块选项
- 单击事件在jquery easyui多选项卡中不起作用
- 关闭浏览器时发出警报,关闭选项卡并前后单击按钮时发出警报
- 单击我网站中的链接时打开新选项卡,保持当前选项卡处于活动状态
- 隐藏选择选项,并在单击定义的选项后显示它们
- 如何在不刷新页面的情况下每次单击一组选项卡时刷新视图内容窗格
- 高图表图选项单击事件仅在鼠标停留在块中时触发一次
- 选项单击两次
- 提交表单以选择选项.单击