Ext的TabPanel切换界面显示问题

TabPane定义了“测试1”和“测试2”，默认显示第一个是“测试1”。 从“测试1”切换到“测试2”，发现“测试2”里面的布局错位，一个本该是combox的没显示出来。

代码如下： 

Ext.onReady(function(){
            Ext.QuickTips.init();        
                    
            var itemTab = new Ext.TabPanel({
                activeTab:0,
                frame:true,
                border:false,
                plain:true,
                deferredRender:false,
                autoHeight:true,
                items: 
                [{
                    xtype:'form',
                    title: '测试1',                
                    id:'itemForm1',
                    autoHeight:true,
                    name:'itemForm1'
                },{
                    xtype:'form',
                    title: '测试2',
                    id:'itemForm2',
                    autoHeight:true,
                    name:'itemForm2'
                }]              
            });
            
            var item2 = new Ext.form.FormPanel({
                frame:true,
                buttonAlign :'center',
                labelAlign :'right',
                items: 
                [{
                    layout:'column',
                    items:[{
                        columnWidth:.5,
                        layout: 'form',
                        items: [                
                            {                            
                                xtype:'textfield',
                                fieldLabel: "<font color='red'>*</font>测试21",
                                id:'test21',
                                name: 'test21',
                                width :100                                                                       
                            },
                            {
                                xtype : 'compositefield',
                                fieldLabel: '测试22',
                                items : 
                                [{
                                              100,
                                    xtype:          'combo',
                                    mode:           'local',
                                    triggerAction : 'all',
                                    forceSelection: true,
                                    editable:       false,
                                    name:           'test22',
                                    value:          '是',
                                    displayField:   'name',
                                    valueField:     'value',
                                    store:new Ext.data.JsonStore({
                                        fields : ['name', 'value'],
                                        data   : [
                                            {name : '是',  value: '是'},
                                            {name : '否',  value: '否'}
                                        ]
                                    })
                                }]
                            } 
                        ]
                    },{
                        columnWidth:.5,
                        layout: 'form',
                        items: [
                            {
                                xtype:'textfield',
                                fieldLabel: "<font color='red'>*</font>测试23",
                                id:'test23',
                                name: 'test23',
                                width :100                              
                            },
                            {
                                xtype:'textfield',
                                fieldLabel: "<font color='red'>*</font>测试24",
                                id:'test24',
                                name: 'test24',
                                width :100                            
                            }
                        ]
                    }]
                 }]
            });
            
            var item1 = new Ext.form.FormPanel({
                frame:true,
                buttonAlign :'center',
                labelAlign :'right',
                items: 
                [{
                    layout:'column',
                    items:[{
                        columnWidth:.5,
                        layout: 'form',
                        items: [                        
                            {
                                xtype:'textfield',
                                fieldLabel: "<font color='red'>*</font>测试11",
                                id:'test11',
                                name: 'test11',
                                width :100
                            },
                            {
                                xtype : 'compositefield',
                                fieldLabel: '测试22',
                                items : 
                                [{
                                              100,
                                    xtype:          'combo',
                                    mode:           'local',
                                    triggerAction : 'all',
                                    forceSelection: true,
                                    editable:       false,
                                    name:           'test12',
                                    value:          '是',
                                    displayField:   'name',
                                    valueField:     'value',
                                    store:new Ext.data.JsonStore({
                                        fields : ['name', 'value'],
                                        data   : [
                                            {name : '是',  value: '是'},
                                            {name : '否',  value: '否'}
                                        ]
                                    })
                                }]
                            }
                        ]
                    },{
                        columnWidth:.5,
                        layout: 'form',
                        items: [
                            {
                                xtype:'textfield',
                                fieldLabel: "<font color='red'>*</font>测试13",
                                id:'test13',
                                name: 'test13',
                                width :100
                            },                     
                             {xtype:'textfield',
                                fieldLabel: "<font color='red'>*</font>测试14",
                                id:'test14',
                                name: 'test14',
                                width :100
                            }
                        ]
                    }]
                 }]
            });       
            itemTab.render('item_tab');
            item1.render('itemForm1');
            item2.render('itemForm2');
        });

改变下写法：

        Ext.onReady(function(){
            Ext.QuickTips.init();        
            
            var item2 = new Ext.form.FormPanel({
                frame:true,
                buttonAlign :'center',
                labelAlign :'right',
                items: 
                [{
                    layout:'column',
                    items:[{
                        columnWidth:.5,
                        layout: 'form',
                        items: [                
                            {                            
                                xtype:'textfield',
                                fieldLabel: "<font color='red'>*</font>测试21",
                                id:'test21',
                                name: 'test21',
                                width :100                                                                       
                            },
                            {
                                xtype : 'compositefield',
                                fieldLabel: '测试22',
                                items : 
                                [{
                                              100,
                                    xtype:          'combo',
                                    mode:           'local',
                                    triggerAction : 'all',
                                    forceSelection: true,
                                    editable:       false,
                                    name:           'test22',
                                    value:          '是',
                                    displayField:   'name',
                                    valueField:     'value',
                                    store:new Ext.data.JsonStore({
                                        fields : ['name', 'value'],
                                        data   : [
                                            {name : '是',  value: '是'},
                                            {name : '否',  value: '否'}
                                        ]
                                    })
                                }]
                            } 
                        ]
                    },{
                        columnWidth:.5,
                        layout: 'form',
                        items: [
                            {
                                xtype:'textfield',
                                fieldLabel: "<font color='red'>*</font>测试23",
                                id:'test23',
                                name: 'test23',
                                width :100                              
                            },
                            {
                                xtype:'textfield',
                                fieldLabel: "<font color='red'>*</font>测试24",
                                id:'test24',
                                name: 'test24',
                                width :100                            
                            }
                        ]
                    }]
                 }]
            });
            
            var item1 = new Ext.form.FormPanel({
                frame:true,
                buttonAlign :'center',
                labelAlign :'right',
                items: 
                [{
                    layout:'column',
                    items:[{
                        columnWidth:.5,
                        layout: 'form',
                        items: [                        
                            {
                                xtype:'textfield',
                                fieldLabel: "<font color='red'>*</font>测试11",
                                id:'test11',
                                name: 'test11',
                                width :100
                            },
                            {
                                xtype : 'compositefield',
                                fieldLabel: '测试22',
                                items : 
                                [{
                                              100,
                                    xtype:          'combo',
                                    mode:           'local',
                                    triggerAction : 'all',
                                    forceSelection: true,
                                    editable:       false,
                                    name:           'test12',
                                    value:          '是',
                                    displayField:   'name',
                                    valueField:     'value',
                                    store:new Ext.data.JsonStore({
                                        fields : ['name', 'value'],
                                        data   : [
                                            {name : '是',  value: '是'},
                                            {name : '否',  value: '否'}
                                        ]
                                    })
                                }]
                            }
                        ]
                    },{
                        columnWidth:.5,
                        layout: 'form',
                        items: [
                            {
                                xtype:'textfield',
                                fieldLabel: "<font color='red'>*</font>测试13",
                                id:'test13',
                                name: 'test13',
                                width :100
                            },                     
                             {xtype:'textfield',
                                fieldLabel: "<font color='red'>*</font>测试14",
                                id:'test14',
                                name: 'test14',
                                width :100
                            }
                        ]
                    }]
                 }]
            });       
            
            var itemTab = new Ext.TabPanel({
                activeTab:0,
                frame:true,
                border:false,
                plain:true,
                deferredRender:false,
                autoHeight:true,
                layoutOnTabChange:true,
                items: 
                [{
                    title: '测试1',                
                    items:[item1]
                },{
                    title: '测试2',
                    items:[item2]
                }]              
            });
            
            itemTab.render('item_tab');
        });

效果图：

更多