PDA

View Full Version : Column layout issue on IE7



robertoroberto
2 Jun 2009, 7:08 AM
Hi
I don't know if this is a bug or a mistake in my code.
But on IE7 I cannot display a column layout. It seems to be ignored, instead on FF works fine.

I try to looking for some other issue about it but I haven't found nothing (this doesn't means that doesn't exists)



<html dir=''>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<link rel="stylesheet" type="text/css" href="lib/extjs/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="lib/css/main.css" />
<link rel="stylesheet" type="text/css" href="lib/css/icons.css" />
<link rel="stylesheet" type="text/css" href="lib/css/hacks.css" />
<script type="text/javascript" src="lib/extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="lib/extjs/ext-all.js"></script>
<script>
var iC1F1 = new Ext.form.TextField({
name: "c1f1",
fieldLabel: "c1f1"
});
var iC1F2 = new Ext.form.TextField({
name: "c1f2",
fieldLabel: "c1f2"
});
var iColumn1 = new Ext.Container({
layout: 'form',
name: "c1",
title: "column 1",
items: [iC1F1, iC1F2],
autoWidth: true,
autoHeight: true,
autoScroll: true
});
var iC2F1 = new Ext.form.TextField({
name: "c2f1",
fieldLabel: "c2f1"
});
var iColumn2 = new Ext.Container({
layout: 'form',
name: "c2",
title: "column 2",
items: [iC2F1],
autoWidth: true,
autoHeight: true,
autoScroll: true
});
Ext.onReady(function() {
Ext.QuickTips.init();
var vItems = new Array();
vItems.push(iColumn1);
vItems.push(iColumn2);
var p2 = new Ext.Panel({
layout: 'column',
bodyStyle: 'padding:5px;margin-bottom:10px;',
renderTo: document.body,
items: vItems
});
})
</script>
</head>
</body>
</html>


Get screenshot about IE7 and FF results.

Any idea?
Thanks

Animal
2 Jun 2009, 7:18 AM
The p2 Panel does not have a configured size in which to arange two columns.

You should use an Ext.Viewport configured with layuot: 'column'

http://extjs.com/deploy/ext-3.0-rc1.1/docs/?class=Ext.Viewport

Animal
2 Jun 2009, 7:19 AM
And anyway, in a column layout, youi need to specify either width, or columnWidth

http://extjs.com/deploy/ext-3.0-rc1.1/docs/?class=Ext.layout.ColumnLayout

normanhab101
2 Jun 2009, 7:50 AM
I've got the SAME problem with IE8, this is the code:



var fm = Ext.form;

var date1 = new fm.DateField({
xtype:'datefield',
fieldLabel: 'Date',
name: 'date',
format:'d/m/Y'
});

var text1 = new fm.TextField({
fieldLabel: 'Text 1',
name:'text1'
});

var text2 = new fm.TextField({
fieldLabel: 'Text 2',
name:'text2'
});

var FrmRem = new Ext.FormPanel({
url: 'some.php',
bodyStyle:'padding:5px',
width: 800,
border: false,
hideLabels: false,
items: [{
layout:'column',
border:false,
items:[{
columnWidth:.3,
layout: 'form',
border:false,
items: [date1]
},{
columnWidth:.4,
layout: 'form',
border:false,
items: [text1]
},{
columnWidth:.3,
layout: 'form',
border:false,
items: [text2]
}]
}]
});

Animal
2 Jun 2009, 7:55 AM
Why EMBED your column layout Panel inside that FormPanel?

There's your problem right there. You overnested, and so the column layout Panel never gets sized.

normanhab101
2 Jun 2009, 8:01 AM
my bad (:|

tnx animal ! worked fine ! =D>

robertoroberto
3 Jun 2009, 12:39 AM
I need to embed in a FormPanel because I MUST submit the field value to the backend....
Otherwise... how can I submit them together with all other fields?


Thanks

Animal
3 Jun 2009, 12:51 AM
OK, you lost me now, I don't see a FormPanel in your code.

robertoroberto
3 Jun 2009, 4:24 AM
I'm sorry Animal. Maybe I haven0t understand you sentence in reply to the normanhab101 post


Why EMBED your column layout Panel inside that FormPanel?

Normam define a FormPanel and put insed a column layout




..
var FrmRem = new Ext.FormPanel({
url: 'some.php',
bodyStyle:'padding:5px',
width: 800,
border: false,
hideLabels: false,
items: [{
layout:'column',
..

Animal
3 Jun 2009, 5:26 AM
Yes, that was to him, and he unwrapped it and it worked.

Animal
3 Jun 2009, 5:27 AM
A perfect example of why people shuldn't hijack threads.

Sachin!