ExtJS form表单常用元素操作

Ext.onReady(function() {
Ext.apply(Ext.form.VTypes, {
dateRange : function(val, field) {
var beginDate = null;
var endDate = null;
if (field.dateRange) {
var beginId = field.dateRange.begin;
this.beginField = Ext.getCmp(beginId);
var endId = field.dateRange.end;
this.endField = Ext.getCmp(endId);
beginDate = this.beginField.getValue();
endDate = this.endField.getValue();
}
if (beginDate <= endDate) {
return true;
} else {
return false;
}
},
dateRangeText : '开始日期不能大于结束日期'
});
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
var form = new Ext.form.Panel({
title : '表单控件',
labelSeparator : ':',
labelWidth : 70,
bodyStyle : 'padding:5 5 5 5',
// frame : true,
autoHeight : true,
renderTo : 'form',
items : [new Ext.form.TextField({// 数据正确性校验vtype
fieldLabel : '电子邮件',
width : 320,
vtype : 'email'
}), new Ext.form.TextField({
fieldLabel : '网址',
width : 320,
vtype : 'url'
}), new Ext.form.TextField({
fieldLabel : '字母',
width : 320,
vtype : 'alpha'
}), new Ext.form.TextField({
fieldLabel : '字母和数字',
width : 320,
vtype : 'alphanum'
}), new Ext.form.Hidden({// 隐藏域
id : 'userId',
name : 'userId',
fieldLabel : '用户编号'
}), new Ext.form.TextField({// 文本域
id : 'userName',
name : 'userName',
fieldLabel : '姓名'
}), {
xtype : 'panel',
layout : 'column',
border : false,
width : 300,
defaults : {
border : false,
// frame : true,
layout : 'form',
columnWidth : 0.5
// 列宽,小于0.5两个选择框间隔就很小，大于0.5就会排成两列
},
items : [{
labelSeparator : ':',
items : {
xtype : 'radio',
name : 'sex',
fieldLabel : '性别',
boxLabel : '男'
}
}, {
items : {
xtype : 'radio',
name : 'sex',
hideLabel : true,
boxLabel : '女'
}
}]
}, {
xtype : 'panel',
layout : 'column',
border : false,
width : 450,
defaults : {
border : false,
// frame : true,
layout : 'form',
columnWidth : .33,
width : 110
},
items : [{
labelSeparator : ':',
items : {
xtype : 'checkbox',
name : 'walk',
fieldLabel : '爱好',
boxLabel : '散步'
}
}, {
items : {
xtype : 'checkbox',
name : 'swim',
hideLabel : true,
boxLabel : '游泳'
}
}, {
items : {
xtype : 'checkbox',
name : 'learnling ExtJS',
hideLabel : true,
boxLabel : '学习'
}
}]


}, new Ext.form.TimeField({// 时间选择器
id : 'time',
width : 220,
// maxValue : '18:00',
maxText : '所选时间应小于{0}',
// minValue : '10:00',
minText : '所选时间应大于{0}',
maxHeight : 70,
increment : 10,// 每次增加10分钟
format : 'a h:i:s',
invalidText : '时间格式无效',
fieldLabel : '时间选择框'


}), new Ext.form.DateField({// 日期选择器
id : 'date',
width : 220,
disabledDates : ["2014年12月30日",
"2014年12月29日"],
disabledDatesText : '禁止选择该日期',
disabledDays : ['0', 6],// 禁止选择的星期几
// 0：星期日
// 6：星期六
disabledDaysText : '周末不上班',
format : 'Y年m月d日',
fieldLabel : '日期选择框'
}), new Ext.form.ComboBox({// 下拉框
name : 'level',
fieldLabel : '职称等级',
lazyRender : true,
triggerAction : 'all',
transform : 'levelName'
}), new Ext.form.FieldSet({// 字段集
title : '产品信息',
labelSeparator : ':',
width : 500,
items : [new Ext.form.TextField({
fieldLabel : '产地'
}),
new Ext.form.NumberField({
fieldLabel : '销售'
})]
}), new Ext.form.FieldSet({
title : '产品描述',
width : 500,
checkboxToggle : true,// 选择是否显示文本域
checkboxName : 'description',
labelSeparator : ':',
items : [new Ext.form.TextArea({
fieldLabel : '简介',
width : 400
})]
}), new Ext.form.DateField({
id : 'beginDate',
format : 'Y年m月d日',
width : 350,
allowBlank : false,
readOnly : false,
value : new Date(),
fieldLabel : '日期控件开始',
dateRange : {
begin : 'beginDate',
end : 'endDate'
},
vtype : 'dateRange'
}), new Ext.form.DateField({
id : 'endDate',
format : 'Y年m月d日',
width : 350,
allowBlank : false,
readOnly : false,
value : new Date(),
fieldLabel : '日期控件结束',
dateRange : {
begin : 'beginDate',
end : 'endDate'
},
vtype : 'dateRange'
}), new Ext.form.HtmlEditor({// HTML编辑器
name : 'htmlContent',
autoHeight : false,
height : 150,
width : 720,
fieldLabel : 'HTML字段',
createLinkText : '创建超链接',
defaultLinkValue : 'http://www.',
enableAlignments : true,
enableColors : true,
enableFont : true,
enableFontSize : true,
enableFormat : true,
enableLinks : true,
enableLists : true,
enableSourceEdit : true,
fontFamilies : ['宋体', '隶书', '黑体']
})],
buttons : [new Ext.Button({
text : '提交',
handler : function() {
if (form.form.isValid()) {
Ext.Msg.alert('提示', '验证通过提交表单');
}
}
})]
});
});