OK, this is an example that shows both my collapsible:false/floatable:true problem and your collapsible:true/floatable:false/hideCollapseTool:true problem.
- Panel A shouldn't have an expand tool and floats wrong
- Panel C also shouldn't have an expand tool (and should expand on title click).
Code:
Ext.onReady(function(){
new Ext.Viewport({
layout: 'border',
items: [{
region: 'north',
title: 'Panel A',
collapsible: false,
floatable: true,
collapsed: true,
html: Ext.example.bogusMarkup
},{
region: 'center',
title: 'Panel B',
html: Ext.example.bogusMarkup
},{
region: 'south',
title: 'Panel C',
collapsible: true,
floatable: false,
collapsed: true,
hideCollapseTool: true,
titleCollapse: true,
cmargins: '0 0 0 0',
html: Ext.example.bogusMarkup
}]
});
});
and this would be the fix for both (I also added support for titleCollapse:true):
Code:
Ext.override(Ext.layout.BorderLayout.Region, {
render : function(ct, p){
this.panel = p;
p.el.enableDisplayMode();
this.targetEl = ct;
this.el = p.el;
var gs = p.getState, ps = this.position;
p.getState = function(){
return Ext.apply(gs.call(p) || {}, this.state);
}.createDelegate(this);
if(ps != 'center'){
p.allowQueuedExpand = false;
p.on({
beforecollapse: this.beforeCollapse,
collapse: this.onCollapse,
beforeexpand: this.beforeExpand,
expand: this.onExpand,
hide: this.onHide,
show: this.onShow,
scope: this
});
if(this.collapsible || this.floatable){
p.collapseEl = 'el';
p.slideAnchor = this.getSlideAnchor();
}
if(p.tools && p.tools.toggle){
p.tools.toggle.addClass('x-tool-collapse-'+ps);
p.tools.toggle.addClassOnOver('x-tool-collapse-'+ps+'-over');
}
}
},
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('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;
}
});