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"）;
}）;