以前是通過是通過指定validator實現的,比如下面“確定密碼”輸入框的配置項validator,但發現有個很嚴重的缺點,如果涉及到後臺的話,前臺會頻繁的訪問後臺,很浪費資源,於是在此改進了一下。
var PwdEditUi = Ext.extend(Ext.Window, {
title: '修改密碼',
width: 400,
height: 180,
layout: 'fit',
modal: true,
initComponent: function () {
this.items = [
{
xtype: 'form',
ref:'form',
baseCls: 'x-plain',
padding: 10,
labelWidth: 70,
id: 'PwdForm',
monitorValid: true,
buttonAlign: 'center',
defaults: { anchor: '95%' },
items: [
{
xtype: 'textfield',
fieldLabel: '用 戶 名',
name: 'Teach_username',
allowBlank: false,
blankText: '用戶名不能爲空!',
emptyText: '請輸入用戶名',
invalidText: '該用戶名已存在!',
listeners: {
'blur': function () {//設置監聽函數
PwdEditView.checkname.call(this);
}
}
},
{
xtype: 'textfield',
inputType: 'password',
emptyText: '請輸入新密碼',
allowBlank: false,
blankText: '新密碼不能爲空!',
fieldLabel: '新 密 碼',
id: 'newPwd'
},
{
xtype: 'textfield',
inputType: 'password',
fieldLabel: '確認新密碼',
id: 'affirmPwd',
emptyText: '請輸入新密碼',
allowBlank: false,
blankText: '確認新密碼不能爲空!',
invalidText: '兩次密碼不一致!',
validator: function () {
if (Ext.get('affirmPwd').getValue() == Ext.get('newPwd').getValue())
return true;
return false;
}
},
{
xtype:'hidden',
name: 'Teach_pk'
}
],
buttons: [{
text: '提交',
formBind: true,
iconCls: 'submit',
handler: function () {
PwdEditView.submit();
}
}, {
text: '退出',
iconCls: 'decline',
handler: function () {
PwdEditView.destroy();
}
}]
}
];
PwdEditUi.superclass.initComponent.call(this);
}
});
Ext.override(PwdEditUi, {
//檢查用戶名
checkname: function () {
var self = this;
var userName = self.getValue();
Ext.Ajax.request({
url: 'JsonPage/TeacherManage.aspx?param=checkname&rnd=' + Math.random(),
params: { username: userName },
success: function (response, options) {
var result = Ext.decode(response.responseText);
if (result.success == true) { //用戶名可用
self.markInvalid('用戶名已存在,請選擇其他用戶名!');
self.validator = null;
} else { //用戶名已存在
self.markInvalid('用戶名已存在,請選擇其他用戶名!');
self.validator = function () {
return false;
};
}
},
failure: function () {
msg('網絡連接出錯,請稍後重試!');
self.validator = null;
}
});
}
});
PwdEditView = new PwdEditUi();
PwdEditView.show();