Ext FormPanel 独孤九剑-第九式

 

function myForm_1() {
    Ext.QuickTips.init();
    var form = new Ext.form.FormPanel({
                defaultType : 'textfield',
                labelAlign : 'right',
                title : 'form',
                labelWidth : 50,
                frame : true,
                width : 220,
                items : [new Ext.form.TextField({
                    name : "userName",
                    fieldLabel : '文本框',
                    inputType : "text",
                    allowBlank : false,
                    emptyText : "请正确输入数据",
                    maxLength : 10,
                    maxLengthText : "请不要超过10个字符",
                    invalidText : "invalidText：只能够输入数字",
                    regex : /^\d+$/,
                    regexText : "只能够输入数字",
                    validationEvent : "click"
                        // validator:function(){Ext.Msg.alert("提示信息","只能够输入数字");}
                    })],
                buttons : [{
                            text : '按钮',
                            handler : function() {
                                Ext.Msg.alert("提示信息", "Hello,你好哈.");
                            }
                        }]
            });
    form.render("form");
}

function myForm_2() {
    var form1 = new Ext.form.FormPanel({
                width : 350,
                frame : true,
                renderTo : "form1",
                title : "FormPanel",
                bodyStyle : "padding:5px 5px 0",
                defaults : {
                    width : 200,
                    xtype : "textfield"
                },
                items : [{
                            fieldLabel : "UserName",
                            name : "user",
                            id : "user"
                        }, {
                            fieldLabel : "PassWord",
                            inputType : "password",
                            name : "pass",
                            id : "pass"
                        }],
                buttons : [{
                            text : "确定"
                        }, {
                            text : "取消",
                            handler : function() {
                                var svalue = "用户名:"
                                        + Ext.get('user').getValue();
                                svalue += ",密码:" + Ext.get('pass').getValue();
                                Ext.Msg.alert("提示信息", svalue);
                            }
                        }]
            });
}

function myForm_3() {
    var form1 = new Ext.form.FormPanel({
                width : 850,
                frame : true,
                renderTo : "form1",
                title : "FormPanel",
                bodyStyle : "padding:5px 5px 0",
                defaults : {
                    width : 200,
                    xtype : "textfield"
                },
                items : [{
                            xtype : "fieldset",
                            checkboxToggle : true,// 关键参数，其他和以前的一样
                            checkboxName : "个人信息",
                            title : "选填信息",
                            defaultType : 'textfield',
                            width : 830,
                            autoHeight : true,// 使自适应展开排版
                            items : [{
                                        fieldLabel : "UserName",
                                        name : "user",
                                        anchor : "95%"// 330px-labelWidth剩下的宽度的95%，留下5%作为后面提到的验证错误提示
                                    }, {
                                        fieldLabel : "PassWord",
                                        inputType : "password",// 密码文本
                                        name : "pass",
                                        anchor : "95%"
                                    }]
                        }, {
                            xtype : 'fieldset',
                            title : '个人信息',
                            collapsible : true,
                            autoHeight : true,
                            width : 830,
                            defaults : {
                                width : 150
                            },
                            defaultType : 'textfield',
                            items : [{
                                        fieldLabel : '爱好',
                                        name : 'hobby',
                                        value : 'www.cnblogs.com'
                                    }, {
                                        xtype : "combo",
                                        name : 'sex',
                                        store : ["男", "女", "保密"],
                                        fieldLabel : "性别",
                                        emptyText : '请选择性别.'
                                    }, {
                                        xtype : "datefield",
                                        fieldLabel : "生日",
                                        anchor : "99%"
                                    }]
                        }],
                buttons : [{
                            text : "确定"
                        }, {
                            text : "取消"
                        }]
            });
}
function myForm_4() {
    Ext.QuickTips.init();
    Ext.form.Field.prototype.msgTarget = 'side';// 提示的方式，枚举值为"qtip","title","under","side",id(元素id)
    var form1 = new Ext.form.FormPanel({
                width : 350,
                frame : true,
                renderTo : "form1",
                labelWidth : 80,
                title : "FormPanel",
                bodyStyle : "padding:5px 5px 0",
                defaults : {
                    width : 150,
                    xtype : "textfield",
                    inputType : "password"
                },
                items : [{
                            fieldLabel : "不能为空",
                            allowBlank : false,// false则不能为空，默认为true
                            blankText : "不能为空，请填写",// 错误提示信息，默认为This field is
                            vtype : "email",// 'email'只能有效的Email,'alpha'只能输入字母,'alphanum'只能输入数字和字母,'url'只能输入url
                            vtypeText : "不是有效的邮箱地址",// 错误提示信息,默认值我就不说了
                            id : "blanktest",
                            anchor : "90%"
                        }]
            });
}
function myForm_5() {
    Ext.QuickTips.init();
    Ext.form.Field.prototype.msgTarget = 'side';// 提示的方式，枚举值为"qtip","title","under","side",id(元素id)

    // 先用Ext.apply方法添加自定义的password验证函数（也可以取其他的名字）
    Ext.apply(Ext.form.VTypes, {
                password : function(val, field) {// val指这里的文本框值，field指这个文本框组件，大家要明白这个意思
                    if (field.confirmTo) {// confirmTo是我们自定义的配置参数，一般用来保存另外的组件的id值
                        var pwd = Ext.get(field.confirmTo);// 取得confirmTo的那个id的值
                        return (val == pwd.getValue());
                    }
                    return true;
                }
            });

    var form1 = new Ext.form.FormPanel({
                width : 350,
                frame : true,
                renderTo : "form1",
                labelWidth : 80,
                title : "FormPanel",
                bodyStyle : "padding:5px 5px 0",
                defaults : {
                    width : 150,
                    xtype : "textfield",
                    inputType : "password"
                },
                items : [{
                            fieldLabel : "密码",
                            id : "pass1",
                            anchor : "90%"
                        }, {
                            fieldLabel : "确认密码",
                            id : "pass2",
                            vtype : "password",// 自定义的验证类型
                            vtypeText : "两次密码不一致！",
                            confirmTo : "pass1",// 要比较的另外一个的组件的id
                            anchor : "90%"
                        }]
            });
}
function myForm_6() {
    Ext.QuickTips.init();
    Ext.form.Field.prototype.msgTarget = 'side';
    var combo = new Ext.form.ComboBox({
                store : ['湖北', '江西', '安徽'],
                // emptyText : '请选择一个省份.',
                applyTo : 'combo'
            });
}
function myForm_7() {
    var ExtSelect = new Ext.form.ComboBox({
        transform : "select",// html中的id
        width : 80
            // 宽度
        });
}
function myForm_8() {
    Ext.QuickTips.init();
    var myform = new Ext.FormPanel({
                frame : true,
                width : 600,
                layout : "form",
                labelWidth : 50,
                title : "htmleditor简单示例",
                labelAlign : "top",// items中的标签的位置
                renderTo : Ext.getBody(),
                items : [{
                            xtype : "htmleditor",
                            id : "he",
                            fieldLabel : "编辑器",
                            anchor : "99%"
                        }]
            });
}
Ext.onReady(myForm_8);