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

posted on 2009-05-22 11:06  fmxyw  阅读(776)  评论(0编辑  收藏  举报