总结一些小问题的解决方案
leonelwong
2008-08-22
scripts/ext/resources/css/ext-all.css//EXT通用CSS,包含所有的样式(必须)
scripts/ext/resources/css/icon.css//自定义存放菜单项或其他页面图标 scripts/utils/HiTRUST-CMS.css//老版本支付系统的CSS scripts/ext/ext-base.js//框架基础库(必须) scripts/ext/ext-all.js //包含了所有的EXT类库(必须) scripts/ext/ext-lang-zh_CN.js//EXT所有的中文提示(必须) 文件导入顺序 要试用Ext必须最少要把上面标注为必须的JS和CSS包含在页面中,并且,请注意导入的顺序,由于ext-all.js是依赖于ext-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: EXT怎样实现PSOT 参考程序代码如下: buttons: [{ text: '提交', handler:function(){//当点击按钮执行这个函数 //验证有效性 if(win.getComponent('form').form.isValid()){ //login为from的id win.getComponent('form').form.submit({ url:'login_chk.php', waitTitle:'提示', method: 'POST', waitMsg:'正在登录验证,请稍候...', success:function(form,action){//如果post成功执行这里 var loginResult = action.result.success; if(loginResult == false){ //如果login_chk.php返回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:\"执行失败!\"}"); } 备注: 当然也可以不采用这种用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那样的验证呢? //form验证中vtype的默认支持类型 1.alpha //只能输入字母,无法输入其他(如数字,特殊符号等) 2.alphanum//只能输入字母和数字,无法输入其他 3.email//email验证,要求的格式是jack_luoting@126.com 4.url//url格式验证,要求的格式是http://www.skywin.com 实现自定义验证 //先用Ext.apply方法添加自定义的password验证函数(也可以取其他的名字) 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%" }] } |
|
pior
2008-08-29
![]() ![]() |
|
mustar
2008-09-05
已经收藏了,这个要经常用到的
|