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('更新完毕');
                               }
                              });