PDA

View Full Version : Best way to set up a screen filling viewport with changing contents



rijkvanwel
5 Apr 2012, 5:53 AM
Hey all,

I have quite some experience with Ext, but have never worked with Viewports, so I'm looking for the right way to set things up.

My application consists of a very simple static header, with a grid below it. The grid is where it becomes complex. It can be both a tree grid (ux) and a 'regular' grouping grid, depending on the selected view. I've currently implemented this using two physical grids, one of which I .hide() and the other I .show().

This works fine, but now I (well, our client) want to make the screen adapt to monitor resizing (dynamically), so I was thinking Viewport. However, it turns out to be quite hard to have two center regions that are layout:fit! The first renders fine, but the second isn't assigned the right height, and doesn't stretch vertically when resizing the screen.

What would be the best way of implementing this? Maybe use a placeholder panel, and insert the grids dynamically upon switching views (by calling removeAll() and add() on the placeholder panel)?

Thanks!

damo
5 Apr 2012, 6:18 AM
What would be the best way of implementing this? Maybe use a placeholder panel, and insert the grids dynamically upon switching views (by calling removeAll() and add() on the placeholder panel)?

Yup, that's how I always do it, although use a container not panel as you won't need all the extra stuff panel gives.

willigogs
5 Apr 2012, 8:51 AM
I would recommend making the center panel use a "vbox" layout (and layoutConfig of align: 'stretch') then add both grids to this with "Flex:1".

You can then simply continue to show and hide the grids (remember to perform "doLayout()" on the parent afterwards) as you do normally.

e.g.


var centerregion = {
id: 'centerregion',
region:'center',
layout:'vbox',
layoutConfig: {
align:'stretch'
},
defaults: {flex:1},
items: [grid1, grid2]
};