View Full Version : Layout and Height Issues

17 Jul 2012, 5:48 AM

In my viewport east region, I have a toolbar and a grid (with paging toolbar at the bottom). I want the grid to occupy all the space left after the toolbar. If I dont specify the height in the grid, it has a height controlled by the number of records which are shown. I want the paging toolbar to be anchored to the bottom of the east region irrespective of the number of records displayed. Currently I am using the height config with a fixed height.

What layout should I use for the east region and what config options should I add to it or to the child components? I have tried using anchor layout for the east region and using anchor: '100%' in the grid.

I am using 4.0.7.


Tim Toady
17 Jul 2012, 6:33 AM
I am assuming you are using a border layout since you are referring to the east region. Your east region should be full height and the paging bar should be at the bottom if your east region is your grid. You shouldn't specify a height. Here is a quick example

Ext.create( 'Ext.container.Viewport', {
layout: 'border',
items: [
region: 'center',
title: 'test'
region: 'east',
title: 'east',
width: 400,
xtype: 'grid',
columns: [
header: '1'
header: '2'
dockedItems: [{
xtype: 'pagingtoolbar',
dock: 'bottom'
} );

Are you nesting your grid in a container? If you don't need it nested, I would remove the container. I would need to see your code to guide you if you do need it for some reason because I don't know how your structure is.

17 Jul 2012, 6:43 AM
thanks for your reply Tim. To extract an example from the code is quite difficult at this stage. I will explain it below:

Yes the grid is nested in a panel (which is the east region). The panel has 2 items: toolbar, grid.

The grid also has a bbar (paging toolbar) which I want to be at the bottom of the panel. I think it would work if there were only one item in the panel (like you showed in the example) and I were to use the grid directly as the east region rather than nesting it in a panel but this is not the case for me. The toolbar and the grid are created dynamically and are added to the panel.

Hope this helps.

Tim Toady
17 Jul 2012, 6:55 AM
Assuming the toolbar is an item of the panel you would want

layout: {
type: 'vbox',
align: 'stretch'


on the outer container

Also you would specify flex: 1 on your grid.

Personally, I would try to add the toolbar to the grid instead, but I suppose either way works...

17 Jul 2012, 7:11 AM
Right now, due to some other issues, I am unable to run the application. I will test it tomorrow and update you. thanks a lot for your help!

18 Jul 2012, 2:44 AM
it works! thanks for your help. The flex: 1 also has to be used otherwise its the same as before.