View Full Version : Split Portal Columns

1 Mar 2012, 1:26 AM

In the portal example, how can I split columns?

If I convert the 'column' layout to 'border' (in PortalPanel.js), I couldn't add columns (regions in this case) dynamically. On the other hand the scrolls disappears. It seems that the 'app-portal' layout has lost its functionality.

Thank you in advance.

1 Mar 2012, 1:33 PM
Are you wanting to have a column collapse or something?

2 Mar 2012, 12:58 AM
I want to change columns widths using the split bar situated between them.
I have edited the following image using photoshop to tell you what I mean.

I appreciate your concern


2 Mar 2012, 6:05 AM
I wonder if you can use resizable on the columns...

2 Mar 2012, 10:26 PM
I have used resizable. But you must handle column widths yourself.
Maybe with some configuration we can use resizable works similar to split.
Is there any way to do that?

19 Mar 2012, 11:12 AM
I have handled columnWidths in this way:
Don't know if this is the best way to do it though.

24 Jul 2012, 4:42 PM

Personally, I would try to override Portal using HBox instead Column layout.

I would start to override from this code.

initComponent : function () {
var me = this;

// Implement a Container beforeLayout call from the layout to this Container
this.layout = {
type : 'hbox',
align : 'stretch'


validatedrop : true,
beforedragover : true,
dragover : true,
beforedrop : true,
drop : true
this.on('drop', this.doLayout, this);

Sure, needs more overrides to get it all working. For example, a JS error occurs on dragging. Though not always.

I can't estimate how difficult it might be, but I believe it's possible.

The benefit is the power of the HBox layout, i.e. splitting and, probably, reordering columns.

At least, with the above override you will be able to split columns if configure Ext.resizer.Splitter between the columns.