之前做了一个类似于id异步验证的功能,这涉及到表单提交前做异步验证和不点提交也需给出相应提醒的问题,用的是ext3.2.1,选这个没有为什么,因为公司正在用。咱做IT的,公司用什么,就得学什么。
以下是从网上找的2种ext异步验证方法,我觉得都不靠谱。
1、将IsExsit设置为全局变量,但我按着做不起效果,存在问题:还未验证完,数据被提交了。
validator :function()
{
var username = Ext.get('username').dom.value;
Ext.Ajax.request({
url:'CheckUserName.aspx',
params:{name:username},
success: function(response, options) {
var data = Ext.util.JSON.decode(response.responseText);
if(data.success == true) ReturnValue(true);
else ReturnValue(false);//不能在success方法里面直接返回。
}
});
function ReturnValue(ok){
IsExsit = ok;
}
return IsExsit;
},
2、添加listeners配置项,listeners:{'keyup':{fn:chkOnServer}};添加配置项validationEvent:'blur',默认是“keyup”。必须注意要让监听“keyup”起效,还需要添加配置项enableKeyEvents:true,这项在api中是查不到的,而是写在keyup事件的描述中。
编写chkOnServer方法,chkOnServer(field,_event){},field为该field的引用,_event为这次事件,还没研究过是不是js原生的event,应该会有些扩展。这个方法只做ajax请求就行了,它的回调函数为changeRegBool(response,option)。
这么做,1中的问题是解决了,但效率太低,因为它是在文本框中每输入一个键就向服务器发起一次验证。
以下是本人的解决方案
1、监听‘blur’事件,当光标离开文本域时验证一次,起到友好的提示效果。
'blur':function(_tf){
Ext.Ajax.request({
url:ctx + "/modelsMainAction.do?method=rightCodeIsExist",
params:{rightCode:_tf.getValue()},
success: function(response, opts) {
var obj = Ext.decode(response.responseText);
var _isExist = obj["isExist"];
isExist =!_isExist;
this.validate();
},
scope:this
});
}
2、提交前再向后台发起一次验证,成功后再提交数据。
if(!_formPanel.getForm().isValid()) return;
var _tf = _formPanel.findByType("textfield")[2];
Ext.Ajax.request({
url:ctx + "/modelsMainAction.do?method=rightCodeIsExist",
params:{rightCode:_tf.getValue()},
success: function(response, opts) {
var obj = Ext.decode(response.responseText);
var _isExist = obj["isExist"];
isExist =!_isExist;
if(_tf.validate())
_formPanel.getForm().doAction('submit',{
url:ctx + "/modelsMainAction.do?method=modelSave",
method: 'POST',
success:function(){
var _isLeaf = true;
if(this.form.findByType("combo")[0].getValue() == "否") _isLeaf = false;
var _node = new Ext.tree.AsyncTreeNode({
text:this.form.findByType("textfield")[0].getValue(),
uiProvider:Ext.tree.ColumnNodeUI,
leaf:_isLeaf,
id:this.form.findByType("textfield")[2].getValue()
});
_node.attributes.rightFullName =this.form.findByType("textfield")[1].getValue();
_node.attributes.rightCode =this.form.findByType("textfield")[2].getValue();
_node.attributes.href =this.form.findByType("textfield")[3].getValue();
_node.attributes.hrefTarget =this.form.findByType("textfield")[4].getValue();
_node.attributes.upRightCode =this.form.findByType("textfield")[6].getValue();
_node.attributes.rightType =this.form.findByType("combo")[1].getValue();
menuNode.appendChild(_node);
this.close();
},
waitTitle:"数据传输",
waitMsg:"数据传输中,请稍后。。。",
scope:this}
);
},
scope:this
});
分享到:
相关推荐
"Ext UploadDialog For Ext3.2.1 附使用示例"这个资源正好解决了这个问题,它是一个针对ExtJS 3.2.1版本优化和改造的UploadDialog组件。改造的目标是为了提供一个稳定、功能完善的文件上传对话框,以便于开发者在3.x...
在这个“ext-3.2.1”压缩包中,包含了一系列用于ExtJS 3.2.1开发所需的文件。 1. **组件化开发**:ExtJS 3.2.1的核心特性之一是它的组件模型。它提供了一系列预定义的UI组件,如表格(Grid)、树形视图(Tree)、...
4. 问题排查:遇到问题时,中文文档通常包含解决方案或提示,有助于定位和解决问题。 5. 社区支持:中文文档通常伴随着活跃的社区讨论,用户可以在论坛上交流经验,共同解决技术难题。 EXTJS 3.2.1 的中文文档可能...
- 社区论坛:在Sencha官方论坛上,开发者可以找到一些关于旧版本的问题解答和经验分享。 综上所述,ExtJS 3.2.1是一个功能强大的前端框架,尤其适合构建复杂的业务应用。然而,由于其版本较旧,使用时需考虑到升级...
7. **Ajax通信**:EXT JS通过Ajax技术实现异步数据交换,可以轻松地与服务器进行交互,获取或提交数据,无需页面刷新。 8. **Drag & Drop**:EXT JS支持拖放功能,允许用户在界面上自由移动组件,实现更直观的操作...
在提供的"ext-3.2.1"压缩包中,可能包含了ExtJS 3.2.1版本的库文件、文档、示例代码等资源,这可以帮助开发者更好地学习和使用该框架。通过阅读文档和尝试例子,你可以进一步了解如何利用ExtJS的强大功能来构建高效...
- **验证**: 运行示例程序验证Qt/E是否正确安装。 **6.4 实验要求** - **编译指南**: 编写详细的编译指南。 - **程序**: 开发一个简单的Qt/E程序。 #### 七、音频接口程序设计 **7.1 实验目的** 了解PXA270平台...