正文

掌握ExtJS表单布局：轻松实现高效数据采集与展示

/0 浏览量
0411

在Web开发中，表单是用户与网站交互的重要手段，它不仅用于数据采集，还用于数据展示。ExtJS作为一款流行的JavaScript库，提供了丰富的组件和功能，使得开发者能够轻松实现各种复杂的表单布局。本文将详细介绍如何掌握ExtJS表单布局，以便高效地进行数据采集与展示。

ExtJS表单简介

ExtJS表单是由一系列表单控件组成的，如文本框、下拉菜单、单选按钮、复选框等。这些控件可以灵活组合，形成各种布局，以满足不同的设计需求。通过使用ExtJS表单，开发者可以创建美观、易用的表单界面，提升用户体验。

创建基本表单

要创建一个基本的ExtJS表单，首先需要在HTML文件中引入ExtJS库。以下是一个简单的示例：

<!DOCTYPE html>
<html>
<head>
    <title>ExtJS表单示例</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/extjs@6.2.0/build/classic/theme-classic/resources/css/theme-classic-all.css">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/extjs@6.2.0/build/ext-all.js"></script>
</head>
<body>
    <div id="myForm"></div>
    <script type="text/javascript">
        Ext.onReady(function() {
            Ext.create('Ext.form.Panel', {
                title: '用户信息表单',
                width: 400,
                bodyPadding: 10,
                renderTo: 'myForm',
                items: [{
                    xtype: 'textfield',
                    fieldLabel: '姓名',
                    name: 'name'
                }, {
                    xtype: 'textfield',
                    fieldLabel: '邮箱',
                    name: 'email'
                }]
            });
        });
    </script>
</body>
</html>

在上面的代码中，我们创建了一个包含两个文本框的表单，用于采集用户姓名和邮箱信息。

表单布局

ExtJS提供了多种布局方式，如表单布局（FormLayout）、网格布局（GridLayout）等。以下是一些常见的布局方式：

表单布局（FormLayout）

表单布局是一种常用的布局方式，它将表单控件垂直排列。以下是一个使用表单布局的示例：

Ext.create('Ext.form.Panel', {
    title: '用户信息表单',
    width: 400,
    bodyPadding: 10,
    renderTo: 'myForm',
    layout: 'form',
    items: [{
        xtype: 'textfield',
        fieldLabel: '姓名',
        name: 'name'
    }, {
        xtype: 'textfield',
        fieldLabel: '邮箱',
        name: 'email'
    }]
});

网格布局（GridLayout）

网格布局将表单控件排列成行和列的形式。以下是一个使用网格布局的示例：

Ext.create('Ext.form.Panel', {
    title: '用户信息表单',
    width: 400,
    bodyPadding: 10,
    renderTo: 'myForm',
    layout: 'column',
    items: [{
        columnWidth: 0.5,
        xtype: 'textfield',
        fieldLabel: '姓名',
        name: 'name'
    }, {
        columnWidth: 0.5,
        xtype: 'textfield',
        fieldLabel: '邮箱',
        name: 'email'
    }]
});

表单验证

在ExtJS中，表单验证是确保用户输入正确数据的重要手段。以下是一些常用的验证方式：

必填验证

xtype: 'textfield',
fieldLabel: '姓名',
name: 'name',
allowBlank: false

邮箱验证

xtype: 'textfield',
fieldLabel: '邮箱',
name: 'email',
vtype: 'email'

正则表达式验证

xtype: 'textfield',
fieldLabel: '电话',
name: 'phone',
vtype: 'phone',
regex: /^[0-9]{11}$/,
maskRe: /[0-9]/,
mask: '99999999999'

表单提交

在ExtJS中，可以通过以下方式提交表单数据：

Ext.getCmp('myForm').getForm().submit({
    url: 'your-server-endpoint',
    success: function(form, action) {
        // 处理成功情况
    },
    failure: function(form, action) {
        // 处理失败情况
    }
});

总结

掌握ExtJS表单布局可以帮助开发者轻松实现高效的数据采集与展示。通过本文的介绍，相信你已经对ExtJS表单有了更深入的了解。在实际开发过程中，可以根据具体需求选择合适的布局方式和验证方式，提升用户体验。

-- 展开阅读全文 --