Ext常用问题的总结

[code] scripts/ext/resources/css/ext-all.css//EXT通用CSS，包括所有样式(必须) scripts/ext/resources/css/icon.css////自定义存储菜单项或其他页面图标 scripts/utils/HiTRUST-CMS.css////CSSS旧版支付系统 scripts/ext/ext-base.js///框架基础库(必须) scripts/ext/ext-all.js ///包含所有EXT类库(必须) scripts/ext/ext-lang-zh_CN.js///EXT所有中文提示(必须) 文件导入顺序 要尝试Ext，必须至少在页面中包含上面标注为必要的JS和CSS，而且，由于extt，请注意导入的顺序-all.依赖ext的js-base.js，所以ext-base.js先导入，js使用的样式来自ext-all.css，因此，首先导入 问题集锦 1：关于试用(docs.js )tab页面无法显示或禁止JS 在实例化autoload对象中，解决方案，内部的scripts属性需要设置，默认为false，即加载的tab子页面不执行javascript，需要调整如下： A：Var autoLoad={url:heaf,scripts:true}; 当然也可以嵌套iframe， B：html:’<iframe src=”+url+” width=”100%” height=”100%”/>’, 这意味着EXT类库每次都要加载，但单页变得可分离，耦合减少 2:关于email验证的问题 xtype:'textfield', fieldLabel: "电子邮件"， id: 'edit_SPEmail', name: 'sPEmail', vtype: 'email加上这个，就可以验证EMAIL了。 anchor:'95%' 3：使用select的问题

///创建JSON数据 var statusArray=[ “正常”，“正常”， "注销"，"注销" "冻结"，"冻结" ]; //使用 xtype:'combo', store: new Ext.data.SimpleStore({ fields: ['value', 'descp'], data :statusArray }), fieldLabel: '状态', loadingText:'正在加载...', displayField:'descp', //隐藏数据 valueField:'value', //显示的数据 mode:'local', ///读取本地数据(remote表示远程数据) triggerAction:'all', id:'StatusID', hiddenName:'StatusName', editable:true, //是否可以编辑，此属性还支持输入搜索功能

4:文本框输入基本验证

allowBlank:false,//如果是空的，则显示提示信息 minLength:6.//至少允许字符数 minLengthText:至少要输入6个字符！', ///如果小于最小允许字符数，则提示信息 maxLength:12, ///最大允许字符数 maxLengthText:最多50个字符，请输入！', ///如果超过最大允许字符数，则提示信息

5: 如何实现PSOTEXT？ 参考程序代码如下：

buttons: [{ text: '提交', handler:function(){//当点击按钮执行此函数时 ///验证有效性 if(win.getComponent('form').form.isValid()){ ///login是fromid win.getComponent('form').form.submit({ url:'login_chk.图灵', waitTitle:'提示', method: 'POST', waitMsg:‘正在登录验证，请稍候...', success:function(form,action)如果post在这里成功执行， var loginResult = action.result.success; if(loginResult == false){ /如果login_chk.图灵返回false执行此处 alert(action.result.message); } else if(loginResult == true){///在这里成功执行 alert(action.result.message); } } , failure: function(form,action) { ///未执行或POST失败，返回异常 alert(action.result.message); } }); } } },{ text: '取消', handler:function(){simple.form.reset();}///重置表单 }] 后台返回： if(验证成功){ out.print( "{success:true,message:执行成功！\"}"); }else{ out.print( "{success:false,message:执行失败！\"}"); }else{ out.print( "{success:false,message:执行失败！; }

备注： 当然，这种POST不能使用，可以手动获取值，DWR等AJAX技术也可以实现。其实原理是一样的，都是异步调用。 6:关于乱码的解决方案 乱码一直是个头疼的问题，尤其是JS和页面、前台和后台之间的互动。如果没有，建议使用统一编码UTF-8或GBK。一个过滤器可以实现要求和恢复信息编码的一致性。当然，您也可以手动更改字符的编码格式，然后手动解码 7:为什么我的文本框设置了非法输入提示，但不能显示提示文本 Ext.QuickTips.init();///初始化鼠标停留时的显示框支持tips提示 (//提示方式，枚举值为“qtip","title","under","side",id(元素id) Ext.form.Field.prototype.msgTarget='side'; Qtip:例如，“默认”qtip“也就是说，鼠标移动自动显示 Side:使用较多，右侧出现红色感叹号，鼠标上有错误的提示 Title: 类似于普通HTML控件中的title属性，鼠标悬停显示 Under: 在控件下显示，主动显示，不需要鼠标悬停 如果您的文本框没有设置验证，则无法显示 8:如何实现EXT的验证？ vtype的默认支持类型///form验证 1.alpha ///只能输入字母，不能输入其他(如数字、特殊符号等) 2.alphanum///只能输入字母和数字，不能输入其他数字 3.email//email验证，所需格式为jack_luoting@126.com 4.url//url格式验证，httpp要求的格式是http://www.skywin.com 实现自定义验证 //先用Ext.添加自定义password验证函数(也可以取其他名称)的apply方法

Ext.apply(Ext.form.VTypes,{password:function(val,field){//val指这里的文本框值，field指这个文本框 if(field.confirmTo){/confirmto是我们自定义的配置参数，一般用于保存其他组件的id值 var pwd=Ext.get(field.confirmTo);///获得confirmto的id值 return (val==pwd.getValue());//返回比较值 } return true; } }); ////配置items参数 items:[{fieldLabel:"密码", id:“pass1” anchor:"90%" },{ fieldLabel:“确认密码”， id:“pass2”， vtype:"password自定义验证类型 vtypeText:“两个密码不一致！，///非法提示 confirmTo:“pass1”，//比较另一个组件的id anchor:"90%" }

9:实现选填显示 可选fieldset实例 其实就是带个chechbox，有点像论坛注册时选择填写信息的效果，主要知识点:

1.checkboxToggle:true///true呈现带checkbox的fieldset，选择展开，否则默认为false 2.checkboxName:string///当上面是true时，作为checkbox的name，方便表单操作 { xtype:"fieldset", checkboxToggle:true,//关键参数，其他参数和以前一样 checkboxName:"dfdf", title:“选填信息”， defaultType:'textfield', width:330, autoHeight:true,////让自适应展开排版 items:[{ fieldLabel:"UserName", name:"user", anchor:“95%”//330px-labelWidth剩余宽度的95%，留下5%作为验证错误提示 },{ fieldLabel:"PassWord", inputType:"password，//密码文本 name:"pass", anchor:"95%" }] }

[/code]