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

    在线示例

    示例截图如下:

    image

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

    image

    点击提交按钮:

    image

     

  • 相关阅读:
    Hive-拉链表
    JAVA-POI
    GreenPlum-数据存储目录迁移及常用操作
    CDH6 高版本hbase+solr实现二级索引
    GreenPlum执行gpfdist报错:libssl.so.1.0.0: cannot open shared object file: No such file or directory
    rasdaman介绍及安装
    博学谷-数据分析pandas
    博学谷-数据分析numpy
    博学谷-数据分析matplotlib
    python基础学习笔记
  • 原文地址:https://www.cnblogs.com/youring2/p/extjs-100-examples-form-load-and-submit.html
Copyright © 2011-2022 走看看