實用ExtJS教程100例-010：ExtJS Form異步加載和提交數據

ExtJS Form 為我們提供了兩個方法：load 和 submit，分別用來加載和提交數據，這兩個方法都是異步的。

Form 加載

var formCmp = this.up("form");
formCmp.setLoading();
formCmp.load({
    url: "FormLoadDataServer",
    params: {
        id: ""  //可能需要告訴服務器要加載數據的id，或者一些其它參數
    },
    success: function (form, action) {
        formCmp.setLoading(false);
    },
    failure: function (form, action) {
        formCmp.setLoading(false);
        Ext.Msg.alert("失敗", action.result.message);
    }
});

在這段代碼中，首先獲得form組件，然后通過setLoading()方法顯示遮罩層，最后調用load方法加載數據。

load方法的參數是一個配置對象

• url：加載數據的地址
• params：請求數據用到的參數
• success：加載到數據以后的回調方法，這個方法會在數據綁定以后執行
• failure：加載數據失敗時的回調方法

Form 提交

var formCmp = this.up("form");
if (!formCmp.isValid()) return;

formCmp.submit({
    url: "FormSubmitDataServer",
    success: function (form, action) {
        Ext.Msg.alert("提示", action.result.message);
    },
    failure: function (form, action) {
        Ext.Msg.alert("失敗", action.result.message);
    }
});

form的提交方法是通過submit方法完成的，這個方法和load方法相似，都需要一個配置對象，這個對象在執行請求時候用到。

在線示例

示例截圖如下：

當點擊加載數據按鈕的時候：

點擊提交按鈕：