ExtJs最常用表单组件ComboBox、time、date

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录界面</title>
    <script typt="text/javascript" src="../ext/ext-all.js"></script>
    <link rel="stylesheet" href="../ext/resources/css/ext-all.css"/>
</head>
<body>
<div id="register"></div>
<script typt="text/jjavascript">
    Ext.onReady(function () {
        //注册一个数据模型
        Ext.regModel("jiGuanModel", {
            fields: [{
                name: 'jiGuanMingZi'
            }, {
                name: 'jiGuanZhi'
            }]
        });
        /*定义Combo的数据原*/
        var jiGuanStore = Ext.create("Ext.data.Store", {
            model: 'jiGuanModel',
            data: [{
                jiGuanMingZi: '云南省',
                jiGuanZhi: '1'
            }, {
                jiGuanMingZi: '甘肃省',
                jiGuanZhi: '2'
            }, {
                jiGuanMingZi: '江苏省',
                jiGuanZhi: '3'
            }, {
                jiGuanMingZi: '江西省',
                jiGuanZhi: '4'
            }, {
                jiGuanMingZi: '湖北省',
                jiGuanZhi: '5'
            }]
        });

        var login = new Ext.form.FormPanel({
            title: '用户注册',
            id: 'userLogin',
            renderTo: 'register',
            width: 500,
            height: 500,
            items: [{
                xtype: 'textfield',
                fieldLabel: '用户名',
                allowBlank: false, /*设置不能为空*/
                blankText: '用户名不能为空',
                emptyText: '请输入用户名',
                name: 'userName',
                msgTarget: 'side', /*错误提示，下方提示under*/
                regex: /^\d{3,10}$/, /*正则表达式,固定的数字，必须3到10位*/
                regexText: '用户名长度必须是3-10位的数字', /*正则表达式之后提示*/
                id: 'userName'
            }, {
                xtype: 'textfield',
                fieldLabel: '密码',
                inputType: 'password', /*密码黑色显示*/
                name: 'userPass',
                id: 'userPass'
            }, new Ext.form.field.Number({
                fieldLabel: '年龄',
                step: 3, /*步长*/
                hideTrigger: true, /*将后面的上下键隐藏*/
                allowDecimals: false, /*不用许出现小数点*/
                maxValue: 120,
                maxText: '年龄不能超过120',
                minValue: 0,
                minText: '年龄不能小于0'
            }), {
                xtype: 'numberfield', /*类型*/
                fieldLabel: '折扣'/*小数点后保留两位小数*/
            }, {
                xtype: 'radio',
                boxLabel: '男',
                name: 'sex',
                inputValue: 'man'
            }, {
                xtype: 'radio',
                boxLabel: '女',
                name: 'sex',
                inputValue: 'woman',
                handler: function (obj) {/*选择事件*/
                    /* alert(obj.inputValue);*/
                }
            }, {
                xtype: 'checkboxfield',
                boxLabel: '足球'
            }, {
                xtype: 'checkboxfield',
                boxLabel: '羽毛球'
            }, {
                xtype: 'checkboxfield',
                boxLabel: '兵乓球'
            }, {
                xtype: 'radiogroup',
                fieldLabel: '性别',
                columns: 2, /*设置列数*/
                items: [{
                    boxLabel: '男',
                    name: 'sex'
                }, {
                    boxLabel: '女',
                    name: 'sex'
                }]
            }, {
                xtype: 'checkboxgroup',
                fieldLabel: '爱好',
                columns: 3,
                items: [{
                    boxLabel: '篮球'
                }, {
                    boxLabel: '足球'
                }, {
                    boxLabel: '橄榄球'
                }]
            }, {
                xtype: 'combo',
                id: 'jiGuan',
                fieldLabel:'籍贯',
                store: jiGuanStore, /*数据源*/
                queryMode: 'local',
                ariggerAction: 'query',
                triggerAction:'all',
                displayField: 'jiGuanMingZi',
                valueField: 'jiGuanZhi'
            },{
                xtype:'timefield',
                id:'loginTime',
                fieldLabel:'登陆时间',
                maxValue:'19:00',
                maxText:'对不起，登陆时间不能晚于19点'
            },{
                xtype:'datefield',
                id:'loginDate',
                fieldLabel:'登陆日期',
/*
                readOnly:true,不希望用户输入
*/
                format:'Y-m-d'
            }],
            buttons: [{
                text: '登陆',
                handler:function(){
                    /*单击事件*/
                    alert(Ext.getCmp("jiGuan").getValue());
                }
            },
                {
                    text: '关闭'
                }]
        });

    });
</script>
</body>
</html>
ExtJs最常用表单组件ComboBox、time、date

猜你喜欢
