44
rated 0 times
[
45]
[
1]
/ answers: 1 / hits: 17171
/ 12 Years ago, thu, january 31, 2013, 12:00:00
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);
}
}
});
});
More From » extjs
