Condor
8 Jan 2009, 1:39 AM
TabPanel has a very useful layoutOnTabChange config option, but IMHO this feature should have been implemented in CardLayout, so all panels with card layout (including TabPanel) can use it.
Suggested changes:
Ext.override(Ext.layout.CardLayout, {
setActiveItem : function(item){
item = this.container.getComponent(item);
if(this.activeItem != item){
if(this.activeItem){
this.activeItem.hide();
}
this.activeItem = item;
item.show();
this.layout();
if(this.layoutOnCardChange && item.doLayout){
item.doLayout();
}
}
}
});
Ext.override(Ext.TabPanel, {
initComponent : function(){
this.frame = false;
Ext.TabPanel.superclass.initComponent.call(this);
this.addEvents(
'beforetabchange',
'tabchange',
'contextmenu'
);
this.setLayout(new Ext.layout.CardLayout(Ext.apply({
layoutOnCardChange: this.layoutOnTabChange,
deferredRender: this.deferredRender
}, this.layoutConfig)));
if(this.tabPosition == 'top'){
this.elements += ',header';
this.stripTarget = 'header';
}else {
this.elements += ',footer';
this.stripTarget = 'footer';
}
if(!this.stack){
this.stack = Ext.TabPanel.AccessStack();
}
this.initItems();
},
setActiveTab : function(item){
item = this.getComponent(item);
if(!item || this.fireEvent('beforetabchange', this, item, this.activeTab) === false){
return;
}
if(!this.rendered){
this.activeTab = item;
return;
}
if(this.activeTab != item){
if(this.activeTab){
var oldEl = this.getTabEl(this.activeTab);
if(oldEl){
Ext.fly(oldEl).removeClass('x-tab-strip-active');
}
this.activeTab.fireEvent('deactivate', this.activeTab);
}
var el = this.getTabEl(item);
Ext.fly(el).addClass('x-tab-strip-active');
this.activeTab = item;
this.stack.add(item);
this.layout.setActiveItem(item);
//if(this.layoutOnTabChange && item.doLayout){
//item.doLayout();
//}
if(this.scrolling){
this.scrollToTab(item, this.animScroll);
}
item.fireEvent('activate', item);
this.fireEvent('tabchange', this, item);
}
}
});
Suggested changes:
Ext.override(Ext.layout.CardLayout, {
setActiveItem : function(item){
item = this.container.getComponent(item);
if(this.activeItem != item){
if(this.activeItem){
this.activeItem.hide();
}
this.activeItem = item;
item.show();
this.layout();
if(this.layoutOnCardChange && item.doLayout){
item.doLayout();
}
}
}
});
Ext.override(Ext.TabPanel, {
initComponent : function(){
this.frame = false;
Ext.TabPanel.superclass.initComponent.call(this);
this.addEvents(
'beforetabchange',
'tabchange',
'contextmenu'
);
this.setLayout(new Ext.layout.CardLayout(Ext.apply({
layoutOnCardChange: this.layoutOnTabChange,
deferredRender: this.deferredRender
}, this.layoutConfig)));
if(this.tabPosition == 'top'){
this.elements += ',header';
this.stripTarget = 'header';
}else {
this.elements += ',footer';
this.stripTarget = 'footer';
}
if(!this.stack){
this.stack = Ext.TabPanel.AccessStack();
}
this.initItems();
},
setActiveTab : function(item){
item = this.getComponent(item);
if(!item || this.fireEvent('beforetabchange', this, item, this.activeTab) === false){
return;
}
if(!this.rendered){
this.activeTab = item;
return;
}
if(this.activeTab != item){
if(this.activeTab){
var oldEl = this.getTabEl(this.activeTab);
if(oldEl){
Ext.fly(oldEl).removeClass('x-tab-strip-active');
}
this.activeTab.fireEvent('deactivate', this.activeTab);
}
var el = this.getTabEl(item);
Ext.fly(el).addClass('x-tab-strip-active');
this.activeTab = item;
this.stack.add(item);
this.layout.setActiveItem(item);
//if(this.layoutOnTabChange && item.doLayout){
//item.doLayout();
//}
if(this.scrolling){
this.scrollToTab(item, this.animScroll);
}
item.fireEvent('activate', item);
this.fireEvent('tabchange', this, item);
}
}
});