ExtJs表单示例（包含输入验证）-原创手记-慕课网

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单示例1</title>
    <meta charset="UTF-8">
    <title>Hello</title>
    <link href="Extjs/resources/css/ext-all.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="Extjs/ext-all-debug.js"></script>
    <script type="text/javascript" src="Extjs/locale/ext-lang-zh_CN.js"></script>
    <script type="text/javascript">
        Ext.onReady(function () {
            //Ext.Msg.alert('Hello窗口', 'hello');
            Ext.QuickTips.init(); //为组件提供提示信息功能，form的主要提示信息就是客户端验证的错误信息。
            Ext.form.Field.prototype.msgTarget = 'under'; //提示的显示方式
            var subriver = Ext.create('Ext.data.Store', {
                fields: ['subrivername', 'name'],
                data: [
                    {"subrivername": "r1", "name": "选项A"},
                    {"subrivername": "r2", "name": "选项B"},
                    {"subrivername": "r3", "name": "选项C"},
                    {"subrivername": "r4", "name": "选项D"}
                ]
            });
            var demoform = Ext.create('Ext.form.Panel', {
                title: '示例表单',
                bodyStyle: {//设置表单样式
                    background: '3232CD',
                    padding: '10px'
                },
                frame: true,//设置圆角边框
                heigth: 600,
                width: 800,
                margin: 20,
                layout: {type: 'auto', align: 'right'},
                buttonAlign: 'center',
                renderTo: 'myform',
                url: 'cccc',
                defaultType: 'textfield',
                defaults: {
                    labelWidth: 100,
                    allowBlank: true,
                    msgTarget: 'side',
                    pageSize: 4
                },
                items: [
                    {
                        xtype: 'container',
                        layout: 'hbox',
                        items: [
                            {
                                xtype: 'textfield',
                                fieldLabel: '用户名',
                                name: 'username',
                                allowBlank: false,
                                regex: /[\u4e00-\u9fa5]/,
                                regexText: '用户名只能为中文'
                            },
                            {
                                xtype: 'textfield',
                                fieldLabel: '密码',
                                name: 'password',
                                allowBlank: false
                            },
                            {
                                xtype: 'textfield',
                                fieldLabel: '邮箱',
                                name: 'email',
                                vtype: 'email'
                            }
                        ]
                    }, {
                        xtype: 'container',
                        layout: 'hbox',
                        items: [{
                            xtype: 'timefield',
                            fieldLabel: '时间',
                            name: 'thisTime'
                        }, {
                            xtype: 'datefield',
                            fieldLabel: '日期(年/月/日)',
                            format: 'Y-m-d',
                            name: 'thisDate'
                        }, {
                            xtype: "combobox",
                            fieldLabel: '下拉列表',
                            store: subriver,
                            queryMode: 'local',
                            displayField: 'name',
                            valueField: 'subrivername'
                        },
                        ]
                    }, {
                        xtype: 'container',
                        layout: 'hbox',
                        items: [{
                            xtype: 'numberfield',
                            fieldLabel: '幸运数字',
                            name: 'luckyNumber'
                        }, {
                            xtype: 'filefield',
                            fieldLabel: '上传文件',
                            name: 'upFile',
                            buttonText: '选择文件',
                            width: 300,
                            msgTarget: 'side'
                        }
                        ]
                    },
                    {
                        xtype: 'fieldset',
                        title: '可折叠选项卡组',
                        collapsible: true,  //可折叠
                        items: [{
                            xtype: 'checkboxgroup',
                            fieldLabel: '3列复选框',
                            columns: 3,
                            vertical: true,
                            items: [
                                {boxLabel: 'Item 1', name: 'a1', inputValue: '1'},
                                {boxLabel: 'Item 2', name: 'a2', inputValue: '2'},
                                {boxLabel: 'Item 3', name: 'a3', inputValue: '3'},
                                {boxLabel: 'Item 4', name: 'a4', inputValue: '4'},
                                {boxLabel: 'Item 5', name: 'a5', inputValue: '5'},
                                {boxLabel: 'Item 6', name: 'a6', inputValue: '6'}
                            ]
                        },
                            {
                                xtype: 'radiogroup',
                                fieldLabel: '3列单选框',
                                columns: 3,
                                vertical: true,
                                items: [
                                    {boxLabel: 'Item 1', name: 'r1', inputValue: '1'},
                                    {boxLabel: 'Item 2', name: 'r2', inputValue: '2', checked: true},
                                    {boxLabel: 'Item 3', name: 'r3', inputValue: '3'},
                                    {boxLabel: 'Item 4', name: 'r4', inputValue: '4'},
                                    {boxLabel: 'Item 5', name: 'r5', inputValue: '5'},
                                    {boxLabel: 'Item 6', name: 'r6', inputValue: '6'}
                                ]
                            }]
                    }, {
                        xtype: 'textarea',
                        fieldLabel: '描述',
                        name: 'describe'
                    }, {
                        xtype: 'htmleditor',
                        fieldLabel: '编辑器',
                        width: 550,
                        height: 220,
                        frame: true,
                        layout: 'fit',
                        enableColors: false,
                        enableAlignments: false,
                        autoFitErrors: true
                    },
                    {
                        xtype: 'button',
                        buttonAlign: "right",
                        text: '保存'
                    }
                ]
            });
            // 自定义数据模型
            var jsonpModel = Ext.define("jsonpModel", {
                extend: 'Ext.data.Model',
                fields: [{
                    name: 'userid',
                    type: 'string'
                }, {
                    name: 'username',
                    type: 'string'
                }, {
                    name: 'dateline',
                    type: 'string'
                }, {
                    name: 'title',
                    type: 'string'
                }]
            });
// 数据
            var myStore = Ext.create("Ext.data.Store", {
                model: 'jsonpModel',
                pageSize: 10,//配置每页显示记录数
                proxy: {
                    type: 'jsonp',
                    url: 'http://www.sencha.com/forum/topics-browse-remote.php',
                    reader: {
                        totalProperty: 'totalCount',
                        root: 'topics'
                    }
                },
                autoLoad: true
// 自动加载数据
            });
// 表格
            var myGrid = new Ext.grid.Panel({
                title:'示例表格',
                width:800,
                margin:20,
                renderTo:'mygrid',
                columns: [{
                    xtype: 'rownumberer',
                    text: '行号'
                }, {
                    text: '用户ID',
                    dataIndex: 'userid'
                }, {
                    text: '用户姓名',
                    dataIndex: 'username'
                }, {
                    text: '时间线',
                    dataIndex: 'dateline'
                }, {
                    text: '标题',
                    dataIndex: 'title'
                }],
                store: myStore,
                bbar: {// 在表格底部 配置分页
                    xtype: 'pagingtoolbar',
                    store: myStore,
                    displayInfo: true
                }
            });
//            var mywin = Ext.create('Ext.window.Window', {
//                title: '主窗口',
//                height: 1000,
//                width: 850,
//                maximizable: true,
//                minimizable: true,
//                layout: {type: 'auto', align: 'right'},
//                items: [demoform, myGrid]
//            });
//            mywin.show();
        });
    </script>
</head>
<body>
<!--
                表单常用标签
    form        Ext.FormPanel             表单面板
    checkbox    Ext.form.Checkbox         复选框
    combo       Ext.form.ComboBox         下拉列表
    datefield   Ext.form.DateField        日期类型
    field       Ext.form.Field
    fieldset    Ext.form.FieldSet         将表单内的相关元素分组，比如说把早餐和中餐的菜系分组，形成对比
    hidden      Ext.form.Hidden           隐藏域
    htmleditor  Ext.form.HtmlEditor       文本编辑域
    label       Ext.form.Label            标签
    numberfield Ext.form.NumberField      数字域
    radio       Ext.form.Radio            单选框
    textarea    Ext.form.TextArea         多行文本框
    textfield   Ext.form.TextField        单行文本框
    timefield   Ext.form.TimeField        时间类型
    trigger     Ext.form.TriggerField     类似事件的下拉框
-->
<!--
    Extjs表单验证包括空验证、用vtype格式进行简单的验证、高级自定义密码验证、使用正则表达式验证等等
   //放在onReady的function(){}中
   Ext.QuickTips.init(); //为组件提供提示信息功能，form的主要提示信息就是客户端验证的错误信息。
   Ext.form.Field.prototype.msgTarget='side'; //提示的方式，枚举值为: qtip-当鼠标移动到控件上面时显示提示;
                                                                      title-在浏览器的标题显示，但是测试结果是和qtip一样的;
                                                                      under-在控件的底下显示错误提示;
                                                                      side-在控件右边显示一个错误图标，鼠标指向图标时显示错误提示. 默认值;
                                                                      id-[element id]错误提示显示在指定id的HTML元件中
        ①用vtype格式进行简单的验证
        items:[
                {fieldLabel:"不能为空",
                 vtype:"email",//email格式验证
                 vtypeText:"不是有效的邮箱地址",//错误提示信息,默认值我就不说了
                 id:"blanktest",
                 anchor:"90%" }
               ]
          vtype的值可为:
         1.alpha //只能输入字母，无法输入其他（如数字，特殊符号等）
         2.alphanum//只能输入字母和数字，无法输入其他
         3.email//email验证，要求的格式是""
         4.url//url格式验证，格式为http://www.baidu.com
         ②高级自定义密码验证 ，自己编写自定义验证函数
         ③使用正则表达式验证(推荐),网络有很多可以用的列子
-->
<!--
     Window常用方法
     一、属性
        plain：布尔类型，true表示强制与背景色保持协调，默认值为false。
        resizable：布尔类型，用户是否可以调整窗体大小，默认值为true表示可以调整大小。
        maxinizable：布尔类型，true表示显示最大化按钮，默认值为false。
        maximized：布尔类型，true表示显示窗体时将窗体最大化，默认值为false。
        closable：布尔类型，true表示显示关闭按钮，默认值为true。
        bodyStyle：与边框的间距，如：bodyStyle:"padding:3px"。
        buttonAlign：窗体中button的对齐方式(left、center、right)，默认值为right。
        closeAction："close"释放窗体所占内存，"hide"隐藏窗体，建议使用"hide"。
     二、方法
        show：打开窗体。
        hide：隐藏窗体。
        close：关闭窗体。
     三、事件
        show：打开窗体时触法。
        hide：隐藏窗体时触法。
        close：关闭窗体时触法。
-->
</body>
    <div id="myform" ></div>
    <div id="mygrid"></div>
</html>