PDA

View Full Version : Vertical splitbar help



dbassett74
11 Aug 2009, 7:59 AM
I'm trying to figure out how to place two grids in a panel and have a horizontal splitbar between them. I tried the following, but doesn't work:



var grid1 = new MyGrid({ height: 200 });
var grid2 = new MyGrid({ height: 200 });

//showMain();
var split = new Ext.SplitBar(grid1.getEl(), grid2.getEl(),
Ext.SplitBar.HORIZONTAL, Ext.SplitBar.LEFT);
split.setAdapter(new Ext.SplitBar.AbsoluteLayoutAdapter("container"));
split.minSize = 100;
split.maxSize = 600;
split.animate = true;
split.on('moved', splitterMoved);

var pnl = new Ext.Panel({
title: 'Parent',
renderTo: 'divBody',
height: 600,
width: 800,
items: [
grid1,
grid2
]
I can't use the border layout because there will be more than 3 items vertically, which the border layout is limited too (south, center, north).

Any help would be appreciated.

Animal
11 Aug 2009, 9:18 AM
As I have posted about 366355 times.

A Container's layout is responsible for rendering and arranging child Components.

So. YOU read the API docs for the available layouts, and choose which one suits your needs.

Hint: I wrote a column layout class which allow splitbars between items.

Condor
11 Aug 2009, 10:14 AM
Hint: I wrote a column layout class which allow splitbars between items.

Unfortunately, the OP want the panels aligned vertically.

I don't know a layout that can do that (or did somebody extend VBoxLayout for splitters?).

Animal
11 Aug 2009, 10:35 AM
The OP wrote "I'm trying to figure out how to place two grids in a panel and have a vertical splitbar between them"

That would be a ColumnLayout with splitbars.

But maybe he's confused.

Someone extended hbox. Which if the OP does want vertical spltbars would work too.

http://extjs.com/forum/showthread.php?t=65982

If he wants horizontal splitbars, it would need to be an extension of vbox. But in post 14, he say's he's thinking about doing an vbox version.

dbassett74
12 Aug 2009, 9:22 AM
Unfortunately, the OP want the panels aligned vertically.

I don't know a layout that can do that (or did somebody extend VBoxLayout for splitters?).

yes, you are correct. I'm sorry I didn't make this clear. Here is a visual of what I'm trying to achieve:



|--------------|
| Grid1 |
|--------------|
--- splitter-----
|--------------|
| Grid2 |
|--------------|

charleshimmer
31 Aug 2009, 10:48 AM
why not just use a border layout with grid 1 being center, and grid 2 being in the south region and set split config option to true.

dbassett74
31 Aug 2009, 12:16 PM
why not just use a border layout with grid 1 being center, and grid 2 being in the south region and set split config option to true.

This assumes I'm using only 3 regions. What if I have 4 or more?

charleshimmer
31 Aug 2009, 12:18 PM
yes, you are correct. I'm sorry I didn't make this clear. Here is a visual of what I'm trying to achieve:



|--------------|
| Grid1 |
|--------------|
--- splitter-----
|--------------|
| Grid2 |
|--------------|


You said earlier this is what you were trying to achieve. You could clump into sets of two with border layout. Ideally there would be a Vbox with split bar extension to do this.

dbassett74
31 Aug 2009, 12:57 PM
You said earlier this is what you were trying to achieve. You could clump into sets of two with border layout. Ideally there would be a Vbox with split bar extension to do this.

That was just an example. It's actually like this:



|--------------|
| Grid1 |
|--------------|
--- splitter-----
|--------------|
| Grid2 |
|--------------|
--- splitter-----
|--------------|
| Grid3 |
|--------------|
--- splitter-----
|--------------|
| Grid4 |
|--------------|

charleshimmer
31 Aug 2009, 1:00 PM
Gotcha. You could tweak the calculations on the HBox split layout extension so it did vertical calculations. That's the only thing I can think of besides doing a lot of nesting with border layout.

parsifal
19 Oct 2009, 12:55 PM
why not just use a border layout with grid 1 being center, and grid 2 being in the south region and set split config option to true.

I just had to do something like this (but with just a center and a west), and the border layout with split config options worked like a CHARM. THANKS for your post!! :D