Ext2.2用戶名和密碼登錄表單的例子
系統
1929 0
這個表單也是我使用中的一個東西。感覺還不錯。
先看運行效果
看代碼
-
<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
<
html
?
xmlns
=
"http://www.w3.org/1999/xhtml"
>
-
<
head
>
-
<
link
?
rel
=
"stylesheet"
?
type
=
"text/css"
?
href
=
"resources/css/ext-all.css"
/>
-
<
script
?
type
=
"text/javascript"
?
src
=
"adapter/prototype/prototype.js"
>
</
script
>
-
<
script
?
type
=
"text/javascript"
?
src
=
"adapter/prototype/scriptaculous.js?load=effects"
>
</
script
>
-
<
script
?
type
=
"text/javascript"
?
src
=
"adapter/prototype/ext-prototype-adapter.js"
>
</
script
>
-
<
script
?
type
=
"text/javascript"
?
src
=
"ext-all.js"
>
</
script
>
-
<
style
?
type
=
"text/css"
>
-
#LOGIN_FORM_LAYER?{
-
??position:relative;
-
??top:150px;
-
??width:?965px;
-
??height:?551px;
-
}
-
#loginDIV?{
-
??width:500px;
-
??position:relative;
-
??top:100px;
-
}
-
</
style
>
-
</
head
>
-
<
body
>
-
<
center
>
-
<
script
?
type
=
"text/javascript"
>
-
Ext.onReady(function(){
-
-
????Ext.QuickTips.init();
-
-
????//?turn?on?validation?errors?beside?the?field?globally
-
????
Ext.form.Field.prototype.msgTarget
?=?
'side'
;
-
-
????var?
bd
?=?
Ext
.getBody();
-
-
????/*
-
?????*?================??Simple?
form
??=======================
-
?????*/
-
????//bd.createChild({tag:?'h2',?html:?'Form?1?-?Very?Simple'});
-
-
-
????var?
simple
?=?
new
?Ext.FormPanel({
-
????????id:?'LOGIN_FORM',
-
????????labelWidth:?75,?//?label?settings?here?cascade?unless?overridden
-
????????url:'login.jsp',
-
????????frame:true,
-
????????title:?'
<
font
?
size
=
3
>
登錄系統
</
font
>
',
-
????????bodyStyle:'padding:5px?5px?0',
-
????????width:?350,
-
????????defaults:?{width:?230},
-
????????defaultType:?'textfield',
-
????????ctCls:?'font-size:12px',
-
-
????????items:?[{
-
????????????????fieldLabel:?'用戶名',
-
????????????????name:?'username',
-
????????????????allowBlank:false
-
????????????},{
-
????????????????fieldLabel:?'密碼',
-
????????????????name:?'password',
-
????????????????inputType?:'password'
-
????????????},new?Ext.form.Hidden({
-
??????????????name:'referer',
-
??????????????value:'/index'
-
????????????})
-
????????],
-
-
????????buttons:?[{
-
????????????id:?'submitButton',
-
????????????type:?'submit',
-
????????????text:?'登錄',
-
????????????tooltip:?'點擊這個按鈕登錄系統',
-
????????????handler:?login
-
????????}]
-
????});
-
????simple.render("loginDIV");
-
});
-
function?login(){
-
??Ext.Ajax.request({
-
????url:?'/login',
-
????form:?'LOGIN_FORM',
-
????success:?function(t){
-
??????alert(t.responseText);
-
????}
-
??});
-
}
-
</
script
>
-
<
div
?
id
=
"LOGIN_FORM_LAYER"
>
-
<
div
?
id
=
"loginDIV"
>
</
div
>
-
</
div
>
-
</
center
>
-
</
body
>
-
</
html
>
-
其中的/login處理登錄的代碼我就不寫了。大家自己做吧。
Ext2.2用戶名和密碼登錄表單的例子
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元