View Full Version : Grid Panel in Border Layout, Footer Toolbar moved up

10 Apr 2012, 6:00 AM
Ok. I have a border layout and in the center I have a grid panel. Now if there are many records in the grid everything is fine, as the center region overflows and the footer toolbar is at the bottom of the grid. Now if there are fewer records I would like to have the toolbar moved up to the bottom of the last row. Otherwise our users might not make the connection that the toolbar actually belongs to the grid.

If I set the layout of the container to "fit" the toolbar is always visible (as I want it to be), but always at the bottom of the region.

If I set the layout to "anchor" and have autoscroll : true, I have the desired behaviour that the toolbar is actually at the bottom of the grid (if it is shorter), but the toolbar moves out of view, if the grid is overflowing the container.

Is there a way to achieve that the footer toolbar stays visible, but moves up, when there is space available?

10 Apr 2012, 9:28 AM
Please try adding the toolbar as dockedItem to the grid.

dockedItems: [
xtype: 'pagingtoolbar',
displayInfo: true,
dock: 'bottom'


11 Apr 2012, 1:11 AM
Hey Scott,

thanks for the reply. Sadly I already added the toolbars as docked items:

xtype : 'panel',
region : 'center',
layout : 'anchor',
autoScroll : true,
items : [{"xtype" : "App_MyGrid"}

Ext.define('App.view.MyGrid', {
"columns" : [{
"xtype" : "numbercolumn",
"dataIndex" : "id",
"format" : "0,000",
"text" : "id",
"flex" : 1
"dockedItems" : [{
"xtype" : "toolbar",
"dock" : "bottom",
"items" : [{
"xtype" : "button",
"text" : "Button"
"extend" : "Ext.grid.Panel",
"alias" : "widget.App_MyGrid"

Layout 'anchor':

Layout 'fit':

11 Apr 2012, 4:36 AM
I think the problem is related to your use of a Border layout and the center region. The API docs state this about the center region:

The child item in the center region will always be resized to fill the remaining space not used by the other regions in the layout.

This means that the grid footer will always be forced to the bottom of the center region.

You'll probably need to use a master panel with a vbox layout, with two child panels. Put your grid in the first/top panel (being sure to not set a height on the grid) and configure the second/bottom panel to use a flex value.

17 Apr 2012, 5:31 AM
Finally came around to test this out. This works almost perfect. But maybe I have to solve that problem differently.

I tried to exchange the grid now with a Tree. And now the tree has the problem it does not autoextend its height when opening nodes. I got that only working when having a layout 'fit' as well, but that wouldn't be too bad, because the tree does not get a bottom toolbar right now. But which layouts support changes from a tree as well?

xtype: 'panel',
region: 'center',
layout: {
autoScroll: true,
items: [
{xtype: 'panel', layout: 'anchor', items: {"xtype":"App_MyGrid"}},
{xtype: 'container', flex: 1}]