Ext 表单布局实例代码

Ext.onReady(function(){ 
Ext.QuickTips.init(); 
//第一句的目的是为需要的元件提供提示信息功能，form的主要提示信息就是客户端验证的错误信息了。 
Ext.form.Field.prototype.msgTarget = 'under'; 
//第二句的目的就是设置控件的错误信息显示位置，主要可选的位置有： 
var tdate = new Ext.form.DateField({ 
fieldLabel: '日期', 
emptyText: '请选择日期', 
format: 'Y-m-d', 
disabledDays: [0, 7] 
}); 
var txt = new Ext.form.TextField({ 
fieldLabel: '请输入姓名', 
allowBlank: false, 
emptyText: '空', 
maxLength: 50, 
minLength: 10, 
bodyStyle: 'padding-left:5px', 
anchor: '90%'//给错误提示留下10的空间, 
}); 
var htmlEdt=new Ext.form.HtmlEditor({ 
fieldLabel:'在线编辑器', 
enableAlignments:true, 
enableColors:true, 
enableFont:true, 
enableFontSize:true, 
enableFormat:true, 
enableLinks:true, 
enableLists:true, 
enableSourceEdit:true 
}); 
var txt2 = new Ext.form.TextField({ 
fieldLabel: '请输入姓名', 
allowBlank: false, 
emptyText: '空', 
maxLength: 50, 
minLength: 10, 
bodyStyle: 'padding-left:5px', 
anchor: '90%' 
//给错误提示留下10的空间 
}); 
var frm1 = new Ext.form.FormPanel({ 
labelAlign: 'right', 
labelWidth: 100,//注意修改标题的宽度 
title: 'form1', 
frame: true, 
width: 700, 
url: 'sender/data.aspx', 
items: [{ 
layout: 'column',//正点的地方来了表示下一曾items都是按列"Column"排序 
items: [{ 
columnWidth: .5, 
layout: 'form',//第一列里面内容就是form排序了,从上到下 
items: [txt2] 
}, 
{ 
columnWidth: .5, 
layout: 'form',//第二列里面内容就是form排序了,从上到下 
items: [txt, tdate] 
}] 
}, htmlEdt] 
}); 
frm1.render("frm"); 
});