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

时间:2023-03-08 17:25:53
实用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方法相似,都需要一个配置对象,这个对象在执行请求时候用到。

在线示例

示例截图如下:

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

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

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

点击提交按钮:

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