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

    效果图:

  • 相关阅读:
    UOJ Contest #50: Goodbye Jihai
    Codeforces 1278F: Cards
    RS-485总线和Modbus通信协议的关系
    基于Lwip协议栈中独立模式下回调函数的使用
    C语言之链表的使用
    LAN8720A网络模块的使用问题
    C语言的多行宏定义
    C# 解决ListView控件显示数据出现闪屏的问题
    解决使用SecureCRT不能连接Ubuntu的问题
    C++ 与C# 对应的变量互转
  • 原文地址:https://www.cnblogs.com/guarder/p/3472037.html
Copyright © 2020-2023  润新知