Ext常用问题的总结

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验证，要求的格式是[e-mail] 
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%" 
}] 
}