extjs表单
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = '../ext/resources/images/default/s.gif';
Ext.QuickTips.init();//显示错误提示字符做准备
//准备下拉框的数据
var mydata = new Ext.data.SimpleStore({
fields:['id','myda'], //指定数组中数据格式
data:[['1','语文'],['2','数学'],['3','物理']]
});
var mydata2 = new Ext.data.SimpleStore({
fields:['id','myda'],
data:[
['0','zhangsan'],
['1','lisi'],
['2','wangwu'],
['3','zhaoliu']
]
});
var myForm = new Ext.form.FormPanel({
url:'1.html', //表单提交地址
renderTo:Ext.get("id1"), //显示位置
//renderTo:document.body,
frame:true, //自定义边框
title:"表单",
width:300,
items:[
{
xtype:'textfield',
fieldLabel:'用户名',
width:150,
allowBlank:false,//非空校验
name:'username',
//添加事件
listeners:{
specialkey:function(f,e){
if(e.getKey() == e.ENTER) {
Ext.Msg.alert("提交","太极");
myForm.getForm().submit();
}
}
}
},
{
xtype:'textfield',
fieldLabel:'邮箱',
width:150,
vtype:'email',//vtype是提供的内部校验
name:'email'
},
{
xtype:'datefield',
fieldLabel:'日期',
width:150,
disabledDays:[1,2,3,4,5],//禁止输入星期一到星期五，0代表星期天
name:'bay'
},
{
xtype:'textfield',
fieldLabel:'测试一',
width:150,
vtype:'name',
name:'text1'
},
//单选框
{
xtype:'radio',
fieldLabel:'性别',
name:'sex',
boxLabel:'男'
},
{
xtype:'radio',
hideLabel:false,
name:'sex',
boxLabel:'女',
labelSeparator:''
},
//复选框
{
xtype:'checkbox',
fieldLabel:'爱好',
name:'hate',
boxLabel:'唱歌'
},
{
xtype:'checkbox',
hideLabel:false,
name:'hate',
boxLabel:'跳舞',
labelSeparator:''
},
{
xtype:'checkbox',
hideLabel:false, //只显示在右侧
name:'hate',
boxLabel:'爬山',
labelSeparator:''
},
//下拉框
{
xtype:'combo',
name:'class',
fieldLabel:'科目',
mode:'local', //数据来自本地还是远程
store:mydata,//数据来源
displayField:'myda',//显示内容
width:150
},
//文本框
{
xtype:'textarea',
name:'des',
hideLabel:true, //左右都显示
labelSeparator:'',
height:100,
anchor:'100%' //全屏显示
},
//编辑框
{
xtype:'htmleditor',
name:'des',
hideLabel:true,
labelSeparator:'',
height:100,
anchor:'100%'
},
{
xtype:'combo',
name:'name',
fieldLabel:'姓名',
mode:'local',
store:mydata2,
displayField:'myda',
width:130,
listeners:{
select:function(f,r,i) {
//选中id==1时
if(i == 1 ){
Ext.Msg.prompt('提示','姓名',Ext.emptyFn());
}
},
expand:function(f,r,i) {
Ext.Msg.alert('提示','你展开了下拉框');
}
}
}
],
//提交表单
buttons:[
{
text:'提交',
handler:function(){
myForm.getForm().submit({
success:function(f,a){//f为表单对象，a为action对象
Ext.Msg.alert('提示','提交成功');
},
failure:function(f,a) {
//Ext.Msg.alert('提示','提交失败');
if(a.failureType == Ext.form.Action.CONNECT_FAILURE){
Ext.Msg.alert('提示','a=' + a.response.status +'a='+a.response.statusText);
}
if(a.failureType == Ext.form.Action.SERVER_INVALID) {
Ext.Msg.alert('提示',a.result.errormsg);
}
}
});
}
},
{
text:'重置',
handler:function(){
myForm.getForm().reset();
}
}
]
});
//自定义校验，/^[A-Z][A-Za-z\-]+[A-Z][A-Za-z\-]+$/
Ext.form.VTypes['nameVal'] = /^[A-Z][A-Za-z\-]+[A-Z][A-Za-z\-]+$/; //校验所需要的正则表达式
Ext.form.VTypes['nameMask'] = /^[A-Z][A-Za-z\-]$/; //掩码，首字母没大写就显示错误
Ext.form.VTypes['nameText'] = 'In‐valid Director Name.'; //错误提示内容
Ext.form.VTypes['name'] = function(v){
return Ext.form.VTypes['nameVal'].test(v);
}
});