正文

掌握EXTJS表单提交技巧，轻松实现数据交互与验证

/0 浏览量
0422

在EXTJS中，表单是用户与系统交互的主要界面元素之一。掌握EXTJS表单提交的技巧，可以让你更高效地实现数据交互与验证。本文将详细讲解EXTJS表单提交的过程，以及如何进行数据验证，让你轻松应对各种业务场景。

一、EXTJS表单提交概述

EXTJS表单提交可以分为两种方式：同步提交和异步提交。

  1. 同步提交：将表单数据提交到服务器，等待服务器处理完成后，再执行后续操作。这种方式适用于数据量不大，且对实时性要求不高的场景。

  2. 异步提交：将表单数据异步提交到服务器，不等待服务器处理完成即可继续执行后续操作。这种方式适用于数据量较大，或对实时性要求较高的场景。

二、EXTJS表单同步提交

以下是一个EXTJS表单同步提交的示例代码：

// 创建表单
Ext.create('Ext.form.Panel', {
    title: '同步提交表单',
    width: 300,
    bodyPadding: 10,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: '用户名',
        name: 'username'
    }, {
        xtype: 'textfield',
        fieldLabel: '密码',
        inputType: 'password',
        name: 'password'
    }],
    buttons: [{
        text: '提交',
        handler: function() {
            var form = this.up('form').getForm();
            if (form.isValid()) {
                form.submit({
                    url: 'your-server-url', // 服务器地址
                    success: function(form, action) {
                        Ext.Msg.alert('成功', '提交成功！');
                    },
                    failure: function(form, action) {
                        Ext.Msg.alert('失败', '提交失败：' + action.response.statusText);
                    }
                });
            }
        }
    }]
});

在上面的示例中，我们创建了一个包含用户名和密码字段的表单。点击“提交”按钮后，将执行同步提交操作。如果服务器处理成功，则弹出提示“提交成功！”，否则弹出提示“提交失败：”。

三、EXTJS表单异步提交

以下是一个EXTJS表单异步提交的示例代码：

// 创建表单
Ext.create('Ext.form.Panel', {
    title: '异步提交表单',
    width: 300,
    bodyPadding: 10,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: '用户名',
        name: 'username'
    }, {
        xtype: 'textfield',
        fieldLabel: '密码',
        inputType: 'password',
        name: 'password'
    }],
    buttons: [{
        text: '提交',
        handler: function() {
            var form = this.up('form').getForm();
            if (form.isValid()) {
                form.submit({
                    url: 'your-server-url', // 服务器地址
                    method: 'POST',
                    async: false, // 设置为同步
                    success: function(form, action) {
                        Ext.Msg.alert('成功', '提交成功！');
                    },
                    failure: function(form, action) {
                        Ext.Msg.alert('失败', '提交失败：' + action.response.statusText);
                    }
                });
            }
        }
    }]
});

在上面的示例中，我们通过设置async: false来将异步提交变为同步提交。在实际应用中，你可以根据需要设置async属性的值。

四、EXTJS表单数据验证

EXTJS提供了丰富的数据验证方式，包括：

  1. 内置验证器：如长度验证器、邮箱验证器、数字验证器等。
  2. 自定义验证器：通过编写自定义函数进行验证。

以下是一个EXTJS表单数据验证的示例代码：

// 自定义验证器
Ext.apply(Ext.form.field.VTypes, {
    password: function(value) {
        return value === this.up('form').down('#password').getValue();
    },
    passwordText: '两次输入的密码不一致，请重新输入。'
});

// 创建表单
Ext.create('Ext.form.Panel', {
    title: '数据验证',
    width: 300,
    bodyPadding: 10,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: '用户名',
        name: 'username'
    }, {
        xtype: 'textfield',
        fieldLabel: '密码',
        inputType: 'password',
        name: 'password',
        vtype: 'password'
    }, {
        xtype: 'textfield',
        fieldLabel: '确认密码',
        inputType: 'password',
        name: 'confirmPassword',
        vtype: 'password'
    }],
    buttons: [{
        text: '提交',
        handler: function() {
            var form = this.up('form').getForm();
            if (form.isValid()) {
                // ...执行提交操作
            }
        }
    }]
});

在上面的示例中，我们使用自定义验证器来确保两次输入的密码一致。

通过以上内容，相信你已经掌握了EXTJS表单提交的技巧，能够轻松实现数据交互与验证。在实际开发中，根据业务需求选择合适的提交方式和验证方式，让你的EXTJS应用更加高效、稳定。

-- 展开阅读全文 --