Extjs 提交表单（转载）

最新推荐文章于 2022-05-14 11:25:47 发布

转载最新推荐文章于 2022-05-14 11:25:47 发布 · 48 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Joetao/articles/4435004.html

文章标签：

#json

本文详细介绍了在ExtJS框架中如何通过FormPanel提交表单数据到服务器，如何将表单绑定到Model进行数据交互，以及如何利用Store进行数据的CRUD操作。涵盖了从基本的表单提交方法到更高级的数据绑定和管理策略。

转自：http://blog.chinaunix.net/uid-11898547-id-3788482.html

1、

Submitting a Form 如何提交表单

最简单的提交数据到服务器端的办法就是设置BasicForm的url配置，因为Form Panel封装了BasicForm，这个url直接配置给Form Panel亦可，它会透传给BasicForm的。

Ext.create('Ext.form.Panel', {
    ...
    url: 'add_user',
    items: [
        ...
    ]
});

BasicForm的submit方法可以把数据提交到配置的url上：

Ext.create('Ext.form.Panel', {
    ...
    url: 'add_user',
    items: [
        ...
    ],
    buttons: [
        {
            text: 'Submit',
            handler: function() {
                var form = this.up('form').getForm(); // get the basic form
                if (form.isValid()) { // make sure the form contains valid data before submitting
                    form.submit({
                        success: function(form, action) {
                           Ext.Msg.alert('Success', action.result.msg);
                        },
                        failure: function(form, action) {
                            Ext.Msg.alert('Failed', action.result.msg);
                        }
                    });
                } else { // display error alert if the data is invalid
                    Ext.Msg.alert('Invalid Data', 'Please correct form errors.')
                }
            }
        }
    ]
});

上面的例子中，button配置了一个处理函数用来处理表单提交，处理函数中做了下面几个动作：

首先找到对BasicForm的引用
提交之前调用了isValid方法确保每个表单字段都已经填写正确
最后调用submit方法，并传递了两个回调函数success和failure，在这两个回调函数的参数中，action.result可以引用到服务器端返回JSON的解析后的对象

像例子中的表单提交，期望服务器端返回的值，应该像这样：

{ "success": true, "msg": "User added successfully" } 

2、

Binding a Form to a Model 如何绑定表单和模型

ExtJS中，模型用来定义各种数据，也可以加载和保存数据到服务器。例如一个User模型需要定义User的字段，同时也可以设置代理用来加载和保存数据：

Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: ['firstName', 'lastName', 'birthDate'],
    proxy: {
        type: 'ajax',
        api: {
            read: 'data/get_user',
            update: 'data/update_user'
        },
        reader: {
            type: 'json',
            root: 'users'
        }
    }
});

有关模型的更多内容请查看<ExtJS 4 数据(包)详解>

数据可以通过loadRecord方法直接从Model加载进入Form Panel：

Ext.ModelMgr.getModel('User').load(1, { // load user with ID of "1"
    success: function(user) {
        userForm.loadRecord(user); // when user is loaded successfully, load the data into the form
    }
});

最后，代替submit方法，可以使用BasicForm的updateRecord方法更新form绑定的model，然后用Model的save方法保存数据：

Ext.create('Ext.form.Panel', {
    ...
    url: 'add_user',
    items: [
        ...
    ],
    buttons: [
        {
            text: 'Submit',
            handler: function() {
                var form = this.up('form').getForm(), // get the basic form
                    record = form.getRecord(); // get the underlying model instance
                if (form.isValid()) { // make sure the form contains valid data before submitting
                    form.updateRecord(record); // update the record with the form data
                    record.save({ // save the record to the server
                        success: function(user) {
                            Ext.Msg.alert('Success', 'User saved successfully.')
                        },
                        failure: function(user) {
                            Ext.Msg.alert('Failure', 'Failed to save user.')
                        }
                    });
                } else { // display error alert if the data is invalid
                    Ext.Msg.alert('Invalid Data', 'Please correct form errors.')
                }
            }
        }
    ]
});

3、 使用store提交。

如果使用ajax方式。
api : Object

Specific urls to call on CRUD action methods "create", "read", "update" and "destroy". Defaults to:

api: { create : undefined, read : undefined, update : undefined, destroy : undefined }

The url is built based upon the action being executed [create|read|update|destroy] using the commensurate api property, or if undefined default to the configured Ext.data.Store.url.

For example:

api: { create : '/controller/new', read : '/controller/load', update : '/controller/update', destroy : '/controller/destroy_action' }

转载于:https://www.cnblogs.com/Joetao/articles/4435004.html