PDA

View Full Version : Layout issues - newbie question



mccartrey
25 Mar 2011, 8:07 AM
Hi all,
I'm a newbie so please be gentle with me. ;)

I have a screen layout with a vertical panel the full height of the window on the left (which I cannot change as that is part of a fixed template).
I need to split the rest of the screen into two areas horizontally i.e. top and bottom
where the the top area will be a formpanel that is fixed height or better still fixed height but collapsible.
The bottom area will be a GridPanel that needs to resize to the remaining space so if the window is resized, this area will resize to match it. This area needs to have scroll bars vertical and horizontal as required also.

I can't seem to work out from any examples what config or components I need to achieve this.
Can anyone help please?

conorarmstrong
25 Mar 2011, 9:01 AM
I take it you mean a view port - not screen layout.

This seems a pretty standard border layout with the fixed height top section as the north with collapsible set to true and the bottom as the 'center' region.. Can you show us what you've tried?

mccartrey
25 Mar 2011, 9:51 AM
I am not using a viewport. The top and bottom areas that I referred to must be based on panels. As far as what I've tried, I've looked at anchors, different varieties of layout config, autoheight, autoscroll. What would you recommend?

conorarmstrong
25 Mar 2011, 2:07 PM
ok, viewport issue aside, I assume you have a div encompasing the entire RHS (with an id of 'mainWrapper' say)

If you were to create the following, should do the trick:



new Ext.Panel({
renderTo: 'mainWrapper',
layout: 'border',
items:[{
xtype: 'panel',
height: 200,
region: 'north',
html: 'This is the top panel'
},{

xtype: 'panel',
region: 'center',
html: 'This is the center panel'
}]
});


I've just set it up with basic panels. If you want to replace those with grids etc that should be fine.