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

在线示例

点击查看在线示例,示例截图如下:

image

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

image

点击提交按钮:

image




本文转自齐师傅博客园博客,原文链接:http://www.cnblogs.com/youring2/p/extjs-100-examples-form-load-and-submit.html,如需转载请自行联系原作者
相关文章
|
JavaScript
Extjs Form 表单修改
Extjs修改分两种方法:1.前台直接加载;2.通过后台远程加载 1.直接加载:方法 form.getForm().loadRecord(); 应用时要求页面上已经存在页面中的所有数据,比如选中gridPanel一行,然后直接传递此行记录,到formPanel页面,可直接加载 2.后台加载:方法 form.getForm().load(); 应用时 传递一个参数到后台,然后远程取值,绑定。
1027 0
|
移动开发 开发框架 JavaScript
EasyUI与EXTjs有什么区别
EasyUI与EXTjs有什么区别
EasyUI与EXTjs有什么区别
|
JavaScript 程序员 前端开发