如何在Ext校验成功后显示对勾——for ExtJS4.1
来源:互联网 发布:jquery 1.12.4.min.js 编辑:程序博客网 时间:2024/05/21 22:22
我在这里做了两件事:
1.使用'side'方式显示错误信息时,表单会缩进,我把这个效果去掉了
2.实现对勾和叹号图标的切换
注意:
我自定义了对勾的css样式,这里叫做'icon-yes'
//表单校验通过时显示对勾//复写了Ext.layout.component.field.Field,该类用于处理表单的label和错误信息//showValidIcon :BooleanExt.layout.component.field.Field.override({ getErrorStrategy: function() { var me = this, owner = me.owner, strategies = me.errorStrategies, msgTarget = owner.msgTarget; var strategy= !owner.preventMark &&Ext.isString(msgTarget) ? (strategies[msgTarget] ||strategies.elementId) : strategies.none;//给表单自定义showValidIcon:Boolean配置项//如果showValidIcon=true,并且使用'side'方式,则使用对勾(否则是默认,不对原来的代码产生影响) if(msgTarget== 'side' &&owner.showValidIcon){ //初始化时不显示icon if(owner.isIconInit){ owner.errorEl.setDisplayed(false); owner.isIconInit = true; } //一旦校验,显示icon owner.on('validitychange', function(me, valid){ me.errorEl.setDisplayed(true); }); Ext.apply(strategy,{ //取消缩进效果 adjustHorizInsets : Ext.emptyFn, layoutHoriz: function(ownerContext, owner, size) { ownerContext.errorContext.setProp('x', size.width); }, layoutVert:function(ownerContext, owner){ ownerContext.errorContext.setProp('y',ownerContext.insets.top); }, prepare :function(ownerContext, owner) { var errorEl= owner.errorEl; errorEl.addCls(Ext.baseCSSPrefix + 'form-invalid-icon'); errorEl.set({'data-errorqtip': owner.getActiveError() ||''}); varactiveError = owner.getActiveError(), hasError =!!activeError; //切换对勾图标 errorEl[hasError ? 'removeCls' : 'addCls']('icon-yes'); Ext.layout.component.field.Field.initTip(); } }); } return strategy; } });
- 如何在Ext校验成功后显示对勾——for ExtJS4.1
- Ext输入成功后显示对勾
- Extjs4 图片上传 上传成功后显示图片
- Extjs4循序渐进(一)——开始Ext
- Extjs4循序渐进(一)——开始Ext
- Extjs4循序渐进(一)—开始Ext
- 在c/s中,登录成功后如何关闭登录窗体显示主窗体
- ExtJS4教程——2、Ext.onReady、Ext.define、Ext.create基础方法
- 在Extjs4应用中使用Ext.Loader
- 在Extjs4应用中使用Ext.Loader
- 在Extjs4应用中使用Ext.Loader
- 在ExtJS4应用中使用Ext.Loader
- EXTJS4自学手册——EXT对象选择
- EXTJS4自学手册——EXT组件布局
- EXTJS4自学手册——EXT数据结构组件(store)
- Extjs4循序渐进(二)—Ext的界面(容器和布局)
- ext JS Ext.form.FormPanel 如何显示提交后服务器返回的错误信息?
- Pydev安装成功后在Eclipse中不显示
- CCRect
- Building FFplay for Windows
- 程序在内存中的奥秘
- 『黑马全攻略』之入学论坛篇
- 卓越员工的十五种能力
- 如何在Ext校验成功后显示对勾——for ExtJS4.1
- ListView控件属性、方法、事件
- 那些黑马人,不得不看的黑马经典贴集
- 教你在怎样在黑马论坛发帖
- 使用 Socket 通信实现 FTP 客户端程序
- 基于c数据结构——实现多项式合并同类项,加法和乘法
- extjs表单FormPanel验证
- 锋利的JQuery----JavaScript基础知识(二)
- 贪心法-背包问题