Fit PagingGrid to Document Body

[Fran]

Hi, everyone!

I want to fit my paging grid to all the document body, similar to fullscreen but, full body xD. The problem is that the footer panel don't appear (there is but must to scroll to see it).

That's my code:


// Crear la lista
var grid = new Ext.grid.Grid('editor-grid', {
ds: ds,
cm: cm,
selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),
enableColLock:false
});

var innerLayout = new Ext.BorderLayout(document.body, {
center: {
autoScroll: false,
titlebar: false,
fitToFrame: true,
fitContainer: true
}
});

innerLayout.add('center', new Ext.GridPanel(grid, {autoScroll: false, fitToFrame:true, fitContainer:true}));


It's only a part of the code, i think the problem's here. I was trying to change fitToFrame and fitContainer, but nothing happened. The next is all my code (don't read it all :D):

[code]
Ext.onReady(function(){
// *********************************
// Iconos
// *********************************
iconMagnifier = 'comun/iconos/magnifier.png';
iconAdd = 'comun/iconos/add.png';
iconDelete = 'comun/iconos/cross.png';
iconOK = 'comun/iconos/accept.png';
iconBad = 'comun/iconos/delete.png';
// *********************************
// Scripts
// *********************************
phpList = 'planes/planes.php';
phpAdd = 'planes/add.php';
phpDelete = 'planes/delete.php';
phpUpdate = 'planes/update.php';
// *********************************

var fm = Ext.form, Ed = Ext.grid.GridEditor, myPageSize = 30;

myFields = [{name: 'Expediente', type: 'string'}, {name: 'CIF', type: 'string'}, 'Entidad', 'Nombre', {name: 'FInicio', type: 'string'}, {name: 'FFin', type: 'string'}, {name: 'FAmpliacion', type: 'string'},'Ambito'];

Ext.QuickTips.init();

/************************************************************
Modelos de columnas
************************************************************
Planes
************************************************************/
var cm = new Ext.grid.ColumnModel([{
header: "Expediente",
dataIndex: 'Expediente',
width: 140,
editor: new Ed(new fm.TextField({
allowBlank: false
}))
},{
header: "CIF",
dataIndex: 'CIF',
width: 80,
editor: new Ed(new fm.TextField({
allowBlank: false
}))
},{
header: "Entidad",
dataIndex: 'Entidad',
width: 110,
editor: new Ed(new fm.TextField({
allowBlank: false
}))
},{
header: "Nombre",
dataIndex: 'Nombre',
width: 230,
editor: new Ed(new fm.TextField({
allowBlank: true
}))
},{
header: "Comienzo",
dataIndex: 'FInicio',
width: 80,
renderer: formatDate,
editor: new Ed(new fm.TextField({
allowBlank: false
}))
},{
header: "Fin",
dataIndex: 'FFin',
width: 80,
renderer: formatDate,
editor: new Ed(new fm.TextField({
allowBlank: false
}))
},{
header: "Ampliación",
dataIndex: 'FAmpliacion',
width: 80,
renderer: formatDate,
editor: new Ed(new fm.TextField({
allowBlank: true
}))
},{
header: "Ambito",
dataIndex: 'Ambito',
width: 80,
editor: new Ed(new fm.TextField({
allowBlank: false
}))
}]);

// Se pueden ordenar las columnas
cm.defaultSortable = true;

/*************************************************************
*
* Conexi

[VinylFox]

If you really are just displaying a grid in the entire body of the page, i would get rid of the layout and just use a div.....something like this should work...

Ext.DomHelper.append(document.body, {
tag: 'div', id: 'editor-grid', style: 'overflow:hidden;width: 100%;height: 100%;'
}, true).show(true);

This is what I use for my grids, and there are no scrollbars that show up.