PDA

View Full Version : Panel collapsed and disabled.



BradHarbin
16 Sep 2009, 6:15 AM
In a viewport I have placed an east and west region panels. Initially they should be collapsed and disabled so that a user can not expand the panel.

new Ext.Panel({
....
collapsible: true,
collapsed: true,
disabled: true,
....
});

When these three properties are set the panel is collapsed, however you are able to expand it. Once expanded the panel becomes disabled and you cannot collapse. The intended functionality would be that the panel is collapsed and disabled so that a user can not expand it at all.

The same disable issue exists when calling panel.disable();

Suggestions?

Keylan
16 Sep 2009, 10:46 AM
I didn't actually have the time to play around with this, but I am wondering if it would allow you to set collapsed: true, with collapsible: false and disabled: true.

This might give you the starting point you were looking for?

BradHarbin
16 Sep 2009, 12:59 PM
It is possible to set collapsible: false, with the panel collapsed and disabled. The result is a collapsed panel with the toolbar botton removed with the same functionality I described in the original post.

When Panel onDisable is fired
onDisable : function(){
....
Ext.Panel.superclass.onDisable.call(this);
}
calls...

onDisable : function(){
this.getActionEl().addClass(this.disabledClass);
this.el.dom.disabled = true;
},

this.el.dom is the correct panel object, however setting it to disabled does not affect the collapsed panel.

When disabled: true in the Ext.Panel properties the onDisabled event was being fired prior to the collapse event, So I removed the disabled property from the panel properties and called panel.disable() after the collapse events were fired and the control was rendered. The result is the same as the original post.

For now I am going to toggle .show()\.hide() instead of .enable()\.disable(), however the disabled collapsed panel is the better UI design so controls are not appearing and disappearing!

Keylan
16 Sep 2009, 1:05 PM
It is possible to set collapsible: false, with the panel collapsed and disabled. The result is a collapsed panel with the toolbar botton removed with the same functionality I described in the original post.


I think I became confused at some point. Isn't this the functionality that you wanted? (A collapsed/disabled panel with no toolbar button to allow it to be expanded?)

BradHarbin
16 Sep 2009, 1:11 PM
That would be an acceptable solution, however ideally it would be the complete panel with the button disabled. To elaborate more on the solution you proposed, collapsible: false, collapsed: true, disabled:true, the expand button is not there, however you can double click on the panel and it will still expand and then the whole thing becomes disabled. So the functionality is the exact same as the original post, however the expand, collapse button does not exist at all in the panel so even if enable() was applied to the panel there would be no way to collapse it after it is expanded.

Despite everything I have tried and debugged, I am not able to get a collapsed panel to be disabled.