I have an Ext.Window
with border layout. This window contain a grid and a TabPanel. This is my TabPanel:
tabMsg = new Ext.TabPanel(
id:'TabPanel',
region : 'south',
plain : true,
collapsible: true,
titleCollapse:'Modify?',
collapsed: true,
hideCollapseTool: true,
//animCollapse : true,
height : 250,
activeTab : 0,
deferredRender: false, // determining whether or not each tab is rendered only when first accessed (defaults to true).
autodestroy : false,
defaults : {bodyStyle : 'padding:10px'},
items : [tab1,tab2,tab3]
});
I want to collapse\expand this only with a button in the window. The problem is how to eliminate the normal behavior of the collapsible item, because when I click on another tab from default the TabPanel collapses because a collapsible item collapse or expand also if you click on the collapsebar.
Ok, i resolve my problem. If is usefull for anyone this is what i do: i give set this properties to my TabPanel:
tabMsgProcessedFill = new Ext.TabPanel({
id:'TabPanel',
region : 'south',
plain : true,
collapsible: true,
collapsed: true,
floatable: false,
split:false,
maxHeight:250,
height:250,
collapseMode:'mini',
hideLabel: true,
animCollapse : false,
activeTab : 0,
deferredRender: false, // determining whether or not each tab is rendered only when first accessed (defaults to true).
autodestroy : false,
defaults : {bodyStyle : 'padding:10px'},
items : [tab1,tab2,tab3]
});
and make this override
Ext.override(Ext.layout.BorderLayout.Region,{
getCollapsedEl : function(){
if(!this.collapsedEl){
if(!this.toolTemplate){
var tt = new Ext.Template(
'<div class="x-tool x-tool-{id}">*</div>'
);
tt.disableFormats = true;
tt.compile();
Ext.layout.BorderLayout.Region.prototype.toolTemplate = tt;
}
this.collapsedEl = this.targetEl.createChild({
cls: "x-layout-collapsed x-layout-collapsed-"+this.position,
id: this.panel.id + '-xcollapsed'
});
this.collapsedEl.enableDisplayMode('none'); /*change from block*/
if(this.collapseMode == 'mini'){
this.collapsedEl.addClass('x-layout-cmini-'+this.position);
this.miniCollapsedEl = this.collapsedEl.createChild({
cls: "x-layout-mini x-layout-mini-"+this.position, html: "*"
});
this.miniCollapsedEl.addClassOnOver('x-layout-mini-over');
this.collapsedEl.addClassOnOver("x-layout-collapsed-over");
this.collapsedEl.on('click', this.onExpandClick, this, {stopEvent:true});
}else {
if((this.collapsible !== false) && !this.hideCollapseTool) {
var t = this.toolTemplate.append(
this.collapsedEl.dom,
{id:'expand-'+this.position}, true);
t.addClassOnOver('x-tool-expand-'+this.position+'-over');
t.on('click', this.onExpandClick, this, {stopEvent:true});
}
if((this.floatable !== false) || this.titleCollapse) {
this.collapsedEl.addClassOnOver("x-layout-collapsed-over");
this.collapsedEl.on("click", this[this.floatable ? 'collapseClick' : 'onExpandClick'], this);
}
}
}
return this.collapsedEl;
}
Then the window contain the TabPAnel have layout:'border' and a button who expand or collapse the tabPanel.