[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.
Code:
 
+---+---+
| 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:

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>