Form布局在所有布局中是最为复杂，使用频度最广，同时也是最难掌握的,下面给出几个示例
1.登录UI界面
Login UI
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<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>
<title>Form 布局应用_Login登录框</title>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
var login = new Ext.FormPanel({
renderTo: Ext.getBody(),
labelAlign: 'top',//标签排在最上面
frame: true,
id: 'login',
bodyStyle: 'padding:5px 5px 0',
items: [{
layout: 'column', //把整个空间划分成两列
items: [{
html: '左侧登录Logo区', //左边列放一个logo
columnWidth: 0.5
}, {
columnWidth: 0.5,
layout: 'form', //右边列再分成上下两行
items: [{
xtype: 'textfield',
fieldLabel: '用户名', //第一行是用户名输入框
allowBlank: false,
blankText: "请输入用户名!",
name: 'name',
id: 'name',
anchor: '80%'
}, {
xtype: 'textfield',
fieldLabel: '密码', //第二行是密码输入框
allowBlank: false,
blankText: "请输入密码!",
name: 'pass',
id: 'pass',
anchor: '80%',
inputType: 'password'
}]
}]
}],
buttons: [{ text: '登录', handler: function() {
var name = Ext.get("name");
var pass = Ext.get("pass");
if (name.dom.value == "") {
Ext.MessageBox.alert("提示", "请输入登录名");
name.highlight();
name.focus();
return false;
}
if (pass.dom.value == "") {
Ext.MessageBox.alert("提示","请输入密码");
pass.highlight();
pass.focus();
return false;
}
}
}, { text: '重置', handler: function() {
Ext.get("name").dom.value = "";
Ext.get("pass").dom.value = "";
} }]
});
login.hide();
var wLogin;
var aLogin = Ext.get("aLogin");
aLogin.on("click", function() {
if (!wLogin) {
wLogin = new Ext.Window({
title: "用户登录",
width: 400,
plain: true,
modal: true,
height: 175,
resizable:false,
items: [login],
closeAction: "hide"
});
}
login.show();
wLogin.show();
})
});
</script>
</body>
<a href="http://www.bianceng.cn/index.php#" id="aLogin">用户登录</a>
</html>