Extjs4中的form使用一

一個簡單的登錄表單:

 

[html 

Ext.onReady(function(){  

    //model  

    Ext.define("person",{  

        extend:'Ext.data.Model',  

        fields:[  

            {name:'userName',type:'auto'},  

            {name:'password',type:'auto'}  

        ]  

    });  

    var p = new person({userName:'張三',password:"123456"});  

      

    var passTest = /[123]/i//定義正則格式  

[html]  

//擴展  

[html]  

//vType:數據驗證  

    Ext.apply(Ext.form.field.VTypes,{  

        myPass :function(val,field){  

            return passTest.test(val);  

        },  

        myPassText:"密碼格式錯誤",  

        myPassMask:/[123]/i//隻能輸入定義的東西  

    });  

    //創建表單  

    var textForm = Ext.create("Ext.form.Panel",{  

        title : "form中文本框實例",  

        bodyStyle :'padding:5 5 5 5',//樣式  

        frame : true,  

        height : 120,  

        width : 300,  

        id:'my_form',  

        renderTo:'formDemo',//在什麼地方顯示(標簽的id)  

        defaultType:'textfield',  

        defaults:{  

            labelSeparator :": ",//分隔符  

            labelWidth : 50,  

            width : 200,  

            allowBlank: false,  

            msgTarget : 'side',//提示消息位置  

            labelAlign:'left'  

        },  

        items:[{  

            fieldLabel : "Name",  

            name:'userName',  

            id:'userName',  

            selectOnFocus : true,//點擊有焦點的時候選中全部  

            regex:/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/,//正則表達式  

            regexText:"請用郵箱來註冊",  

            grow:false//是否在這個表單字段規定長度內自動根據文字的內容進行伸縮  

        },{  

            fieldLabel : "Pass",  

            name:'password',  

            id:'password',  

            inputType:'password',//密碼輸入看不見  

            vtype:'myPass'  

        }],  

        buttons: [  

          {text:'登陸系統',handler:function(b){  

            var formObj = Ext.getCmp("my_form");//表單id  

            var basic = formObj.getForm();//得到表單  

            var nameField = basic.findField("userName");//得到文本域  

            var nameValue = nameField.getValue();//得到文本域的值  

            alert(nameValue);  

          }},{  

            text:'重置',handler:function(b){  

                var formObj = Ext.getCmp("my_form");  

                var basic = formObj.getForm();  

                basic.reset();  

            }  

          },{  

            text:'裝在數據',handler:function(b){  

                var formObj = Ext.getCmp("my_form");  

                var basic = formObj.getForm();  

                basic.loadRecord(p);//p為model類型  

            }             

          }  

        ]         

    })  

});  

 

發佈留言