实用ExtJS教程100例-010：ExtJS Form异步加载和提交数据

ExtJS Form 为我们提供了两个方法：load 和 submit，分别用来加载和提交数据，这两个方法都是异步的。

系列ExtJS教程持续更新中，点击查看>>最新ExtJS教程目录

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

在线示例

点击查看在线示例，示例截图如下：



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



点击提交按钮：



本文还发布在了ExtJS教程网站起飞网上面，如果转载请保留本段声明，谢谢合作。

系列ExtJS教程持续更新中，点击查看>>最新ExtJS教程目录