<strike id="w8kom"><input id="w8kom"></input></strike>

<strike id="w8kom"><input id="w8kom"></input></strike>

夢(mèng)幻之旅

DEBUG - 天道酬勤

:: 首頁(yè) :: 新隨筆 :: 聯(lián)系 :: 聚合

:: 管理 ::

671 隨筆 :: 6 文章 :: 256 評(píng)論 :: 0 Trackbacks

Ext FormPanel 獨(dú)孤九劍-第九式

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 : "請(qǐng)正確輸入數(shù)據(jù)",
                    maxLength : 10,
                    maxLengthText : "請(qǐng)不要超過(guò)10個(gè)字符",
                    invalidText : "invalidText：只能夠輸入數(shù)字",
                    regex : /^\d+$/,
                    regexText : "只能夠輸入數(shù)字",
                    validationEvent : "click"
                        // validator:function(){Ext.Msg.alert("提示信息","只能夠輸入數(shù)字");}
                    })],
                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,// 關(guān)鍵參數(shù)，其他和以前的一樣
                            checkboxName : "個(gè)人信息",
                            title : "選填信息",
                            defaultType : 'textfield',
                            width : 830,
                            autoHeight : true,// 使自適應(yīng)展開排版
                            items : [{
                                        fieldLabel : "UserName",
                                        name : "user",
                                        anchor : "95%"// 330px-labelWidth剩下的寬度的95%，留下5%作為后面提到的驗(yàn)證錯(cuò)誤提示
                                    }, {
                                        fieldLabel : "PassWord",
                                        inputType : "password",// 密碼文本
                                        name : "pass",
                                        anchor : "95%"
                                    }]
                        }, {
                            xtype : 'fieldset',
                            title : '個(gè)人信息',
                            collapsible : true,
                            autoHeight : true,
                            width : 830,
                            defaults : {
                                width : 150
                            },
                            defaultType : 'textfield',
                            items : [{
                                        fieldLabel : '愛(ài)好',
                                        name : 'hobby',
                                        value : 'www.cnblogs.com'
                                    }, {
                                        xtype : "combo",
                                        name : 'sex',
                                        store : ["男", "女", "保密"],
                                        fieldLabel : "性別",
                                        emptyText : '請(qǐng)選擇性別.'
                                    }, {
                                        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則不能為空，默認(rèn)為true
                            blankText : "不能為空，請(qǐng)?zhí)顚?/span>",// 錯(cuò)誤提示信息，默認(rèn)為This field is
                            vtype : "email",// 'email'只能有效的Email,'alpha'只能輸入字母,'alphanum'只能輸入數(shù)字和字母,'url'只能輸入url
                            vtypeText : "不是有效的郵箱地址",// 錯(cuò)誤提示信息,默認(rèn)值我就不說(shuō)了
                            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驗(yàn)證函數(shù)（也可以取其他的名字）
    Ext.apply(Ext.form.VTypes, {
                password : function(val, field) {// val指這里的文本框值，field指這個(gè)文本框組件，大家要明白這個(gè)意思
                    if (field.confirmTo) {// confirmTo是我們自定義的配置參數(shù)，一般用來(lái)保存另外的組件的id值
                        var pwd = Ext.get(field.confirmTo);// 取得confirmTo的那個(gè)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 : "確認(rèn)密碼",
                            id : "pass2",
                            vtype : "password",// 自定義的驗(yàn)證類型
                            vtypeText : "兩次密碼不一致！",
                            confirmTo : "pass1",// 要比較的另外一個(gè)的組件的id
                            anchor : "90%"
                        }]
            });
}
function myForm_6() {
    Ext.QuickTips.init();
    Ext.form.Field.prototype.msgTarget = 'side';
    var combo = new Ext.form.ComboBox({
                store : ['湖北', '江西', '安徽'],
                // emptyText : '請(qǐng)選擇一個(gè)省份

.',
                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簡(jiǎn)單示例",
                labelAlign : "top",// items中的標(biāo)簽的位置
                renderTo : Ext.getBody(),
                items : [{
                            xtype : "htmleditor",
                            id : "he",
                            fieldLabel : "編輯器",
                            anchor : "99%"
                        }]
            });
}
Ext.onReady(myForm_8);

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

評(píng)論

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

如何刪除一個(gè)textFiled呀？

用remove方法，刪不掉fieldLabel,怎么辦呢？回復(fù) 更多評(píng)論

# re: Ext FormPanel 獨(dú)孤九劍-第九式 2008-11-12 22:27 惠萬(wàn)鵬

@iii5
我也是菜鳥一只,剛學(xué)ext不久.以前沒(méi)有用過(guò)ext,不久的將來(lái)也不會(huì)用,只是想學(xué)一學(xué)它,以備將來(lái)使用而已. 回復(fù) 更多評(píng)論

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

搞得挺全的！學(xué)習(xí)中回復(fù) 更多評(píng)論

新用戶注冊(cè) 刷新評(píng)論列表


只有注冊(cè)用戶登錄后才能發(fā)表評(píng)論。




網(wǎng)站導(dǎo)航: 博客園 IT新聞 Chat2DB C++博客博問(wèn) 管理
相關(guān)文章: Funsion Charts 參數(shù)大全錯(cuò)誤：缺少標(biāo)識(shí)符字符串或數(shù)字的解決 Ext 繼承 Ext extend ext apply ext 繼承 ext grid 指定行顏色 Ext 二級(jí)聯(lián)動(dòng) Ext 帶提示信息的 textField Ext combox 中文排序

主站蜘蛛池模板：呼伦贝尔市| 桃源县| 辽阳县| 长顺县| 诏安县| 长丰县| 灌阳县| 洛川县| 中超| 芜湖县| 沛县| 岳西县| 即墨市| 博爱县| 昌都县| 临桂县| 铜鼓县| 海城市| 拜泉县| 镇巴县| 修水县| 丰原市| 璧山县| 铁岭县| 揭西县| 大兴区| 随州市| 靖远县| 三门峡市| 酉阳| 淮南市| 临邑县| 屏东市| 巨鹿县| 竹溪县| 岳阳县| 潼南县| 新田县| 丹江口市| 咸丰县| 郯城县|

<tfoot id="2ey2q"><input id="2ey2q"></input></tfoot>