Ext學習筆記10-表單續

Ext中的時間顯示格式說明表

標 識	說 明	示 例
g	小時, 12時計時法, 不帶字首0	1到12
G	小時, 24時計時法,不帶字首0	0到23
h	小時, 12時計時法, 帶字首0	01到12
H	小時, 24時計時法,帶字首0	01到23
i	分鐘, 帶字首	00到59
s	秒,帶字首0	00到59
a	午前與午後縮寫, 小寫表示	am(午前) pm(午後)
A	午前也午後縮寫,大寫表示	AM(午前) PM(午後)
u	毫秒,帶字首	001到999
O	所有時區與格林威治時間在小時和分鐘上的差異	+1030
P	所有時區與格林威治時間在小時和分鐘上的差異, 在小時和分鐘之間插入冒號(:)	-08:00
T	所在時區的縮寫	EST,MDT,PDT等
Z	所在時區格林威治時間在時間上的差距,以秒為單位, 格林威治時區線以西為負數,以動為正數	-43200, 50400

 

Ext中的日期顯示格式說明表

標 識	說 明	示 例
d	日期的數字表示,帶字首0	01到31
j	日期的數字表示,不帶字首0	1到31
D	星期的縮寫表示	Mon到Sun
l(小寫L)	星期的完整表示	Sunday to Saturday
N	ISO-8601中規定的星期數字表示	1表示星期一,7表示星期日
S	英文日期的2自負字尾	st, nd, rd 或者 th長於j配合使用, 組成1st,2nd形式的日期描述
w	星期的數字表示	0表示星期日,1表示星期一,6表示星期六
z	一年中的地幾天,從0開始	0到364(一年共365天)
W	ISO-8601中規定的星期在一年中的數字表示 每星期從星期一開始	01到53
F	月份的完整表示	January到December
m	月份的數字表示,帶字首0	01到12
M	月份的縮寫表示	Jan到Dec
n	月份的數字表示,不帶字首0	1到12
t	特定月份的天數	28到31
L	特定年是否為閏年	1998,2004
Y	年份的四位數表示	1999,2003
y	年份的兩位數表示	99, 03
c	ISO8601中規定的日期表示	2007-4-17T15:19:21+08:00
U	ju1970年1月1日(UNIX時間)所經過的秒數	1193432446,-4535454353

表單的提交與載入

• Ext.form.Action
  ---  該類主要提供表單相關的一些動作，它只在表單執行submit或load時被建立
  ---  Action主要配置專案
  

  配置項	類 型	說 明
  failure	Function	設定錯誤處理回撥函式,該函式在以下兩種情況下被呼叫:   * 當收到一個錯誤資訊包時被呼叫   * 在Ajax提交過程中出現錯誤時被呼叫 回撥函式會得到引數:form:Ext.form.BasicForm 和 action: Ext.form.Action
  method	String	請求伺服器的方式,預設情況下使用Ext.form.BasicForm的method配置項, 如果沒有提供則使用底層dom的form標籤中的method屬性
  params	Mixed	附加的引數,將被福建到Ext.form.BasicForm.baseParams中, 並同表單欄位一起被提交到制定的URL
  success	Function	設定請求成功後的回撥函式.回撥函式會得到兩個引數分別是: form:Ext.form.BasicForm 和 action: Ext.form.Action
  url	String	當前動作請求的URL
  waitMsg	String	當動作執行時呼叫Ext.MessageBox.wait元件時顯示的等待資訊
  waitTitle	String	呼叫Ext.MessageBox.wait元件時顯示的標題

  
  ---   Action主要公共屬性
  

  配置項	類 型	說 明
  Action.CLIENT_INVALID	String	客戶驗證錯誤,忽略表單提交
  Action.CONNECT_FAILURE	String	遠端伺服器傳送請求時出現的通訊錯
  Action.LOAD_FAILURE	String	載入資料時,沒有包含data屬性的欄位被返回
  Action.SERVER_INVALID	String	當伺服器端驗證失敗時,每個欄位的錯誤資訊都被包含在 response'errors中
  failureType	String	錯誤型別
  response	Object	執行動作的XMLHttpRequest物件
  result	Object	解碼後的伺服器返回物件,包含一個boolean型別的 success屬性及其他屬性
  type	String	動作的型別,之包含兩種型別,分別是submit和load

  
  
• Ext.form.Action.Submit
  ---   Submit新增配置項
  

  配置項	型別	說明
  clientValidation	boolean	是否進行客戶端驗證,預設為true

  該類擴充套件自Ext.form.Action..負責表單資料並處理返回結果,並且只有在表單提交時被建立,
  要求返回的資訊包中必須有一個boolean型別的屬性success表示提示是否成功,
  和一個可選的errors屬性,包含無效欄位的錯誤資訊.下面事宜個返回資訊的示例:
  {
          success : false,                        //表示表單提交資料是否成功
          errors : {                                  //欄位錯誤資訊
                    username : '使用者名稱不能為空',
                    password:'密碼必須大於3位'
           }
  }
  
  
• Ext.form.Action.Load
  該類擴充套件自Ext.form.Action..負責讀取資料到表單中,並且只有在表單提交時被建立,
  要求返回的資訊中必須包含一個Boolean型別的屬性success表示載入是否成功和
  一個data屬性,data屬性包含要被載入的欄位資訊.例如:
  {
             success: true,           //表示表單載入資料是否成功
             data: {                         //表單資料
                     usernaem: "王海龍",
                     userInfo: "詳細資訊",
                     address: "南昌"
              }
  }
  
• 一個表單非同步載入示例:
  //客戶端
  Ext.onReady(function(){
    Ext.BLANK_IMAGE_URL = '../../extjs2.0/resources/images/default/s.gif';
    Ext.QuickTips.init();
    Ext.form.Field.prototype.msgTarget = 'side';//統一指定錯誤資訊提示方式
    var productForm = new Ext.form.FormPanel({
     title:'表單載入示例',
     labelWidth : 100,//標籤寬度
     width : 300,
     frame : true,
     labelSeparator :'：',//分隔符
     applyTo :'form',
     items:[
      new Ext.form.TextField({
       fieldLabel:'產品名稱',
       name : 'productName',
       width : 150,
       value:'U盤'//同步載入資料
      }),
      new Ext.form.NumberField({
       fieldLabel:'金額',
       name : 'price',
       width : 150,
       value : 100//同步載入資料
      }),
      new Ext.form.DateField({
       fieldLabel:'生產日期',
       format:'Y年m月d日',//顯示日期的格式
       width : 150,
       name : 'date',
       value : new Date()//同步載入資料
      }),
      new Ext.form.TextArea({
       id : 'introduction',
       name : 'introduction',
       fieldLabel:'產品簡介',
       width : 150//非同步載入資料
      })
     ],
     buttons:[
      new Ext.Button({
       text : '載入簡介',
       handler : loadCallBack
      })
     ]
    });
    //表單載入資料的回撥函式
    function loadCallBack(){
     productForm.form.load({
      waitMsg : '正在載入產品簡介資訊',           //提示資訊
      waitTitle : '提示',                                               //標題
      url : 'productServer.jsp',                                  //請求的url地址
      method:'GET',                                                     //請求方式
      success:function(form,action){                       //載入成功的處理函式
       Ext.Msg.alert('提示','產品簡介載入成功');
      },
      failure:function(form,action){/                        /載入失敗的處理函式
       Ext.Msg.alert('提示','產品簡介載入失敗<br>失敗原因：'+action.failureType);
      }
     });
    }
   });
  
  //伺服器端
    response.setCharacterEncoding("UTF-8");
    String msg = "{success:true,data:{info:'本產美觀實用，售後服務優。'}}";
    response.getWriter().write(msg);
  
• 一個表單資料提交的示例:
  //客戶端程式碼
  Ext.onReady(function(){
    Ext.BLANK_IMAGE_URL = '../../extjs2.0/resources/images/default/s.gif';
    Ext.QuickTips.init();
    Ext.form.Field.prototype.msgTarget = 'side';
    var loginForm = new Ext.form.FormPanel({
     title:'表單提交示例',
     labelWidth : 60,//標籤寬度
     width : 230,
     frame : true,
     labelSeparator :'：',//分隔符
     applyTo :'form',
     items:[
      new Ext.form.TextField({
       fieldLabel:'使用者名稱',
       name : 'userName',
       allowBlank : false,
       vtype:'email'
      }),
      new Ext.form.NumberField({
       fieldLabel:'密碼',
       name : 'password',
       inputType : 'password',
       allowBlank : false
      })
     ],
     buttons:[
      new Ext.Button({
       text : '登陸',
       handler : login
      }),
      new Ext.Button({
       text : '重置',
       handler : reset
      })
     ]
    })
    function login(){//提交表單
     loginForm.form.submit({
      clientValidation:true,                       //進行客戶端驗證
      waitMsg : '正在登陸系統請稍後',       //提示資訊
      waitTitle : '提示',                             //標題
      url : 'loginServer.jsp',                      //請求的url地址
      method:'GET',                                 //請求方式
      success:function(form,action){        //載入成功的處理函式
       Ext.Msg.alert('提示','系統登陸成功');
      },
      failure:function(form,action){         //載入失敗的處理函式
       Ext.Msg.alert('提示','系統登陸失敗，原因：'+action.failureType);
      }
     });
    }
    function reset(){//重置表單
     loginForm.form.reset();
    }
   });
  
  //伺服器程式碼
   response.setCharacterEncoding("UTF-8");
    String password = request.getParameter("password");
    StringBuffer msg=new StringBuffer();
    if(password.length()>=6){
        msg.append("{success:true}");
    }else{
        msg.append("{success:false,errors:{password:'密碼長度必須大於6'}}") ;
    }
    response.getWriter().write(msg.toString());