Ext JS4學習教程+筆記（五）Form Panel的使用

Ext JS4中Form Panel的顯示和提交，

示例代碼如下：

function formTest(){

     Ext.create('Ext.form.Panel',{
          title:'form測試',
          bodyPadding:10,
          renderTo:Ext.getBody(),
          width:300,
          height:200,
          url:'formdata.txt',
          defaultType: 'textfield',
          items:[
               {
                    name:'name',
                    fieldLabel:'姓名',
                    allowBlank: false,
                    msgTarget:'under',
                    blankText:'姓名必須輸入'
               },
               {
                    xtype:'numberfield',
                    name:'year',
                    fieldLabel:'年齡',
                    maxValue:500,
                    minValue:1
               }
          ],
          buttons:[
               {
                    text:'重置',
                    handler:function(){
                         this.up('form').getForm().reset();                   
                    }
               },
               {
                    text:'提交',
                    handler:function(){
                       var formPanel = this.up('form');

            var form = this.up('form').getForm();

            if (form.isValid()) {

                form.submit({

                    success: function(form, action) {

                       Ext.Msg.alert('Success', action.result.msg);

                       formPanel.close();

                    },

                    failure: function(form, action) {

                        Ext.Msg.alert('Failed', action.result.msg);

                    }

                });

            }

                    }
               }
          ]
     });
    
}

說明：

1，Form Panel的類是Ext.form.Panel，每個類創建時自動創建對應的Ext.form.Basic類（用getForm()獲得），管理其表單子元素，這個類提供了提交submit(), 重置reset()，驗證isValid()等表單方法。

2,Ext.form.Panel的url屬性設上後，調用默認使用Ajax提交，請求表單內容就是每個表單元素的name:value對，響應內容應該爲：

{
     success:true,
     msg:'成功的提交'
}

這樣在submit的回調函數success或failure中就跟據上面返回的內容判斷是否成功，action.result裏面可以得到響應的值，例如上例中的action.result.msg。

3，每個表單的元素，可以用Form Panel的defaultType: 'textfield'指定其默認類型，用items屬性寫其表單元素數組，默認使用'anchor'佈局。

4，需要驗證的字段，提交前可調用isValid()判斷一下，每個驗證字段的控件，如textfield，都有很多驗證的屬性可以設置，如

                    allowBlank: false,
                    msgTarget:'under',
                    blankText:'姓名必須輸入'

就表示不允許爲空，錯誤提示顯示的位置，及其中文提示驗證信息內容，查詢Ext JS4每個控件的文檔即可。