PDA

View Full Version : [2.2] "hideCollapseTool: true" still shows "expand" tool if Panel starts collapsed



thesilentman
21 Aug 2008, 4:30 AM
Tested on (Win)FF3.0/IE7

Description:
The following Panel is rendered into the west region of a BorderLayout.
The Panel is rendered collapsed (collapsed: true).

The problem is that hideCollapseTool:true should also hide the expand button, not only the collapse button.

Here's the config for the west panel.
One only needs to set


collapsible: true,
collapsed: true,
hideCollapseTool: true,

though, to reproduce the issue.....



autoScroll:true,
loader: new Tree.TreeLoader({dataUrl:'blabla'}),
containerScroll: true,
title: 'test',
width: 200,
region: 'west',
collapsible: true,
collapsed: true,
hideCollapseTool: true,
split:true,
rootVisible:false,
width: 150



Best regards,
Frank

Condor
21 Aug 2008, 4:32 AM
Should hideCollapseTool actually hide the expand tool?

Why not set collapsible:false (which needs the fix from this post (http://extjs.com/forum/showthread.php?t=43070))?

thesilentman
21 Aug 2008, 4:41 AM
Hello Condor,
IMHO it should. I want the collapse/expand function (to be honest only the "sliding over" thing, not the expanding that takes up space from the rest other regions). I believed that it is this scenario that the 'hideCollapseTool ' config was aiming for.

I could of course be wrong, but the manual says:

True to hide the expand/collapse toggle button when collapsible = true, false to display it (defaults to false).

So, if I set this option to 'true', both xpand/collapse toggle buttons should be hidden.

thesilentman
21 Aug 2008, 10:42 PM
Hm, "editing" a post does not trigger an email to announce an update in the thread.
Just keeping this up to date. see my last message

Condor
21 Aug 2008, 11:02 PM
That "sliding over" thing is a floating panel, so my referenced post definately applies!

Condor
21 Aug 2008, 11:18 PM
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).


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):


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;
}
});

thesilentman
26 Aug 2008, 3:05 AM
Thanks Condor for this patch.
It works fine.
So I guess this makes it "not" a bug. ;)
Should we close this, or move it somewhere else?

Condor
26 Aug 2008, 3:15 AM
It's not a real bug, but it is so close to expected behavior that it could be classified as one.

Just leave the thread as it is and let an Ext JS Core Developer decide whether the Ext JS source should be modified.

nateirwin
11 Sep 2008, 9:00 AM
Thanks for this. Very helpful.