当前位置: 代码迷 >> Web前端 >> Ext开发2-ext3.0多行多列表单
  详细解决方案

Ext开发2-ext3.0多行多列表单

热度:682   发布时间:2013-11-15 22:28:15.0
Ext开发二------ext3.0多行多列表单。
1.前言。
   多行多列表单写法需要注意不能多一个或者少一个"]"和"{"符号,否则则有可能显示不了多
列,所有代码请看2。
2.代码

Ext.onReady(function(){
	 var top = new Ext.FormPanel({
	        //labelAlign: 'top',
            labelAlign:'left',
	        frame:true,
	        bodyStyle:'padding:5px 5px 0',
	        width: 1200,
	        items: [{
	            layout:'column',
	          items:[{
	                columnWidth:.2,
	                layout: 'form',
	                items: [{
	                    xtype:'textfield',
	                    fieldLabel: 'aaa1:',
	                    name: 'first',
	                    anchor:'95%'
	                }, {
	                    xtype:'textfield',
	                    fieldLabel: 'aaa2',
	                    name: 'company',
	                    anchor:'95%'
	                },{
	                    xtype:'textfield',
	                    fieldLabel: 'aaa3',
	                    name: 'company2',
	                    anchor:'95%'
	                }
	                ]
	            },{
	                columnWidth:.2,
	                layout: 'form',
	                items: [{
	                    xtype:'textfield',
	                    fieldLabel: 'aaa4',
	                    name: 'last',
	                    anchor:'95%'
	                },{
	                    xtype:'textfield',
	                    fieldLabel: 'aaa5',
	                    name: 'email',
	                    vtype:'email',
	                    anchor:'95%'
	                },{
	                    xtype:'textfield',
	                    fieldLabel: 'aaa6',
	                    name: 'company3',
	                    anchor:'95%'
	                }]
	            },{
                columnWidth:.2,
                layout: 'form',    
	        	
	        	items: [{
	                    xtype:'textfield',
	                    fieldLabel: 'aaa7',
	                    name: 'last11',
	                    anchor:'95%'
	                },{
	                    xtype:'textfield',
	                    fieldLabel: 'aaa8',
	                    name: 'email11',
	                    vtype:'email',
	                    anchor:'95%'
	                },{
	                    xtype:'textfield',
	                    fieldLabel: 'aaa9',
	                    name: 'company311',
	                    anchor:'95%'
	                }]
	        }
	        
	        ]
	        }]
	    })
	    top.render(document.body);
})