|
|
 <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.blogjava.net/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>
效果图:
|