在实际的网页开发中，大部分时间都要涉及到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>
