<ul id="yyig2"></ul>

<tfoot id="yyig2"><input id="yyig2"></input></tfoot>

<strike id="yyig2"><menu id="yyig2"></menu></strike>

<ul id="yyig2"></ul>

夢幻之旅

DEBUG - 天道酬勤

:: 首頁 :: 新隨筆 :: 聯系 :: 聚合

:: 管理 ::

671 隨筆 :: 6 文章 :: 256 評論 :: 0 Trackbacks

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);

posted on 2008-11-09 00:26 HUIKK 閱讀(2159) 評論(3) 編輯收藏所屬分類: EXT

評論

# 如何刪除一個textFiled呀？ 2008-11-12 19:16 iii5

如何刪除一個textFiled呀？

用remove方法，刪不掉fieldLabel,怎么辦呢？回復更多評論

# re: Ext FormPanel 獨孤九劍-第九式 2008-11-12 22:27 惠萬鵬

@iii5
我也是菜鳥一只,剛學ext不久.以前沒有用過ext,不久的將來也不會用,只是想學一學它,以備將來使用而已. 回復更多評論

# re: Ext FormPanel 獨孤九劍-第九式 2008-11-27 22:34 lzb

搞得挺全的！學習中回復更多評論

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關文章: Funsion Charts 參數大全錯誤：缺少標識符字符串或數字的解決 Ext 繼承 Ext extend ext apply ext 繼承 ext grid 指定行顏色 Ext 二級聯動 Ext 帶提示信息的 textField Ext combox 中文排序

主站蜘蛛池模板：谢通门县| 曲水县| 白朗县| 南安市| 鸡泽县| 乐昌市| 喀喇沁旗| 喜德县| 新安县| 建始县| 图木舒克市| 绥中县| 资兴市| 永吉县| 霍邱县| 海盐县| 登封市| 合肥市| 信宜市| 大英县| 巴东县| 桦甸市| 汉阴县| 南乐县| 普洱| 海南省| 通州区| 田林县| 屏边| 湖南省| 台北市| 敦煌市| 木兰县| 海阳市| 吴川市| 宜州市| 平谷区| 游戏| 顺义区| 车致| 探索|

<tfoot id="iqci0"><input id="iqci0"></input></tfoot>

<strike id="iqci0"></strike>