Extjs 提交表单

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配置了一个处理函数用来处理表单提交，处理函数中做了下面几个动作：

1. 首先找到对BasicForm的引用
2. 提交之前调用了isValid方法确保每个表单字段都已经填写正确
3. 最后调用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'
        }
    }
}); 

	有关模型的更多内容请查看<>


	数据可以通过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方式。

 : 

	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  property, or if undefined default to the configured ..


	For example:

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