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?
Alexey, Here is my example code with more specific questions:
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.
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?
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");
}
}
});
});
Please attached a function to event 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);
}
}
});
});