PDA

View Full Version : [CLOSED-994] GridPanel height problem in 3.2.0 and 3.2.1



cdevine870
25 May 2010, 4:15 PM
Ext version tested:


Ext 3.0.0 rev ____
Ext 3.1.0 rev ____
Ext 3.2.0 rev ____
Ext 3.2.1 rev ____



Adapter used:


ext



css used:


only default ext-all.css





Browser versions tested against:


IE8
FF3 (firebug 1.3.0.10 installed)



Operating System:


WinXP Pro



Description:


I have two GridPanels that are rendered into html. Simple and straight forward. One uses Ext.data.Store, and the other SimpleStore. The height is set at create time. All is fine in 3.0 and 3.1.

I then upgraded to 3.2.0 and then 3.2.1. In 3.2 and above, the height of the second rendered grid (grid.render()) is set to and rendered to about one data row's height. This follows the second render call.

Even a call to setHeight does not change the height of the second grid.



Test Case:



<html>
<header><title>Test Case</title>
<link rel="stylesheet" type="text/css" href="http://10.0.2.201/ext-3.2.1/resources/css/ext-all.css" />
<script type="text/javascript" src="http://10.0.2.201/ext-3.2.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://10.0.2.201/ext-3.2.1/ext-all-debug-w-comments.js"></script>
</header>
<body>

<table border="0" >
<tr>
<td id="grid-left"></td>
<td id="grid-right"></td>
</tr>
</table>

<script type="text/javascript" >

Ext.onReady(function()
{
var rdata = [["title","Class","1" ]];

var rstore = new Ext.data.ArrayStore({
fields: [
'jobtitle',
'classification',
'masterid'],
data : rdata
});

var ldata = [["title2","Class2","2" ]];

var lstore = new Ext.data.ArrayStore({
fields: [
'jobtitle',
'classification',
'masterid'],
data : ldata
});

var gridL = new Ext.grid.GridPanel({
store: lstore,
cm: new Ext.grid.ColumnModel([
{header: "Title", width: 80, sortable: true, dataIndex: 'jobtitle'},
{header: "Classification", width: 80, sortable: true, dataIndex: 'classification'},
{header: "Master ID", width: 80, sortable: true, dataIndex: 'masterid' }
]),
width: 400,
height: 400,
el: 'grid-left',
title: '<center>gridL</center>'
});



var gridR = new Ext.grid.GridPanel(
{
store: rstore,
cm: new Ext.grid.ColumnModel([
{header: "Title", width: 80, sortable: true, dataIndex: 'jobtitle'},
{header: "Classification", width: 80, sortable: true, dataIndex: 'classification'},
{header: "Master ID", width: 80, sortable: true, dataIndex: 'masterid' }
]),
width: 400,
height: 400,
el: 'grid-right',
title: '<center>gridR</center>'
});

gridL.render();
gridR.render();

console.log("glih="+gridL.getInnerHeight());
console.log("grih="+gridR.getInnerHeight());
});
</script>
</body>
</html>


See this URL : http://


Steps to reproduce the problem:


Display Page.



The result that was expected:


Same size grids.



The result that occurs instead:


The second grid is one row high.



Screenshot or Video:





Debugging already done:


none



Possible fix:


not provided

evant
13 Jul 2010, 11:29 PM
I've tested this against the latest 3.3 SVN build and the problem doesn't present itself. I believe a change made in 3.2.1 that was causing the issue was reverted.

Marking this issue as closed, thanks for the detailed report.