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="#" id="aLogin">用户登录</a></html> 
2.加入其它不同类型的输入组件后
Login UI 2<!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