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%"
}]
}

评论

1 楼 s4320506 2009-04-03  

前台和后台都用GBK好像会出现乱码，我后台直接request.getparameter时出现乱码，全部用UTF-8没有问题