在實際的網頁開發中，大部分時間都要涉及到Form表單的處理。在Ext 框架 中也提供了很多這方面的控件，而且還有一個專門的FormPanel佈局，該佈局默認爲放在面板上面的所有控件都是換行放置，而在實際應用中爲了美觀，有些需要橫排，特別是Radio控件，這個時候就需要我們重新定製這些控件的佈局了，該例子中使用CSS 來實現這些功能，先貼出一張效果圖。
實現上面效果的具體代碼 如下：
Js代碼
![複製代碼]()
- <!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" />
- <title>Ext中FormPanel面板及Form控件橫排測試(CSS)</title>
- <link rel= "stylesheet" type= "text/css" media= "all" href= "../ext/resources/css/ext-all.css" />
- <style type= "text/css" media= "all" >
- .allow- float {clear:none!important;} /* 允許該元素浮動 */
- .stop- float {clear:both!important;} /* 阻止該元素浮動 */
- .sex-male { float :left;}
- .sex-female { float :left;padding:0 0 0 20px;}
- .age-field { float :left;padding:0 0 0 58px;*padding:0 0 0 50px!important;*padding:0 0 0 50px;}
- </style>
- </head>
- <body>
- <scrīpt type= "text/javascrīpt" src= "../ext/adapter/ext/ext-base.js" ></scrīpt>
- <scrīpt type= "text/javascrīpt" src= "../ext/ext-all.js" ></scrīpt>
- <scrīpt type= "text/javascrīpt" src= "../ext/build/locale/ext-lang-zh_CN.js" ></scrīpt>
- <scrīpt type= "text/javascrīpt" >Ext.BLANK_IMAGE_URL = '../ext/resources/images/default/s.gif' ;</scrīpt>
- <scrīpt type= "text/javascrīpt" >
- Ext.onReady( function () {
- //創建Form面板
- var fp = new Ext.form.FormPanel({
- buttonAlign: 'center' ,
- labelAlign: 'right' ,
- labelWidth:40,
- frame: true ,
- bodyStyle: 'padding:8px 0 0 0;' ,
- items:[{
- xtype: 'textfield' ,
- fieldLabel: '姓名' ,
- name: 'n_username' ,
- id: 'i_username' ,
- width:320
- },{
- xtype: 'radio' ,
- fieldLabel: '性別' ,
- boxLabel: '男' ,
- name: 'sex' ,
- id: 'male' ,
- itemCls: 'sex-male' , //向左邊浮動,處理控件橫排
- clearCls: 'allow-float' , //允許兩邊浮動,在實際生成的HTML 結構中有專門的DIV阻斷浮動
- checked: true
- },{
- xtype: 'radio' ,
- boxLabel: '女' ,
- name: 'sex' ,
- id: 'female' ,
- itemCls: 'sex-female' , //向左浮動,處理控件橫排
- clearCls: 'allow-float' , //允許兩邊浮動
- hideLabel: true //不顯示前面"性別"的標籤
- },{
- xtype: 'textfield' ,
- fieldLabel: '年齡' ,
- name: 'n_age' ,
- id: 'i_age' ,
- itemCls: 'age-field' , //向左浮動,處理控件橫排
- width:133
- },{
- xtype: 'textfield' ,
- fieldLabel: '住址' ,
- name: 'n_address' ,
- id: 'i_address' ,
- itemCls: 'stop-float' , //不允許浮動,結束控件橫排
- width:320
- }],
- buttons:[{
- text: '確定' ,
- handler:onOK //實際應用一般是處理fp.getForm.submit()事件
- }, {
- text: '重置' ,
- handler: function (){ fp.getForm().reset(); }
- }],
- keys:[{ //處理鍵盤迴車事件
- key:Ext.EventObject.ENTER,
- fn:onOK,
- scope: this
- }]
- });
- //確定按鈕事件,這裏只是簡單獲取各控件值,實際應用一般和後臺腳本結合
- function onOK() {
- var strMsg;
- strMsg = '姓名：' + fp.getComponent( 'i_username' ).getValue() + '，性別：' ;
- if (fp.getComponent( 'male' ).checked) strMsg += '男' ;
- if (fp.getComponent( 'female' ).checked) strMsg += '女' ;
- strMsg += '，年齡：' + fp.getComponent( 'i_age' ).getValue();
- strMsg += '，住址：' + fp.getComponent( 'i_address' ).getValue();
- alert(strMsg);
- }
- //創建主窗口
- new Ext.Window({
- title: 'Ext中FormPanel面板及Form控件橫排測試(CSS)' ,
- width:400,
- closable: false ,
- collapsible: true ,
- draggable: false ,
- resizable: false ,
- modal: true ,
- border: false ,
- items:[fp],
- buttons:[]
- }).show();
- });
- </scrīpt>
- </body>
- </html>
<!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" />
<title>Ext中FormPanel面板及Form控件橫排測試(CSS)</title>
<link rel="stylesheet" type="text/css" media="all" href="../ext/resources/css/ext-all.css" />
<style type="text/css" media="all">
.allow-float {clear:none!important;} /* 允許該元素浮動 */
.stop-float {clear:both!important;} /* 阻止該元素浮動 */
.sex-male {float:left;}
.sex-female {float:left;padding:0 0 0 20px;}
.age-field {float:left;padding:0 0 0 58px;*padding:0 0 0 50px!important;*padding:0 0 0 50px;}
</style>
</head>
<body>
<scrīpt type="text/javascrīpt" src="../ext/adapter/ext/ext-base.js"></scrīpt>
<scrīpt type="text/javascrīpt" src="../ext/ext-all.js"></scrīpt>
<scrīpt type="text/javascrīpt" src="../ext/build/locale/ext-lang-zh_CN.js"></scrīpt>
<scrīpt type="text/javascrīpt">Ext.BLANK_IMAGE_URL = '../ext/resources/images/default/s.gif';</scrīpt>
<scrīpt type="text/javascrīpt">
Ext.onReady(function() {
//創建Form面板
var fp = new Ext.form.FormPanel({
buttonAlign:'center',
labelAlign:'right',
labelWidth:40,
frame:true,
bodyStyle:'padding:8px 0 0 0;',
items:[{
xtype:'textfield',
fieldLabel:'姓名',
name:'n_username',
id:'i_username',
width:320
},{
xtype:'radio',
fieldLabel:'性別',
boxLabel:'男',
name:'sex',
id:'male',
itemCls:'sex-male', //向左邊浮動,處理控件橫排
clearCls:'allow-float', //允許兩邊浮動,在實際生成的HTML結構中有專門的DIV阻斷浮動
checked:true
},{
xtype:'radio',
boxLabel:'女',
name:'sex',
id:'female',
itemCls:'sex-female', //向左浮動,處理控件橫排
clearCls:'allow-float', //允許兩邊浮動
hideLabel:true //不顯示前面"性別"的標籤
},{
xtype:'textfield',
fieldLabel:'年齡',
name:'n_age',
id:'i_age',
itemCls:'age-field', //向左浮動,處理控件橫排
width:133
},{
xtype:'textfield',
fieldLabel:'住址',
name:'n_address',
id:'i_address',
itemCls:'stop-float', //不允許浮動,結束控件橫排
width:320
}],
buttons:[{
text:'確定',
handler:onOK //實際應用一般是處理fp.getForm.submit()事件
}, {
text:'重置',
handler:function(){ fp.getForm().reset(); }
}],
keys:[{ //處理鍵盤迴車事件
key:Ext.EventObject.ENTER,
fn:onOK,
scope:this
}]
});
//確定按鈕事件,這裏只是簡單獲取各控件值,實際應用一般和後臺腳本結合
function onOK() {
var strMsg;
strMsg = '姓名：' + fp.getComponent('i_username').getValue() + '，性別：';
if (fp.getComponent('male').checked) strMsg += '男';
if (fp.getComponent('female').checked) strMsg += '女';
strMsg += '，年齡：' + fp.getComponent('i_age').getValue();
strMsg += '，住址：' + fp.getComponent('i_address').getValue();
alert(strMsg);
}
//創建主窗口
new Ext.Window({
title:'Ext中FormPanel面板及Form控件橫排測試(CSS)',
width:400,
closable:false,
collapsible:true,
draggable:false,
resizable:false,
modal:true,
border:false,
items:[fp],
buttons:[]
}).show();
});
</scrīpt>
</body>
</html>
上面代碼比較簡單，而且也添加了註釋，這裏只簡單說明一下。
對於實現Radio控件的橫排，首先是通過itemCls屬性，修改他的浮動，使之float:left，同時還要修改clearCls，修改成clear:none，允許控件兩邊都可以浮動，這是因爲在實際生成的HTML結構中，會有一個DIV專門負責清除浮動，如果使用默認的設置，接下來的那個控件並不會緊挨着他，也就是還會繼續換行，對於第二個Raido控件，必須添加hideLabel:false屬性，這樣才能省去前面的標籤設置，其他設置跟第一個一樣。
如果要還原成換行佈置，必須在想還原成換行佈置的控件上設置itemCls屬性，修改爲clear:both，而這個設置在IE中好像不用設置也可以，而在FF中必須添加，所以乾脆添加在上面，保證兩個瀏覽器都正常瀏覽。