|
|
 <HTML>
<HEAD>
<TITLE> Ext Form 簡單練習之一(login Form) </TITLE>
<link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css"/>
<script type="text/javascript" src="../../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../../ext-all.js"></script>
  <script>
 Ext.onReady(function()
  {
new Ext.Button({
id : 'b1',
text : '登錄',
renderTo : 'd1',
handler : function()
{
createWindow();
 }
});
function createWindow()
{
var form = new Ext.form.FormPanel({
baseCls : 'x-plain', // Panel的默認css,
layout : 'absolute', //布局
url : 'bbs.crsky.com', //form action
defaultType : 'textfield', //默認類型(不指定類型的情況為默認)
//非Ajax方式提交一定要加上這兩句
onSubmit : Ext.emptyFn,
submit : function()
{
this.getForm().getEl().dom.submit();
},
//form 組件
items : [
{
x : 0, //在window中的絕對定位
y : 5,
xtype : 'label',
text : '用戶名:'
},
{
x : 60,
y : 0,
name : 'to',
id : 'username',
anchor : '100%' //錨記，當你改變window大小時，textfield會自動隨之改變
},
{
x : 0,
y : 35,
xtype : 'label',
text : '密碼:'
},
{
x : 60,
y : 30,
name : 'msg',
id : 'password',
anchor : '100%'
}
]
});
var window = new Ext.Window({
title: '可調大小',
width : 300,
height : 150,
minWidth : 300,
minHeight : 150,
layout : 'fit',
plain : true,
bodyStyle : 'padding : 5px;',
buttonAlign : 'center',
items : form,
buttons : [
{
text : '登錄',
type : 'submit',
handler : function()
{
var username = Ext.get('username');
var password = Ext.get('password');
if(username.getValue() == '')
{
Ext.Msg.alert('提示','用戶名不能為空');
}
else
{
if(password.getValue() == '')
{+
Ext.Msg.alert('提示','密碼不能為空');
}
else
{
form.getForm().getEl().dom.action = 'http://www.tkk7.com/supercrsky',
form.getForm().getEl().dom.submit();
}
}
}
},
{
text : '重置',
type : 'reset',
handler : function()
{
form.getForm().getEl().dom.reset();
}
}
]
});
window.show();
}
//window.show();
 });
</script>
</HEAD>
<BODY>
<div id='d1'></div>
</BODY>
</HTML>
效果圖:
|