PDA

View Full Version : [4.0.x][BUG]Incorrect component width calculation in table layout



kyrandia
18 May 2011, 8:26 PM
[ExtJS 4.0.x]

In my test code, I created a form panel with table layout and 2 columns. Four components were placed as the following figure.


+---+---+
| A | B |
+---+---+
| C | D |
+---+---+
A: textfield;
B: textfield;
C: radiogroup with two items;
D: fieldcontainer with two items.

No problem on component A and B. Component C and D showed their field label, but their component parts didn't show up. By checking them with Firebug, I found the width was incorrect. In addition, if I wrapped C/D with an anchor container, there wouldn't be such a problem.

Test code:



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test Page</title>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<script type="text/javascript" src="ext/ext-all-debug.js"></script>
<script type="text/javascript">
function apply_anchor_container(item, ctProp)
{
return item; // comment out this line to use an anchor container
var ct = {
xtype: "container",
layout: 'anchor',
defaults: {
anchor: '100%'
},
items: []
};
if (ctProp) {
Ext.apply(ct, ctProp);
}
ct.items.push(item);

return ct;
}
var my_form = {
xtype: 'form',
title: 'My Form',
layout: {
type: 'table',
columns: 2
},
items: [{
xtype: 'textfield',
fieldLabel: 'test1'
}, {
xtype: 'textfield',
fieldLabel: 'test2'
}, apply_anchor_container({
xtype: 'radiogroup',
fieldLabel: 'Test RadioGroup',
items: [
{boxLabel: 'Item 1', name: 'rb', inputValue: '1'},
{boxLabel: 'Item 2', name: 'rb', inputValue: '2', checked: true},
]
}), apply_anchor_container({
xtype: 'fieldcontainer',
fieldLabel: 'Test FieldContainer',
layout: 'hbox',
items: [{
xtype: 'datefield',
value: new Date(),
flex: 1
}, {
xtype: 'label',
html: '&nbsp - &nbsp'
}, {
xtype: 'datefield',
value: new Date(),
flex: 1
}]
})]
};
Ext.onReady(function () {
my_form.renderTo = Ext.getBody();
Ext.create('Ext.form.Panel', my_form);
});
</script>
</head>
<body>
</body>
</html>