Ext學習筆記6-Ajax

笨笨鼠→_→發表於2012-07-07
筆記

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

相關文章