在實際的網頁開發中，大部分時間都要涉及到Form表單的處理。在Ext架構中也提供了很多這方面的控制項，而且還有一個專門的FormPanel布 局，該布局預設為放在面板上面的所有控制項都是換行放置，而在實際應用中為了美觀，有些需要橫排，特別是Radio控制項，這個時候就需要我們重新定製這些控 件的布局了，該例子中使用CSS來實現這些功能，先貼出一張。
<!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>
<script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext/ext-all.js"></script>
<script type="text/javascript" src="../ext/build/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">Ext.BLANK_IMAGE_URL = '../ext/resources/images/default/s.gif';</script>
<script type="text/javascript">
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();
});
</script>
</body>
</html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
