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"
}]