PDA

View Full Version : [solved] portal - how to toggle between 2 and 3 columns?



rblon
16 Sep 2009, 1:08 AM
I would like to create in the "portal" layout (see samples) the ability to toggle between 2 or 3 columns, however I don't know how to do this.
My approach was to change the "items" property of the "portal" component (when a toggle button is clicked) and then call the "doLayout" method.
This doesn't seem to be the right approach, also because there is no method to change the "items" property (I am trying to use assignment) and I am doubting the "doLayout" method should be used in this way.
Anyway, as you see, I am bit clueless... Any pointers in the right direction would be much appreciated.

Animal
16 Sep 2009, 2:57 AM
Use an hbox layout instead of column, and simply hide one of the boxes.

rblon
16 Sep 2009, 3:29 AM
It appears that would require quite a overhaul of the 'portal' design (not using column layout), right? Currently, I have used the "Portal Demo" as a template, which has nice features like drag & drop to move panels around (defined in Portal.js etc).
Now, it is easy to change the template to work with 2 instead of 3 columns, however I don't know how to do this dynamically. If hbox layout is the way forward, then fair enough, but if there is an approach which re-uses the column layout that would have my preference.

Animal
16 Sep 2009, 3:59 AM
Why are you imagining it's some hardship and waiting for a white knight to do your job?

I just did exactly what you need to the portal example here. Changed it to hbox layout, and hid the first column. Took 30 seconds because I just tried it:

http://i131.photobucket.com/albums/p286/TimeTrialAnimal/yamoron.jpg

rblon
16 Sep 2009, 5:38 AM
30 seconds... not there yet unfortunately.
I appreciate the tips and I have made the following changes:

* in Portal.js, instead of column layout:


layout: {
type: 'hbox'
}


* then in portal.js, i have changed

columnWidth: .33,
to

flex: 1,

* and I'm toggling with the following function (which assumes that the id's 'portal' and 'column3' are defined)


function toggle() {
var portal = Ext.getCmp('portal');
var column3 = Ext.getCmp('column3');

if (column3.isVisible()) {
column3.setVisible(false);
} else {
column3.setVisible(true);
}

portal.doLayout();
}

this works and hides / unhides column3.

However, this causes another problem: I would like that column3 panels move to column2 when column3 gets hidden. I am trying to copy column3.items to column2.items (using remove and insert methods), but can't get it to work. Any tips for that?

rblon
16 Sep 2009, 6:29 AM
to clarify how I'm trying to move panels



function toggle() {
var portal = Ext.getCmp('portal');
var column2 = Ext.getCmp('column2');
var column3 = Ext.getCmp('column3');

if (column3.isVisible()) {
var len2 = column2.items.length;
var len3 = column3.items.length;

for (var i = 0; i < len3; i++) {
column2.insert(len2+i, column3.items[i]); // breaks
}

// perhaps I should use autoDestroy = true, but
// not getting there anyway for the moment
column3.removeAll(false);

column3.setVisible(false);
} else {
column3.setVisible(true);
}

portal.doLayout();
}

rblon
16 Sep 2009, 7:16 AM
sorry for another reply, but an additional problem is that hbox doesn't allow overflow, while the portal should have a scrollbar when necessary.
I see that this has been discussed in http://www.extjs.com/forum/showthread.php?t=78223, but it is not clear from there if the issue will be fixed in a new release.

rblon
16 Sep 2009, 8:31 AM
ok, think I have solved it now. I went back to column layout, because of the scrollbar issue in the hbox layout. The toggle function now looks as follows:



function toggle() {
var portal = Ext.getCmp('portal');
var column1 = Ext.getCmp('column1');
var column2 = Ext.getCmp('column2');
var column3 = Ext.getCmp('column3');

if (column3.isVisible()) {
// move panels from column3 to column2
column2.add(column3.removeAll(false));
column1.columnWidth = column2.columnWidth = 0.5;
column3.columnWidth = 0.0;
column3.setVisible(false);
} else {
column1.columnWidth = column2.columnWidth = column3.columnWidth = 0.33;
column3.setVisible(true);
}
portal.doLayout();
}

Animal
16 Sep 2009, 11:37 AM
You were nearly there. I'm sure it should be possible with hbox.

flex: 1 on each of the Containers which are to be Portal Columns is a key as you found.

Scrolling is a little trickyer.

.x-box-inner needs style overflow: auto

PortalColumn and Portal need to have autoHeight: true

Then ensure you call doLayout on the Container that contains the Portal instance both after first render and then whenever you hide or show (don't remove unless you never want them again!) one of the boxes which represents a column.

That should be simpler than jiggling column widths.

rblon
16 Sep 2009, 12:40 PM
That's great, basically two solutions to get this working.
It took me more than 30 seconds... but did get me get a step closer to properly know how to use ExtJS.
Thanks vm for your help