Ext.require([
'Ext.form.*',
'Ext.data.*'
]);
Ext.onReady(function(){
Ext.apply(Ext.form.VTypes, {
repetition: function(val, field) { //返回true，则验证通过，否则验证失败
if (field.repetition) { //如果表单有使用repetition配置，repetition配置是一个JSON对象，该对象提供了一个名为targetCmpId的字段，该字段指定了需要进行比较的另一个组件ID。
var cmp = Ext.getCmp(field.repetition.targetCmpId); //通过targetCmpId的字段查找组件
if (Ext.isEmpty(cmp)) { //如果组件（表单）不存在，提示错误
Ext.MessageBox.show({
title: '错误',
msg: '发生异常错误，指定的组件未找到',
icon: Ext.Msg.ERROR,
buttons: Ext.Msg.OK
});
return false;
}
if (val == cmp.getValue()) { //取得目标组件（表单）的值，与宿主表单的值进行比较。
return true;
} else {
return false;
}
}
},
repetitionText: '两次输入的密码不一样'
});
Ext.define('example.contact', {
extend: 'Ext.data.Model',
fields: [
'name','stuid','password','password2','tel',
'sex','qq', 'email', 'grade_class',
{name: 'birthday', type: 'date', dateFormat: 'm/d/Y'}
]
});
Ext.define('example.fielderror', {
extend: 'Ext.data.Model',
fields: ['id', 'msg']
});
var formPanel = Ext.create('Ext.form.Panel', {
renderTo: 'form-ct',
url:'admin/userRegister', //如果要实现非AJAX表单提交就在这里加url
collapsible:true,
method:'POST',
frame: true,
title:'注册',
width: '30%',
// left:1300,
bodyPadding: 5,
waitMsgTarget: true,
fieldDefaults: {
labelAlign: 'right',
labelWidth: 85,
msgTarget: 'side'
},
// configure how to read the XML data
reader : Ext.create('Ext.data.reader.Xml', {
model: 'example.contact',
record : 'contact',
successProperty: '@success'
}),
// configure how to read the XML errors
errorReader: Ext.create('Ext.data.reader.Xml', {
model: 'example.fielderror',
record : 'field',
successProperty: '@success'
}),
//实现非AJAX提交表单一定要加下面的两行！ 下面的方法只适用于2.0版本
// onSubmit: Ext.emptyFn,
// submit: function() {
// this.getEl().dom.action='admin/userRegister'; //连接到服务器的url地址
// this.getEl().dom.submit();
// },
items: [{
xtype: 'fieldset',
title: 'Information',
defaultType: 'textfield',
defaults: {
width: 280
},
items: [{
fieldLabel: '姓名',
allowBlank:false,
blankText :'请输入您的姓名',
emptyText: '请输入您的姓名',
name: 'name'
},
{
fieldLabel: '学号',
allowBlank:false,
blankText :'请输入您的学号',
emptyText: '请输入您的学号',
regex:/\d{9}$/,
vtype:'alphanum',
name: 'stuid'
},
{
inputType: 'password',
id: 'password',
name:'password',
maxLength: 15,
fieldLabel: '输入密码',
vtype:'alphanum',
allowBlank: false
},
{
inputType: 'password',
id: 'password2',
name:'password2',
maxLength: 15,
fieldLabel: '重复密码',
allowBlank: false,
vtype: 'repetition', //指定repetition验证类型
repetition: { targetCmpId: 'password' } //配置repetition验证，提供目标组件（表单）ID
},
{
fieldLabel: '电话',
// minLength:11,
// maxLength:11,
allowBlank:false,
blankText :'请输入合法的电话号码',
emptyText: '请输入您的电话',
regex:/\d{11}$/,
vtype:'alphanum',
name: 'tel'
},
{ xtype: 'combobox',
fieldLabel: '性别',
allowBlank:false,
blankText :'你没有性别？？！',
name: 'sex',
store: Ext.create('Ext.data.ArrayStore', {
fields: ['usex', 'sex'],
// data : Ext.example.states // from states.js
data:[['01','男'],['02','女'],['03','为什么会有这个选项...']
]
}),
valueField: 'usex',
displayField: 'sex',
typeAhead: true,
queryMode: 'local'
},
{
fieldLabel: 'qq',
allowBlank:false,
minLength:5,
maxLength:10,
blankText :'请输入合法的QQ号码',
emptyText: '请输入您的QQ',
vtype:'alphanum',
name: 'qq'
},
{
fieldLabel: 'Email',
blankText :'请输入您的邮箱',
allowBlank:false,
name: 'email',
vtype:'email'
}, {
xtype: 'combobox',
fieldLabel: '专业班级',
allowBlank:false,
name: 'grade_class',
store: Ext.create('Ext.data.ArrayStore', {
fields: ['abbr', 'state'],
// data : Ext.example.states // from states.js
data:[['01','13计算机1班'],['02','12计算机2班'],['03','12计算机3班'],
['04','12计算机4班'],['05','12计算机5班'],['06','12计算机6班'],
['07','其他']]
}),
valueField: 'abbr',
displayField: 'state',
typeAhead: true,
queryMode: 'local',
emptyText: '例如:13计算机1班'
}, {
xtype: 'datefield',
fieldLabel: 'Date of Birth',
name: 'birthday',
allowBlank: false,
maxValue: new Date()
}
]
}],
buttons: [{
text: '样例',
handler: function(){
formPanel.getForm().load({
url: 'xml-form-data.xml',
waitMsg: 'Loading...'
});
}
},
// {
// text: '提交',
// disabled: true,
// formBind: true,
// handler: function(){
// this.up('form').getForm().submit({
//// url: 'xml-form-errors.xml',
// url:'admin/userRegister',
// submitEmptyText: false,
// waitTitle:"请稍候",
// waitMsg:"正在提交表单数据，请稍候"
// })
// }
// },
{
text : '注册',
type : 'submit',
id:'register',
formBind:true,//只有表单全部校验通过 按钮才可用
disabled:true,//默认不可用
handler : function() {
formPanel.getForm().submit({
//// url: 'xml-form-errors.xml',
url:'admin/userRegister',
submitEmptyText: false,
waitTitle:"请稍候",
waitMsg:"正在提交表单数据，请稍候"
});
}
},
{
text: '重置',
handler: function(){
formPanel.getForm().reset();
}
}
]
});
});版权声明：本文为博主原创文章，未经博主允许不得转载。
today lazy . tomorrow die .
