PDA

View Full Version : GridPanel height not working in border layout



Tamara Williams
18 Feb 2010, 8:09 AM
Dear All:

I read the gridpanel and layout examples but still have a problem in getting the grid to the maximum height. I need to use the border layout, tab panel and grids and when I set the height of the top parent layout it still does not work. If I set an height for the gridpanel then it shows differently in different browsers. I used autoheight for all the panels but it still does not work. I used a viewport for the parent and even have layout:fit. The code for the relevant areas are shown below:

Viewport:


viewport=new Ext.Viewport({
layout:"border",
items:[{
region:'north',
height:50,
bodyStyle:'background-color:#DEECFD',
html:"<div id='maintitle'><img src='images/qsystem.png'></div><div id='mainlogo'><img src='images/synquote.png'></div><div id='loginfo'>anonymous</div>",
split:true
},
{
region:"west",
collapsible:true,
collapseMode:'mini',
split:true,
width:160,
items:[
{
xtype:'LeftPanel'
}]
},
{
region:"center",
autoHeight:true,
height:'auto',
layout:'fit',split:true,
items:[
{
xtype:"MainPanel"
}]
}/*,{
region:'south',split:true,height:0,minHeigt:0,maxHeight:0
}*/
]
});


TabPanel:


Ext.apply(this,{
id:"mainpanel",
activeTab:0,
layoutOnTabChange: true,
region:"center",
autoHeight:true,
height:'auto',
border:false,
items: this.grid
});


GridPanel:


this.grid = new Ext.grid.GridPanel({
store: this.ds, //the DataStore object to use (ds: is shorthand)
cm: this.colModel, //gets the ColumnModel object to use (cm: is shorthand)
selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),//true to limit row selection to 1 row})
viewConfig:{forceFit:true},
//height:350,//you must specify height or autoHeight
autoHeight:true,
height:'auto',
title:'Drafts',


I used search in the forums and have tried the responses but still nothing. I also attached an image where you can see the blue space where the grid should be filling up. Please help me.

Tamara Williams
19 Feb 2010, 8:13 AM
Dear All:

My supervisor found the solution to the problem. He added the function displayed below.



// Modifies the grid's height so that it takes up the full height
onLayout: function(ct, target) {
// Sets the height of the grid by getting the height of the parent container and subtracting height of the tab label and toolbar
this.grid.setHeight(this.ownerCt.getInnerHeight() - 25);
},

jamesn
15 Mar 2010, 10:04 PM
This seems a little 'hackish', especially the 25. There must be a better way of handling the layout. I've been reading about the different layout methods and it appears that there are layouts that allow the grid to be 100% height.

I found this post: http://edspencer.net/2009/09/ext-ux-layout-fillcontainer.html , but this is trying to solve a different problem.

Is there a layout that automatically allows a grid to resize to 100% height?

Animal
15 Mar 2010, 10:23 PM
Your supervisor got id badly wrong.

Use a layout

jamesn
16 Mar 2010, 4:12 AM
Thanks for the response Animal :)

I've got a simple example here and I'm clearly not 'using layout', although I'm not sure what that means exactly. Is there some clear documentation that describes it?

I've included the following code snippet for a simple grid in a border layout. the 'center' area is a grid that doesn't resize to fill the container panel. Or, more specifically the GridPanel doesn't appear to fill the container?



<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Grid Test</title>
<link rel="stylesheet" type="text/css" href="js/ext-3-1-1/resources/css/ext-all.css" />
<script src="js/ext-3-1-1/adapter/ext/ext-base.js"/>
<script src="js/ext-3-1-1/ext-all.js"/>
<script type="text/javascript">
//<![CDATA[


/*
* set up default data
*/
var arrayData = [
['Jay Garcia', 'MD'],
['Aaron Baker', 'VA'],
['Susan Smith', 'DC'],
['Mary Stein', 'DE'],
['Bryan Shanley', 'NJ'],
['Nyri Selgado', 'CA']
];

/*
* Configure a record to describe the data
*/
var nameRecord = Ext.data.Record.create([
{ name : 'name', mapping : 0 },
{ name : 'state', mapping : 1 }
]);

var arrayReader = new Ext.data.ArrayReader({}, nameRecord);

var memoryProxy = new Ext.data.MemoryProxy(arrayData);

var store = new Ext.data.Store({
reader : arrayReader,
proxy : memoryProxy
});

/*
* Configure a columnModel to layout the columns
*/
var colModel = new Ext.grid.ColumnModel([
{
header : 'Full Name',
sortable : true,
dataIndex : 'name'
},{
header : 'State',
dataIndex : 'state'
}
]);

var gridView = new Ext.grid.GridView();

var selModel = new Ext.grid.RowSelectionModel({
singleSelect : true
})


/*
* Configure the grid
*/
var grid = new Ext.grid.GridPanel({
autoHeight : true, // ???
width : 280,
store : store,
view : gridView,
colModel : colModel,
selModel : selModel
});

Ext.onReady(function () {
var k = new Ext.Window({
title: 'grid height sample',
height: 260,
width: 280,
layout: 'border',
items: [{
region:'north',
html:' north',
height:30 // according to the docs, at least one height should be specified in the north/south blocks
},{
region:'center',
items : [grid]
}]
}); // end k

store.load();
k.show();

} // end function
); // end on ready

//]]>
</script>
</head>
<body>
</body>
</html>

Animal
16 Mar 2010, 4:15 AM
Why NEST your grid INSIDE an extra Panel?

An extra Panel which has no layout configuration.

And the API docs go into great great detail about layout and why you must remember it.

It's SO common for people to just hope that their app just reads their mind when it comes to layout that it's really overemphasized in the docs.

jamesn
16 Mar 2010, 5:26 AM
I modified the code according to be the following based on Animal's response.




var grid = new Ext.grid.GridPanel({
//autoHeight : true, // doesn't appear to be needed
width : 280,
store : store,
view : gridView,
region :'center', // set the region in this 'panel'
layout :'fit', // set the layout
colModel : colModel,
selModel : selModel
});

Ext.onReady(function () {

var k = new Ext.Window({
title: 'grid height sample',
height: 260,
width: 280,
layout: 'border',
items: [{
region:'north',
html:' north',
height:30 // according to the docs, at least one height should be specified in the north/south blocks
},grid // don't bother with another panel here, the grid is already a gridPanel
]
}); // end k

store.load();

k.show();

} // end function
); // end on ready



This removed the additional grid and used the grid panel and the layout just works as I expected it would - finally. Now I have to go through my examples and check that I've got the correct structure in place.

For those looking in tha api docs, the section that you are looking for is:
http://www.extjs.com/deploy/dev/docs/?class=Ext.layout.FitLayout

Although, is you get the panel hierarchy wrong as I did, there is little hope.

Tamara:
Based on what I just learned, your code should be updated to look like:



{
region:"west",
collapsible:true,
collapseMode:'mini',
split:true,
width:160,
xtype:'LeftPanel'

},
{
region:"center",
autoHeight:true, // should be able to remove this
height:'auto', // should be able to remove this
layout:'fit',
split:true,
xtype:"MainPanel"


That way you don't have too many panels (assuming that MainPanel and LeftPanel are children of Panel).

Animal
16 Mar 2010, 6:09 AM
You may NOT use autoHeight if you expect it to be managed by a layout. This is documented.

shizny
31 Mar 2011, 8:06 AM
And your documentation isn't very good. Animal, do you have a problem with linking people to solutions of problems that they are having, or explaining things that aren't obvious to people that haven't been developing extjs? Isn't that part of your job? Don't you want people to like Sencha and think their moderators are there to help and not to make you feel stupid. 75% of what I read from you, "Animal" is borderline ty. You are turning potential developers off with your half-ass responses.