zoukankan      html  css  js  c++  java
  • 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');
    	    });

    效果图:

  • 相关阅读:
    被下属骂,记一次矛盾升级——有心无心,蝴蝶效应?
    技术管理进阶——团队合并、解散怎么办?
    “技术转产品”比产品更恶心的几个点
    javaScript系列 [43]TS、Class and ES5
    javaScript系列 [42]node中 require函数的加载过程
    javaScript系列 [52]模板引擎的实现逻辑
    Base64简单介绍
    异或运算(XOR)
    javaScript系列 [51]Rollup 打包器
    javaScript系列 [49] ast && render
  • 原文地址:https://www.cnblogs.com/guarder/p/3472037.html
Copyright © 2011-2022 走看看