Ext中column的layout

首先需要知道xtype:'hidden'是不影响布局的。其次，defaults: {anchor : "100%"}是定义默认标尺。

column是按列布局的。每个被包裹的item都会排在一列。注意，对于columnWidth:.5,，所有columnWidth加起来要为1.

如下代码：

var xmform =new Ext.FormPanel({
			id:'xmform',
			datefields:['projectBegin','projectDeadline'],
			bodyStyle:'padding:5px 5px 5px 5px;',
			labelWidth: 90,
			width:230,
			height:document.body.clientHeight,
			height:400,
			frame : true,
			autoScroll: true,
			border:false,
			defaults: {anchor : "100%"},
			items : [
						{
							layout:'form',
							columnWidth:.5,
							xtype : 'hidden',
							fieldLabel : '项目编号',
							name : "id",
							allowBlank : false,
							blankText : '项目编号不能为空',
							maxLength : 50,
							id : "id",
							width : 200
						},
						{					
							xtype:'hidden',
							fieldLabel : '客户编号',
							name : "customerNo",
							id : "customerNo",
							allowBlank : false,
							width : 200
						}, 
						{	
						   	layout:'column',
							border:false,
							items:[{
								layout:'form',
								columnWidth:.5,
								border:false,
								items:[
								{
									xtype : 'textfield',
									fieldLabel : '项目名称',
									name : "projectName",
									id : "projectName",
									allowBlank : false,
									blankText : '项目名称不能为空',
									maxLength : 10,
									width : 200
								},
								{
									xtype:'datefield',
									fieldLabel:'开始日期',
									width:200,
									format:'Y-m-d',
									id:'projectBegin',
									name:'projectBegin',
									blankText:'项目开始日期',
									listeners:{
									render:function(r){
										r.setValue(new Date())
									 }
								    },
								    vtype: 'daterange',
					     			endDateField: 'projectDeadline'
							    }],		
							},	
							{
							layout:'form',
							columnWidth:.5,
							border:false,
							items:[
								{
									xtype : 'choosefield',
									fieldLabel : '客户姓名',
									name : "customerName",
									editable:false,
									id : "customerName",
									emptyText:'请选择客户',
									width : 200,
									allowBlank : false,
									windowid:'edit_forms',                 
									gridid:"gridPanels",                   
									formid:"xmform",                   
									columns:{"customerName":"customerName","id":"customerNo"},
									blankText : '客户姓名不能为空',
									maxLength : 10					
								},
								{
									xtype:'datefield',
									fieldLabel:'项目期限',
									width:200,
									format:'Y-m-d',
									id:'projectDeadline',
									name:'projectDeadline',
									blankText:'项目期限',
									vtype: 'daterange',
								    startDateField: 'projectBegin'
								},
							],
							
						 }]	
						}
						,
					    {
							name:'status',
							width:200,
							xtype:'combo',
							fieldLabel:'项目状态',
							store:status,
							displayField :'status',
							mode:'local',
							editable:false,
							valueField:'status',
							triggerAction:'all',
							listeners:{
							render:function(r){
								r.setValue('未完成')
							}
						  }
				        },
						{
							xtype : 'htmleditor',
							fieldLabel : '备注',
							name : "memo",
							id : "memo",
							width : 550,
							height : 200
						}]
	});	

效果如图：

另外，今天是程序员日。祝福所有程序员