ExtJS 4 表單

標籤：

Form Panel表單面板就是普通面板Panel增加了表單處理能力。表單面板可以用在任何需要收集使用者提交資料的地方。表單面板可以使用Container Layout提供的最簡單的拜訪表單控制項的方式。表單面板可以和Model綁定，以方便載入和儲存資料。其實表單面板包裹了Basic Form組件，Basic Form負責處理所有表單控制項的管理，校正，提交和載入資料。這意味著所有Basic Form能接收的配置選項，都可以直接在表單面板上使用。 Basic Form Panel

開始我們示範一個可以簡單的收集使用者資料的表單：

Ext.create(‘Ext.form.Panel‘, {    renderTo: Ext.getBody(),    title: ‘User Form‘,    height: 130,    width: 280,    bodyPadding: 10,    defaultType: ‘textfield‘,    items: [        {            fieldLabel: ‘First Name‘,            name: ‘firstName‘        },        {            fieldLabel: ‘Last Name‘,            name: ‘lastName‘        },        {            xtype: ‘datefield‘,            fieldLabel: ‘Date of Birth‘,            name: ‘birthDate‘        }    ]});

這個表單把自己渲染到document.body中，並且有三個表單欄位- “First Name”, “Last Name”, 和 “Date of Birth”，表單欄位是通過Form Panel的items配置添加的，fieldLabel配置表單欄位旁邊的文字標籤，name配置表單欄位對應的真實html表單欄位的name。注意表單面板的預設類型defaultType屬性是textfield。所有表單面板中不指定xtype的表單欄位都將被當做textfield，例如例子中的First Name和Last Name，Date of Birth 通過xtype指定成了Date Field。Date Field是提供日期選框的控制項。Fields 表單欄位Field Types欄位類型

ExtJS提供了一組標準欄位，Ext.form.field命名空間裡的組件都可以在表單面板中使用。具體可以參見api文檔

• Ext.form.field.Checkbox
• Ext.form.field.ComboBox
• Ext.form.field.Date
• Ext.form.field.Display
• Ext.form.field.File
• Ext.form.field.Hidden
• Ext.form.field.HtmlEditor
• Ext.form.field.Number
• Ext.form.field.Radio
• Ext.form.field.Text
• Ext.form.field.TextArea
• Ext.form.field.Time

Validation 校正1. Built-in Validations 內建校正

ExtJS的每一種表單欄位都有內建校正，一些欄位有內建規則。例如，如果一個不能轉換成日期類型的值輸入到日期欄位中，x-form-invalid-field CSS class會加到欄位的html結構中，以反白欄位上的錯誤，這個CSS class可以由欄位的invalidCls自訂。預設樣式是紅框：

有錯誤的欄位也會顯示錯誤資訊，預設的方式是tips提示

可以通過msgTarget改變錯誤資訊的顯示位置，通過invalidText改變錯誤資訊的內容，每個欄位都有自己的invalidText實現方式，錯誤資訊中有許多可替換的標記。例如，在Date Field的invalidText中，任何’{0}’ 都會被替換成這個欄位的值，’{1}’會被替換成這個欄位的format，下面的代碼展示了如何使用這個特性自訂錯誤資訊

{    xtype: ‘datefield‘,    fieldLabel: ‘Date of Birth‘,    name: ‘birthDate‘,    msgTarget: ‘under‘, // location of the error message    invalidText: ‘"{0}" bad. "{1}" good.‘ // custom error message text}

2. Custom Validations 定製校正

有些時候內建校正不能滿足需求。最簡單的方法就是實現自訂校正，使用Text Field的regex配置應用一個校正規則，和使用maskRe配置限制可輸入的字元，這有一個使用TextField校正輸入時間的例子：

{    fieldLabel: ‘Last Login Time‘,    name: ‘loginTime‘,    regex: /^([1-9]|1[0-9]):([0-5][0-9])(\s[a|p]m)$/i,    maskRe: /[\d\s:amp]/i,    invalidText: ‘Not a valid time.  Must be in the format "12:34 PM".‘}

上面的方法對單個欄位工作良好，但是應用中如果存在很多個需要相同校正方式的欄位，這種方法就不是很方便了。Ext.form.field.VTypes提供瞭解決方案，通過它可以建立可複用的校正器，下面展示一下如何建立time校正器：

// custom Vtype for vtype:‘time‘var timeTest = /^([1-9]|1[0-9]):([0-5][0-9])(\s[a|p]m)$/i;Ext.apply(Ext.form.field.VTypes, {    //  vtype validation function    time: function(val, field) {        return timeTest.test(val);    },    // vtype Text property: The error text to display when the validation function returns false    timeText: ‘Not a valid time.  Must be in the format "12:34 PM".‘,    // vtype Mask property: The keystroke filter mask    timeMask: /[\d\s:amp]/i});

自訂校正器建立好之後，表單欄位就可以通過vtype配置來調用：

{    fieldLabel: ‘Last Login Time‘,    name: ‘loginTime‘,    vtype: ‘time‘}

Handling Data 處理資料Submitting a Form 如何提交表單

最簡單的提交資料到伺服器端的辦法就是設定BasicForm的url配置，因為Form Panel封裝了BasicForm，這個url直接配置給Form Panel亦可，它會透傳給BasicForm的。

Ext.create(‘Ext.form.Panel‘, {    ...    url: ‘add_user‘,    items: [        ...    ]});

BasicForm的submit方法可以把資料提交到配置的url上：

Ext.create(‘Ext.form.Panel‘, {    ...    url: ‘add_user‘,    items: [        ...    ],    buttons: [        {            text: ‘Submit‘,            handler: function() {                var form = this.up(‘form‘).getForm(); // get the basic form                if (form.isValid()) { // make sure the form contains valid data before submitting                    form.submit({                        success: function(form, action) {                           Ext.Msg.alert(‘Success‘, action.result.msg);                        },                        failure: function(form, action) {                            Ext.Msg.alert(‘Failed‘, action.result.msg);                        }                    });                } else { // display error alert if the data is invalid                    Ext.Msg.alert(‘Invalid Data‘, ‘Please correct form errors.‘)                }            }        }    ]});

上面的例子中，button配置了一個處理函數用來處理表單提交，處理函數中做了下面幾個動作：

1. 首先找到對BasicForm的引用
2. 提交之前調用了isValid方法確保每個表單欄位都已經填寫正確
3. 最後調用submit方法，並傳遞了兩個回呼函數success和failure，在這兩個回呼函數的參數中，action.result可以引用到伺服器端返回JSON的解析後的對象

像例子中的表單提交，期望伺服器端返回的值，應該像這樣：

1

{ "success": true, "msg": "User added successfully" }

Binding a Form to a Model 如何綁定表單和模型

ExtJS中，模型用來定義各種資料，也可以載入和儲存資料到伺服器。例如一個User模型需要定義User的欄位，同時也可以設定代理用來載入和儲存資料：

Ext.define(‘User‘, {    extend: ‘Ext.data.Model‘,    fields: [‘firstName‘, ‘lastName‘, ‘birthDate‘],    proxy: {        type: ‘ajax‘,        api: {            read: ‘data/get_user‘,            update: ‘data/update_user‘        },        reader: {            type: ‘json‘,            root: ‘users‘        }    }});

有關模型的更多內容請查看<ExtJS 4 資料(包)詳解>

資料可以通過loadRecord方法直接從Model載入進入Form Panel：

Ext.ModelMgr.getModel(‘User‘).load(1, { // load user with ID of "1"    success: function(user) {        userForm.loadRecord(user); // when user is loaded successfully, load the data into the form    }});

最後，代替submit方法，可以使用BasicForm的updateRecord方法更新form綁定的model，然後用Model的save方法儲存資料：

Ext.create(‘Ext.form.Panel‘, {    ...    url: ‘add_user‘,    items: [        ...    ],    buttons: [        {            text: ‘Submit‘,            handler: function() {                var form = this.up(‘form‘).getForm(), // get the basic form                    record = form.getRecord(); // get the underlying model instance                if (form.isValid()) { // make sure the form contains valid data before submitting                    form.updateRecord(record); // update the record with the form data                    record.save({ // save the record to the server                        success: function(user) {                            Ext.Msg.alert(‘Success‘, ‘User saved successfully.‘)                        },                        failure: function(user) {                            Ext.Msg.alert(‘Failure‘, ‘Failed to save user.‘)                        }                    });                } else { // display error alert if the data is invalid                    Ext.Msg.alert(‘Invalid Data‘, ‘Please correct form errors.‘)                }            }        }    ]});

Layouts 表單布局

ExtJS應用布局管理組件的大小和位置，Form Panel可以應用任何Container Layout，有關布局的更多內容請查看<ExtJS 4 布局和容器>

例如橫著拜訪表單欄位可以應用HBox布局：

Ext.create(‘Ext.form.Panel‘, {    renderTo: Ext.getBody(),    title: ‘User Form‘,    height: 100,    width: 515,    defaults: {        xtype: ‘textfield‘,        labelAlign: ‘top‘,        padding: 10    },    layout: {        type: ‘hbox‘    },    items: [        {            fieldLabel: ‘First Name‘,            name: ‘firstName‘        },        {            fieldLabel: ‘Last Name‘,            name: ‘lastName‘        },        {            xtype: ‘datefield‘,            fieldLabel: ‘Date of Birth‘,            name: ‘birthDate‘        }    ]});

ExtJS 4 表單