『ExtJS』表单（一）常用表单控件及内置验证

最新推荐文章于 2021-06-15 14:50:11 发布

孤灯下的倩影

最新推荐文章于 2021-06-15 14:50:11 发布

阅读量743

点赞数

分类专栏： Ext.js 文章标签： ExtJS表单一常用表单控件及内置验证

Ext.js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

几点说明

关于ExtJS的表单，我打算分为三个部分来写
1. 常用表单控件及内置验证 —— 这里主要是JS代码
2. 表单行为与Asp.NET页面的消息回复 —— 这里既有JS代码，与有C#代码，我主要是使用Asp.NET来写程序
3. 表单控件的自定义验证与事件侦听
其实还应该有一块是关于ExtJS中「代理」的使用的，我打算单独来写。
这里使用的代码不可以直接复制运行，因为我们的环境多多少少会有一些不同，所以代码部分仅供参考。

代码运行结果

代码

IDE: VS2010 SP1

ExtJS 版本：3.4.0

操作系统：Windows 7 32位旗舰版

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>『ExtJS』表单（一）常用表单控件及内置验证</title>
    <!-- Common Libs -->
    <link href="../Common/ext-all.css" rel="stylesheet" type="text/css" />
    <script src="../Common/ext-base-debug.js" type="text/javascript"></script>
    <script src="../Common/ext-all-debug-w-comments.js" type="text/javascript"></script>
</head>
<body>
    <script type="text/javascript">
        Ext.onReady(function () {
            // Provides attractive and customizable tooltips for any element. 
            Ext.QuickTips.init();

            var classesStore = new Ext.data.SimpleStore({
                fields: ['id', 'class'],
                data: [['0', 'ExtJS 3.3.0'], ['1', 'ExtJS 3.4.0'], ['2', 'ExtJS 4.0']]
            });

            var firstForm = new Ext.FormPanel({
                // Specify the id of the element, a DOM element or an existing Element that this component will be rendered into.
                renderTo: document.body,
                title: '『ExtJS』表单（一）常用表单控件及内置验证 —— http://www.cnblogs.com/sitemanager/',
                url: '../jsonresponse.aspx',
                autoWidth: 'true',
                items: [{
                    xtype: 'textfield',
                    fieldLabel: '文章标题',
                    name: 'title',
                    // Specify false to validate that the value's length is > 0 (defaults to true)
                    allowBlank: 'false',
                    width: 200,
                    // A config object containing one or more event handlers to be added to this object during initialization.
                    listeners: {
                        specialkey: function (f, e) {
                            if (e.getKey() == e.ENTER) {
                                Ext.Msg.alert('Listen Success!',e.getKey);
                            }
                        }
                    }
                }, {
                    xtype: 'textfield',
                    fieldLabel: '作者',
                    name: 'author',
                    width: 200
                }, {
                    xtype: 'textfield',
                    fieldLabel: '邮箱',
                    name: 'email',
                    // The error text to display when the email validation function returns false. 
                    vtype: 'emailText',
                    allowBlank: 'true',
                    width: 200
                }, {
                    xtype: 'textfield',
                    fieldLabel: '主页',
                    name: 'site',
                    // The error text to display when the url validation function returns false. 
                    vtype: 'urlText',
                    allowBlank: 'true',
                    width: 200
                }, {
                    xtype: 'numberfield',
                    fieldLabel: '发布次数',
                    name: 'publishNumber',
                    width: 200
                }, {
                    xtype: 'combo',
                    fieldLabel: '文章分类',
                    name: 'class',
                    /* Acceptable values are: 
                    *      'remote' : Default 
                    *          Automatically loads the store the first time the trigger is clicked. If you do not want the store to be automatically loaded the first time the trigger is clicked, set to 'local' and manually load the store. To force a requery of the store every time the trigger is clicked see lastQuery.
                    *      'local' : 
                    *          ComboBox loads local data
                    */
                    mode: 'local',
                    // The data source to which this combo is bound (defaults to undefined).
                    store: classesStore,
                    // The underlying data field name to bind to this ComboBox
                    displayField: 'class',
                    width: 200
                }, {
                    xtype: 'datefield',
                    fieldLabel: '发布日期',
                    name: 'publishDate',
                    // An array of days to disable, 0 based (defaults to null).
                    // disable Sunday and Saturday:
                    disabledDays: [0, 6],
                    width: 200
                }, {
                    xtype: 'timefield',
                    fieldLabel: '发布时间',
                    increment: 15,
                    name: 'publishTime',
                    width: 200
                }, {
                    xtype: 'radio',
                    boxLabel: '随笔',
                    fieldLabel: '文章类型',
                    // Radio grouping is handled automatically by the browser if you give each radio in a group the same name.
                    name: 'essayClass',
                    width: 200
                }, {
                    xtype: 'radio',
                    boxLabel: '文章',
                    name: 'essayClass',
                    width: 200
                }, {
                    xtype: 'checkbox',
                    fieldLabel: '发布到首页',
                    name: 'publishToSiteHome',
                    width: 200
                }, {
                    xtype: 'textarea',
                    fieldLabel: '摘要',
                    name: 'abstract',
                    width: 500,
                    allowBlank: 'true',
                    autoScroll: 'true',
                    height: 30
                }, {
                    // Provides a lightweight HTML Editor component.
                    xtype: 'htmleditor',
                    fieldLabel: '正文',
                    name: 'content',
                    width: 500,
                    allowBlank: 'false',
                    autoScroll: 'true',
                    height: 300
                }]
            });
        });
    </script>
</body>
</html>

代码说明

代码中的关键配置项我已经注释好了，注释的内容来自官方API文档，所以请对其正确性放心。
以下是我个人对这段代码的解释，仅供参考……
1. Ext.QuickTips.init(); 这个是用于配合验证的，添加上这句话之后，就可以实现所谓的「气泡」提示了。
2. var classesStore = new Ext.data.SimpleStore 这里我实例化了一个数据源（请暂且这么认为），目的是在之后给Combox绑定下拉数据项。
3. url: '../jsonresponse.aspx' 这个 url 是指示将form提交到什么地方，又从什么地方获取到回复。
4. 表单的常用控件，用于标注在 xtype 处：
  1. 文本框：textfield
  2. 数字文本框：numberfield
  3. 下拉列表：combo
  4. 单选按钮：radio —— 这里注意，我们可以指定多个同名的radio,从而达到从多个值中只能选择一个的效果
  5. 复选框：checkbox
  6. 日期选择：datefield
    1. disabledDays 配置项表示不可选择的日期，值为「0~6」，分别对应「周日~周六」
  7. 时间选择：timefield
    1. increment 配置顶表示间隔时间
  8. 文本域：textarea 或 htmleditor
    1. textarea 是纯文本编辑
    2. htmleditor 是富文本编辑器
5. vtype 这个是验证用的，常用的是 email url alpha(字符型)
6. listeners 是控件事件的侦听器，有关内容请见官方文档，之后我也会整理出一个最简单的使用方法