Ext学习笔记6-Ajax

15-Ext.Ajax

四种提交方式:

1.get,

2.post,

3.xml,

4.json

基本格式:

Ext.onReady(function(){

Ext.Ajax.on('requestcomplete', function(_conn, _request, _options){ //requestcomplete--回调事件

alert(_request.responseText);

});

Ext.Ajax.request({

url:'http://localhost:8080/test/test_ajax.do',

method:'post',

params:{

name:'王五',

sex:'男'

}

});

})

16-自定义vtype

Ext.applyIf(Ext.form.VTypes, {

"telphone":function(_v){ //验证函数 返回true or false

return /(^\d{3}\-\d{7,8}$)|(^\d{3}\d{7,8}$)|(^\d{4}\d{7,8}$)|(^\d{7,8}$)/.test(_v);

},

"telphoneText":"该输入项必须是电话号码格式,格式如:0514-87315143,051487315143,87315143", //上面函数返回false时返回的提示

"telphoneMask":/[0-9\-]/i, //xxxMask为键盘可以输入的键

"mobile":function(_v){ //验证函数 返回true or false

return /^1[1-9][0-9]\d{8}$/.test(_v);

},

"mobileText":"该输入项必须是手机号码格式,格式如: 13952569274", //上面函数返回false时返回的提示

"mobileMask":/[0-9]/i //xxxMask为键盘可以输入的键

})

附:验证

********************************关于Ext中表单验证部分*********************************

//①初始化提示标签

Ext.QuickTips.init();//初始化提示信息

Ext.form.Field.prototype.msgTarget="side";//让提示信息在边上显示

//②不许为空

allowBlank:false

// 补充:默认文字< BR> emptyText:'默认的文字'

//③限制输入的最大长度,最小长度

maxLength:10

minLength:5

//④借助vtype进行验证

vtype的值有:1.alpha,只能输入英文字母

2.alphanum,只能输入英文字母和数字

3.email,电子邮件

4.url,网址

//⑤自定义验证规则

// 只要加入这两个属性就可以了

regex:/^[\u4e00-\u9FA5]+$/ //<<==正则表达式--只能输入汉字

regexText:'只能输入汉字' //<<==验证失败的提示

//⑥NumberField验证控件

1)设置xtype:'numberfield'

2)不想让用户输入小数:allowDecimals:false <--2)和3)同时使用的时候要放在3)后面

3)不想让用户输入负数:allowNegative:false <--3)和2)同时使用的时候要放在2)后面

4)精确到小数点后几位:decimalPrecision:2 <--不可以和2)同时使用

5)数字的输入范围:minValue:0

maxValue:150

17-Ext.wait

*FormPanel中的

waitTitle:'提交'(submit中的配置项)

waitMsg:'数据提交中'(submit中的配置项)

waitMsgTarget:true //将等待进度条限制到该组件范围内

进度条组件

组件常用配置项目表

配置项	类 型	说 明
applyTo	String	一个页面上已经存在的元素或元素id，组件将会追加到该元素的后面， 而不是将组件作为新组件的容器
renderTo	String	一个页面上已经存在的元素或元素id，该元素将会成为新组建的容器
height
width
cls	String	一个可选的样式表扩展，它被作用于组件元素，藏用于用户自定义样式， 默认为: ('');

注: 如果在组件的配置项目中同时出现了applyTo和renderTo两个条目,则applyTo优先

手工模式的进度条

手工更新进度条主要是通过调用进度条的updateProgress()方法实现的

调用格式:

updateProgress([Float
value], [String text])

参数说明:

value: 0~1之间的数字, 默认为0,如果value超过1,进度条也不会重新开始.

text: 进度条上显示的文字,如果忽略该参数则进度条将保持现有的文字不更新

返回值:

Ext.ProgressBar
手动模式进度条示例:

var progressBar = new Ext.ProgressBar({

text:'working.......', //进度条上显示的文字

width:300,

applyTo:'hello'

});

var count = 0; //滚动条被刷新的次数

var percentage = 0; //进度百分比

var progressText=''; //进度条信息

Ext.TaskMgr.start({

run:function(){

count++;

if(count>10){

progressBar.hide();

}

//计算进度

percentage = count/10;

progressText = percentage * 100 + '%';

//更新信息提示对话框

progressBar.updateProgress(percentage,progressText);

},

interval:1000

});

自动模式的进度条

自动模式的进度条,和提示框的进度条很相似,他们都不能准确反映应用程序的执行状态.

只要调用进度条的wait()方法就可以了

调用格式:

wait([Object config])


参数说明:config配置对象说明

配置项	类 型	说 明
duration	Number	设定进度条在被重置之前要运行的时间长度,单位是毫秒, 如果或略该项则进度条会质询更新直到调用reset方法
interval	Number	更新进度条的时间间隔,单位是好面,默认值为1000毫秒
increment	Number	进度条的分段数量,也就是进度条分多少次更新完成,默认为10, 如果实际更新次数超过这个值则进度条会回到开始位置
fn	Function	在进度条更新完毕后被调用,该回调函数没有参数,当duration配置 项不存在时,回调函数会被忽略
scope	Object	回调函数的执行范围

返回值:Ext.ProgressBox


自动模式进度条示例:

var ProgressBar = new Ext.ProgressBar({

text:'working.....',//进度条上显示的文字

width:300,//设定进度条的宽度

applyTo:'hello'

});

ProgressBar.wait({

duration:10000,//进度条持续更新10秒钟

interval:1000,//每1秒钟更新一次

increment:10,//进度条分10次更新完毕

scope:this,//回调函数的执行范围

fn:function(){//更新完成后调用的回调函数

alert('更新完毕');

}

});