实用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方法相似，都需要一个配置对象，这个对象在执行请求时候用到。

在线示例

示例截图如下：

当点击加载数据按钮的时候：

点击提交按钮：