Ext学习_FormPanel布局2

Ext.onReady(function(){
	var form = new Ext.form.FormPanel({
		title: "灵活布局的表单",
		width: 650,
		autoHeight: true,
		frame: true,
		renderTo: "a",
		layout: "form", //整个大的表单是form布局
		labelWidth: 65,
		labelAlign: "left",
		items: [
		 {//行1
			 layout: "column", //从左往右的布局
			 items:[
			        {
			        	columnWidth: .3, //占该行的30%
			        	layout: "form", //从上往下的布局
			        	items: [
			        	  {
			        		  xtype: "textfield",
			        		  fieldLabel: "姓",
			        		  width: 120
			        	  }
			        	]
			        	
			        },{
			        	columnWidth: .3,
			        	layout: "form",
//			        	labelWidth: 30,
			        	items: [
			        	   {
			        		   xtype: "textfield",
			        		   fieldLabel: "名",
			        		   labelStyle: 'text-align: right;',
			        		   width: 120
			        	   }
			        	]
			        },{
			        	columnWidth: .4,
			        	layout: "form",
			        	style: "text-align: right",
			        	items: [
			              {
			            	  xtype: "textfield",
			            	  fieldLabel: "英文名",
			            	  labelStyle: "text-align: right",
			            	  width: 180
			              }
			            ]
			        }
			 ]
		 },{
			 //行2
			 layout: "column",
			 items: [
			    {
			    	columnWidth: .5,
			    	layout: "form",
			    	items: [
			    	 {
			    		 xtype: "textfield",
			    		 fieldLabel: "座右铭1",
			    		 width: 220
			    	 }
			    	]
			    },{
			    	columnWidth: .5,
			    	layout: "form",
			    	style: "text-align: right", //右对齐
			    	items: [
			    	 {
			    		 xtype: "textfield",
			    		 fieldLabel: "座右铭2",
			    		 labelStyle: "text-align: right",
			    		 width: 220
			    	 }
			    	]
			    }
			]
		 },