PDA

View Full Version : Incorrect grid height in Firefox



OutpostMM
30 Jul 2009, 10:48 PM
I've got a column layout with three grids with the same heights set, but in Firefox (I'm using 3.0.11) they're each getting rendered with a different height. One is 30px shorter than another, and the other is 30px shorter than that. In Opera 10 and IE8 they render the same height. Here's an example:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>SailCalc</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#loading-mask{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
z-index:20000;
background-color:white;
}
#loading{
position:absolute;
left:45%;
top:40%;
padding:2px;
z-index:20001;
height:auto;
width: 200px;
}
#loading a {
color:#225588;
}
#loading .loading-indicator{
background:white;
color:#444;
font:bold 13px tahoma,arial,helvetica;
padding:10px;
margin:0;
height:auto;
}
#loading-msg {
font: normal 10px arial,tahoma,sans-serif;
}
</style>
</head>
<body>
<div id="loading-mask" style=""></div>
<div id="loading">
<div class="loading-indicator"><img src="include/loading.gif" style="width:32px;height:32px;margin-right:8px;float:left;vertical-align:top;">Loading SailCalc...<br><span id="loading-msg">Loading styles and images...</span></div>
</div>

<div id="sailcalc" style="width: 600px; height: 400px;"></div>

<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">

<script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Loading Core API...';</script>
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Loading UI Components...';</script>
<script type="text/javascript" src="ext/ext-all-debug.js"></script>

<script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Initializing...';</script>

<script type="text/javascript" src="include/main.js"></script>
<script type="text/javascript">
Ext.onReady(SailCalc.main.init, SailCalc.main);
</script>

</body>
</html>

main.js:

if ((typeof console) == "undefined" || (typeof console.log) == "undefined")
{
console = {
log: function (v) {} // do nothing if undefined
}
}

Ext.BLANK_IMAGE_URL = "ext/resources/images/default/s.gif";
Ext.namespace("SailCalc");

SailCalc.main = function()
{
return (
{
main_win: null,
gateway: "include/io.php",

init: function()
{
// check for loading mask
Ext.destroy(Ext.get("loading"));
Ext.destroy(Ext.get("loading-mask"));

var beginner_store = new Ext.data.ArrayStore({
autoDestroy: false,
fields: ['kts','mph','kph','sail']
});

var sailsize_store = new Ext.data.ArrayStore({
autoDestroy: false,
fields: ['kts','mph','kph','sail']
});

this.main_win = new Ext.Panel({
renderTo: 'sailcalc',
width: 600,
height: 400,
title: 'Sail Size Calculator',
layout: 'fit',
tbar: new Ext.Toolbar({
id: 'sailcalc-tbar',
items: [
'Sailor weight:',
{
xtype: 'textfield',
width: 30,
id: 'sailcalc-weight'
},
'pounds',
'-',
{
text: 'Update',
id: 'sailcalc-update',
scope: this,
handler: function()
{
console.log('click');
}
}
]
}),
items: [
{
xtype: 'tabpanel',
border: false,
activeItem: 0,
items: [
{
title: 'Grids',
items: [
{
border: false,
layout: 'column',
items: [
{
columnWidth: .33,
height: 320,
xtype: 'grid',
title: 'Sail Size by Wind Speed',
id: 'sailsize-grid',
store: sailsize_store,
columns: [
{header: 'Kts', dataIndex: 'kts', sortable: false, width: 40, menuDisabled: true},
{header: 'Mph', dataIndex: 'mph', sortable: false, width: 40, menuDisabled: true},
{header: 'Kph', dataIndex: 'kph', sortable: false, width: 40, menuDisabled: true},
{header: 'Sail Size (m<sup>2</sup>)', dataIndex: 'sail', sortable: false, width: 74, menuDisabled: true}
]
},
{
columnWidth: .33,
height: 320,
xtype: 'grid',
title: 'Wind Speed by Sail Size',
id: 'windspeed-grid',
store: sailsize_store,
columns: [
{header: 'Sail Size (m<sup>2</sup>)', dataIndex: 'sail', sortable: false, width: 74, menuDisabled: true},
{header: 'Kts', dataIndex: 'kts', sortable: false, width: 40, menuDisabled: true},
{header: 'Mph', dataIndex: 'mph', sortable: false, width: 40, menuDisabled: true},
{header: 'Kph', dataIndex: 'kph', sortable: false, width: 40, menuDisabled: true}
]
},
{
columnWidth: .34,
height: 320,
xtype: 'grid',
title: 'Beginner Sail Size',
id: 'beginner-grid',
store: beginner_store,
columns: [
{header: 'Kts', dataIndex: 'kts', sortable: false, width: 40, menuDisabled: true},
{header: 'Mph', dataIndex: 'mph', sortable: false, width: 40, menuDisabled: true},
{header: 'Kph', dataIndex: 'kph', sortable: false, width: 40, menuDisabled: true},
{header: 'Sail Size (m<sup>2</sup>)', dataIndex: 'sail', sortable: false, width: 74, menuDisabled: true}
]
}
]
}
]
},
{
title: 'Chart'
}
]
}
],
listeners: {
'render': function(p)
{
var nav = new Ext.KeyNav('sailcalc-tbar', {'enter': Ext.getCmp('sailcalc-update').handler, scope: this});
},
scope: this
}
});
}
});
}();

Animal
30 Jul 2009, 11:54 PM
First, create 3 GridPanels. Put them in vars grid1, grid2, grid3.

Then it's this simple:



{
xtype: 'tabpanel',
items: [{
xtype: 'container',
title: 'Grids',
layoutConfig: {
type: 'hbox',
align: 'stretch'
},
items: [ grid1, grid2, grid3 ]
}
}

OutpostMM
31 Jul 2009, 7:18 AM
Thanks. Just to be clear, the solution is to use an hbox layout with stretch, right, it shouldn't make any difference whether they're declared as variables or inline, correct?

I'll check out the hbox, I haven't played with it yet. Out of curiosity though, shouldn't this work with a 3-column layout? I'll understand if the hbox works, but I don't see anything in my code that should cause the behavior I'm seeing.

Animal
31 Jul 2009, 12:48 PM
Column layout does not set the height of the column Components.

hbox using align: stretch does.

OutpostMM
31 Jul 2009, 3:10 PM
layoutConfig: {
That should just be layout instead of layoutConfig, right?


Column layout does not set the height of the column Components.
Right, but I'm explicitly setting the heights on the grids. It did size one of them correctly in Firefox, but not all 3. It sized all 3 correctly in IE8 and Opera, but not in Chrome either.

Animal
31 Jul 2009, 3:19 PM
No, it should be layoutConfig.

You need the child items sized to the height of the Container. Then they will scroll in that height if they overflow. You shuold not control the height.

OutpostMM
31 Jul 2009, 4:25 PM
Hmm.. with layoutConfig it stacks the boxes vertically and doesn't set the height, but it seems to work correctly with just layout.

mjlecomte
31 Jul 2009, 5:54 PM
Hmm.. with layoutConfig it stacks the boxes vertically and doesn't set the height, but it seems to work correctly with just layout.
Yeah, it should have just been layout the way it was being used:


{
xtype: 'tabpanel',
items: [{
xtype: 'container',
title: 'Grids',
layoutConfig: {
type: 'hbox',
align: 'stretch'
},
items: [ grid1, grid2, grid3 ]
}
}

Animal
1 Aug 2009, 12:20 AM
Ouch! That's right. This has become a little confusing since the layout config processing was enhanced to double as a layout config object when you add e type property to it!

I think they should bth be processed identically as synonyms.

So if layoutConfig container type, it specifies the layout type.