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');
	    });

效果图:

原文地址:https://www.cnblogs.com/guarder/p/3472037.html