Extjs表單控制項入門

標籤：style   blog   class   code   c   tar   

ExtJs表單控制項用formPanel來做為表單元素的容器。預設情況下，是使用Ajax非同步提交。

大家知道要使用Extjs必須引入他的庫,所以我們要引入以下幾個檔案:

ext-all.css

ext-base.js

ext-all.js

PS:筆者採用的是extjs3.0版本

那怎麼載入外掛程式呢?放心,extjs有自己載入的方法:

Ext.onReady(function(){

//coding...

}

執行個體代碼:

 

var formPanel=new Ext.form.FormPanel({            title:‘登陸‘,            id:‘loginId‘,            autoHeight:true,            x:200,            y:200,            width:300,            renderTo:Ext.getBody(),            frame:true,            cls:‘text-align:center‘,            labelAlign:‘center‘,            items:[{                xtype:‘textfield‘,                name:‘username‘,                fieldLabel:‘使用者名稱‘,                allowBlank:false,                blankText:‘請輸入使用者名稱‘,                msgTarget:‘under‘            },{                xtype:‘textfield‘,                name:‘pwd‘,                fieldLabel:‘密碼‘,                allowBlank:false,                blankText:‘請輸入密碼‘,                msgTarget:‘under‘            }],            buttonAlign:‘center‘,            buttons:[{                xtype:‘button‘,                text:‘登陸‘,                scope:this,                handler:login            },{                xtype:‘button‘,                text:‘重設‘,                scope:this,                handler:reset            }]        });             function login(){            formPanel.form.submit({                clientValidation:true,                waitMsg:‘登陸中,請稍後....‘,                url:‘login.action‘,                method:‘POST‘,                //success                success:function(form,action){                    Ext.Msg.alert(‘提示‘,‘登陸成功‘);                },                failure:function(form,action){                    Ext.Msg.alert(‘提示‘,‘登陸失敗‘);                }            });        }        function reset(){            formPanel.form.reset();        } 

View Code