Valamiért a TabPanel kirajzolásnál lefut a tabchange esemény:
renderTo: Ext.getBody(),
activeTab: 0,
items: [
{title:'1', html:'Lorem ipsum...'},
{title:'2', html:'Lorem ipsum...'}
],
listeners: {
'tabchange': function() { alert('tabchange'); }
}
});
Először arra gondoltam, hogy majdhogynem logikus, mivel az inicializálásnál az activeTab Number típusú, míg utána Panel típusú lett. Azaz valóban történt változás. Ám a következő átalakítás után sem javult a helyzet:
var panel2 = new Ext.Panel({title:'2', html:'Lorem ipsum...'});
new Ext.TabPanel({
renderTo: Ext.getBody(),
activeTab: panel1,
items: [panel1, panel2] ,
listeners: {
'tabchange': function() { alert('tabchange'); }
}
});
Problémán átléphetnék egy minimális hack segítségével, miszerint az eseményt a kirajzolás után adnánk hozzá, de még ez sem hozta a kívánt eredményt:
'render': function(tabPanel) {
tabPanel.on('tabchange', function() { alert('tabchange'); });
}
}
Ha már itt vagyunk, akkor lehetne az első tab váltás után hozzárendelni a valódi tab váltás eseményt:
'tabchange': {
fn: function(tabPanel) { tabPanel.on('tabchange', function() { alert('tabchange'); }); },
single: true
}
}
Mindez az első problémára megoldást jelenthetne, ám ez már annyira csúnya, hogy kénytelenek vagyunk ehelyett átvizsgálni a ExtJS kódját a probléma valódi oka miatt. Téves volt az a gondolat, hogy a Number és a Panel típus számítana, ugyanis kirajzoláskor minden esetben a hagyományos setActiveTab fut le:
Ext.TabPanel.superclass.render.apply(this, arguments);
if(this.activeTab !== undefined){
var item = this.activeTab;
delete this.activeTab;
this.setActiveTab(item);
}
}
Így nem maradt más, mint kirajzoláskor átmenetileg kikapcsolni az eseményküldést:
render : function(){
Ext.TabPanel.superclass.render.apply(this, arguments);
if(this.activeTab !== undefined){
var item = this.activeTab;
delete this.activeTab;
this.suspendEvents();
this.setActiveTab(item);
this.resumeEvents();
}
}
});
