ExtJs学习笔记(19)_复杂Form示例
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 Ext.FormPanel({ renderTo: Ext.getBody(), labelAlign: 'top', //标签排在最上面 frame: true, id: 'login', bodyStyle: 'padding:3px 3px 0', items: [{ layout: 'column', //把整个空间划分成两列 items: [{ columnWidth: 0.5, layout: 'form', //左边列分成三行(根据item个数来定的) items: [{ xtype: 'textfield', //第一行，呢称 fieldLabel: "呢称", allowBlank: false, blankText: '请输入呢称!', name: "nickname", id: "nickname", anchor: '80%' }, { xtype: 'textfield', //第二行,电子邮箱 fieldLabel: "电子邮箱", allowBlank: false, blankText: '请输入电子邮箱!', vtype: "email", name: "email", id: "email", anchor: '80%' }, { xtype: 'datefield', fieldLabel: "出生日期", //第三行，出生日期 allowBlank: false, name: "birthday", id: "birthday", anchor: '80%' }] }, { columnWidth: 0.5, layout: 'form', //左边列分成三行(根据item个数来定的) items: [{ xtype: 'textfield', fieldLabel: '用户名', //第一行是用户名输入框 allowBlank: false, blankText: "请输入用户名!", name: 'name', id: 'name', anchor: '80%' }, { xtype: 'textfield', fieldLabel: '密码', //第二行是密码输入框 inputType: "password", allowBlank: false, blankText: "请输入密码!", name: 'pass', id: 'pass', anchor: '80%', inputType: 'password' }, { xtype: 'radiogroup',//第三行是爱好 fieldLabel: '爱好', items: [{ xtype: "panel", layout: "column", //也可以是table,实现多列布局 items: [{ width:55, //宽度为100px xtype:"checkbox", boxLabel: "足球", //显示在复选框右边的文字 name: "" }, { width:55, xtype:"checkbox", boxLabel: "篮球", name: "" }, { width:55, xtype:"checkbox", boxLabel: "音乐", name: "" }] }] }] }] }], 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, height: 235, plain: true, modal: true, resizable: false, items: [login], closeAction: "hide" }); } login.show(); wLogin.show(); }) }); </script></body><a href="#" id="aLogin">用户登录</a></html> 
3.更加复杂的结构：
Code<script type="text/javascript"> Ext.onReady(function() { var form = new Ext.FormPanel({ title: "复杂Form布局示例", width: 640, height: 400, renderTo: Ext.getBody(), labelWidth: 80, labelAlign: "top", frame: true, items: [{ layout: "column", items: [{ columnWidth: 0.5, layout: "form", items: { xtype: "textfield", fieldLabel: "A1", anchor: "90%" } }, { columnWidth: 0.5, layout: "form", items: { xtype: "textfield", fieldLabel: "A2", anchor: "90%" }}] }, { items: [{ layout: "column", items: [{ columnWidth: 0.33, layout: "form", items: { xtype: "datefield", fieldLabel: "B1", anchor: "90%" } }, { columnWidth: 0.33, layout: "form", items: [{ xtype: "radiogroup", fieldLabel: "B2", columns: ["33%", "33%", "33%"], items: [{ boxLabel: '我是', name: 'rb-auto', inputValue: 1 }, { boxLabel: '一个', name: 'rb-auto', inputValue: 2, checked: true }, { boxLabel: '好人', name: 'rb-auto', inputValue: 3}] //下面也是一种解决办法，不管radiogroup或是下面的写法，都很难保证在所有浏览器下效果一致 // xtype: "panel", // layout: "column", // fieldLabel: "球类", // isFormField: true, // items: [{ // columnWidth: 0.33, // xtype: "checkbox", // boxLabel: "足球", // name: "", // anchor:"100%" // }, { // columnWidth:0.33, // xtype:"checkbox", // boxLabel:"蓝球", // name:"", // anchor: "100%" // }, { // columnWidth: 0.33, // xtype: "checkbox", // boxLabel: "乒乓球", // name: "", // anchor: "100%" // }]}] }, { columnWidth: 0.33, layout: "form", items: { xtype: "textfield", fieldLabel: "B3", inputType: "password", anchor: "90%" }}]}] }, { xtype: "htmleditor", fieldLabel: "详细内容", height: 200, anchor: "100%"}] , buttons: [{ text: "Save" }, {text:"cancel"}] }); }); </script>
转载请注明来自"菩提树下的杨过"http://www.cnblogs.com/yjmyzz/archive/2008/09/03/1283042.html
技巧:
1.先用new Ext.FormPanel({
items:[
{...},{...},{...}...
]
})
类似的代码，确定整个form的行数，即items里{}的个数
2.每行如果要分列，再利用
{
layout:"column",
items:[{},{},{}...]
}
以column布局，横向分切为N列,即items:[{},{},{}...]中{}的个数
3.每列中，如果要放输入项，再把每行相关列(其实就是单元格)，采用form布局方式处理，并标明输入项，类似以下代码:
items: [{
columnWidth: 0.5,
layout: "form",
items: {
xtype:"textfield",
fieldLabel:"A1",
anchor:"90%"
}
}, {
columnWidth: 0.5,
html: "aaaaaaaaaaa"
}]
作者：菩提树下的杨过
出处：http://yjmyzz.cnblogs.com
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
出处：http://yjmyzz.cnblogs.com
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
