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

[thesilentman]

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]

Should hideCollapseTool actually hide the expand tool?

Why not set collapsible:false (which needs the fix from this post)?

[thesilentman]

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]

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]

That "sliding over" thing is a floating panel, so my referenced post definately applies!

[Condor]

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]

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]

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]

Thanks for this. Very helpful.