PDA

View Full Version : Collpible to the right / left



l.cresp
23 Jun 2010, 4:53 AM
Hi all,

How would you add a component that is collapsible to the side (right/left). If you add the property collapsible:true it is then collapisble up to down, I want it collapsible to the side. Like in the border layout if you make the east or west panels collpsible.

Thank you for your answers!

l.cresp
23 Jun 2010, 5:00 AM
Sorry for the "Collpible", "collpsible" and other typos :)

Condor
23 Jun 2010, 5:04 AM
Ext currently doesn't support that (apart from BorderLayout).

You would need to change the collapse animation and the way collapsed panels are displayed.

ps. I'm told that Ext 4 will support this.

l.cresp
23 Jun 2010, 5:07 AM
Right, I'll create my own jquerry script for that then. Thanks for your answer.

Condor
23 Jun 2010, 5:13 AM
Why jQuery and not Ext?

l.cresp
23 Jun 2010, 5:20 AM
Errr... because to me ext is a UI builder while jquerry is more "low level", for small things. I didn't event thought about using ext for this kind of job... probably because I'm new to ext and don't know how to properly use it.
So how should I start getting this working?

Condor
23 Jun 2010, 7:13 AM
Quick hack:

Ext.ns('Ext.ux');
Ext.ux.SidePanel = Ext.extend(Ext.Panel, {
collapsible: true,
collapseEl: 'el',
slideAnchor: 'l',
onCollapse : function(){
var collapsedEl = this.getCollapsedEl();
collapsedEl.setHeight(this.el.getHeight());
collapsedEl.alignTo(this.el, 't' + this.slideAnchor);
collapsedEl.show();
Ext.ux.SidePanel.superclass.onCollapse.apply(this, arguments);
},
afterExpand : function(anim){
this.getCollapsedEl().hide();
Ext.ux.SidePanel.superclass.afterExpand.apply(this, arguments);
},
getCollapsedEl : function(){
var collapsedEl = this.collapsedEl;
if (!collapsedEl) {
var side = slideAnchor = 'l' ? 'west' : 'east';
collapsedEl = this.collapsedEl = Ext.DomHelper.insertBefore(this.el, {
tag: 'div',
cls: 'x-layout-collapsed x-layout-collapsed-' + side,
children: [{
cls: 'x-tool x-tool-expand-' + side
}]
}, true);
collapsedEl.child('.x-tool-expand-' + side).on('click', this.expand.createDelegate(this, []));
}
return collapsedEl;
}
});
Ext.onReady(function(){
new Ext.ux.SidePanel({
title: 'Hello',
html: 'World',
width: 300,
height: 200,
renderTo: Ext.getBody()
});
});
(warning: untested code!)