Ext.FormPanel 及控件横排显示

在实际的网页开发中，大部分时间都要涉及到Form表单的处理。在Ext 框架 中也提供了很多这方面的控件，而且还有一个专门的FormPanel布局，该布局默认为放在面板上面的所有控件都是换行放置，而在实际应用中为了美观，有些需要横排，特别是Radio控件，这个时候就需要我们重新定制这些控件的布局了，该例子中使用CSS 来实现这些功能，先贴出一张效果图。



　　实现上面效果的具体代码 如下：


Js代码 复制代码
  1. <!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >   
  2. <html xmlns= "http://www.w3.org/1999/xhtml" >   
  3. <head>   
  4. <meta http-equiv= "Content-Type"  content= "text/html; charset=UTF-8"  />   
  5. <title>Ext中FormPanel面板及Form控件横排测试(CSS)</title>   
  6. <link rel= "stylesheet"  type= "text/css"  media= "all"  href= "../ext/resources/css/ext-all.css"  />   
  7. <style type= "text/css"  media= "all" >   
  8.     .allow- float  {clear:none!important;}  /* 允许该元素浮动 */   
  9.     .stop- float  {clear:both!important;}  /* 阻止该元素浮动 */   
  10.     .sex-male { float :left;}   
  11.     .sex-female { float :left;padding:0 0 0 20px;}   
  12.     .age-field { float :left;padding:0 0 0 58px;*padding:0 0 0 50px!important;*padding:0 0 0 50px;}   
  13. </style>   
  14. </head>   
  15. <body>   
  16. <scrīpt type= "text/javascrīpt"  src= "../ext/adapter/ext/ext-base.js" ></scrīpt>   
  17. <scrīpt type= "text/javascrīpt"  src= "../ext/ext-all.js" ></scrīpt>   
  18. <scrīpt type= "text/javascrīpt"  src= "../ext/build/locale/ext-lang-zh_CN.js" ></scrīpt>   
  19. <scrīpt type= "text/javascrīpt" >Ext.BLANK_IMAGE_URL =  '../ext/resources/images/default/s.gif' ;</scrīpt>   
  20. <scrīpt type= "text/javascrīpt" >   
  21. Ext.onReady( function () {   
  22. //创建Form面板   
  23. var  fp =  new  Ext.form.FormPanel({   
  24.     buttonAlign: 'center' ,   
  25.     labelAlign: 'right' ,   
  26.     labelWidth:40,   
  27.     frame: true ,   
  28.     bodyStyle: 'padding:8px 0 0 0;' ,   
  29.     items:[{   
  30.         xtype: 'textfield' ,   
  31.         fieldLabel: '姓名' ,   
  32.         name: 'n_username' ,   
  33.         id: 'i_username' ,   
  34.         width:320   
  35.     },{   
  36.         xtype: 'radio' ,   
  37.         fieldLabel: '性别' ,   
  38.         boxLabel: '男' ,   
  39.         name: 'sex' ,   
  40.         id: 'male' ,   
  41.         itemCls: 'sex-male' ,  //向左边浮动,处理控件横排   
  42.         clearCls: 'allow-float' ,  //允许两边浮动,在实际生成的HTML 结构中有专门的DIV阻断浮动   
  43.         checked: true   
  44.     },{   
  45.         xtype: 'radio' ,   
  46.         boxLabel: '女' ,   
  47.         name: 'sex' ,   
  48.         id: 'female' ,   
  49.         itemCls: 'sex-female' ,  //向左浮动,处理控件横排   
  50.         clearCls: 'allow-float' ,  //允许两边浮动   
  51.         hideLabel: true   //不显示前面"性别"的标签   
  52.     },{   
  53.         xtype: 'textfield' ,   
  54.         fieldLabel: '年龄' ,   
  55.         name: 'n_age' ,   
  56.         id: 'i_age' ,   
  57.         itemCls: 'age-field' ,  //向左浮动,处理控件横排   
  58.         width:133   
  59.     },{   
  60.         xtype: 'textfield' ,   
  61.         fieldLabel: '住址' ,   
  62.         name: 'n_address' ,   
  63.         id: 'i_address' ,   
  64.         itemCls: 'stop-float' ,  //不允许浮动,结束控件横排   
  65.         width:320   
  66.     }],   
  67.     buttons:[{   
  68.         text: '确定' ,   
  69.         handler:onOK  //实际应用一般是处理fp.getForm.submit()事件   
  70.     }, {   
  71.         text: '重置' ,   
  72.         handler: function (){ fp.getForm().reset(); }   
  73.     }],   
  74.     keys:[{  //处理键盘回车事件   
  75.         key:Ext.EventObject.ENTER,   
  76.         fn:onOK,   
  77.         scope: this   
  78.     }]   
  79. });   
  80.   
  81. //确定按钮事件,这里只是简单获取各控件值,实际应用一般和后台脚本结合   
  82. function  onOK() {   
  83.      var  strMsg;   
  84.     strMsg =  '姓名：'  + fp.getComponent( 'i_username' ).getValue() +  '，性别：' ;   
  85.      if  (fp.getComponent( 'male' ).checked) strMsg +=  '男' ;   
  86.      if  (fp.getComponent( 'female' ).checked) strMsg +=  '女' ;   
  87.     strMsg +=  '，年龄：'  + fp.getComponent( 'i_age' ).getValue();   
  88.     strMsg +=  '，住址：'  + fp.getComponent( 'i_address' ).getValue();   
  89.     alert(strMsg);   
  90. }   
  91.   
  92. //创建主窗口   
  93. new  Ext.Window({   
  94.     title: 'Ext中FormPanel面板及Form控件横排测试(CSS)' ,   
  95.     width:400,   
  96.     closable: false ,   
  97.     collapsible: true ,   
  98.     draggable: false ,   
  99.     resizable: false ,   
  100.     modal: true ,   
  101.     border: false ,   
  102.     items:[fp],   
  103.     buttons:[]   
  104. }).show();   
  105. });   
  106. </scrīpt>   
  107. </body>   
  108. </html>  
Js代码  收藏代码
  1. <span style="font-size: medium;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
  5. <title>Ext中FormPanel面板及Form控件横排测试(CSS)</title>  
  6. <link rel="stylesheet" type="text/css" media="all" href="../ext/resources/css/ext-all.css" />  
  7. <style type="text/css" media="all">  
  8.     .allow-float {clear:none!important;} /* 允许该元素浮动 */  
  9.     .stop-float {clear:both!important;} /* 阻止该元素浮动 */  
  10.     .sex-male {float:left;}  
  11.     .sex-female {float:left;padding:0 0 0 20px;}  
  12.     .age-field {float:left;padding:0 0 0 58px;*padding:0 0 0 50px!important;*padding:0 0 0 50px;}  
  13. </style>  
  14. </head>  
  15. <body>  
  16. <scrīpt type="text/javascrīpt" src="../ext/adapter/ext/ext-base.js"></scrīpt>  
  17. <scrīpt type="text/javascrīpt" src="../ext/ext-all.js"></scrīpt>  
  18. <scrīpt type="text/javascrīpt" src="../ext/build/locale/ext-lang-zh_CN.js"></scrīpt>  
  19. <scrīpt type="text/javascrīpt">Ext.BLANK_IMAGE_URL = '../ext/resources/images/default/s.gif';</scrīpt>  
  20. <scrīpt type="text/javascrīpt">  
  21. Ext.onReady(function() {  
  22. //创建Form面板  
  23. var fp = new Ext.form.FormPanel({  
  24.     buttonAlign:'center',  
  25.     labelAlign:'right',  
  26.     labelWidth:40,  
  27.     frame:true,  
  28.     bodyStyle:'padding:8px 0 0 0;',  
  29.     items:[{  
  30.         xtype:'textfield',  
  31.         fieldLabel:'姓名',  
  32.         name:'n_username',  
  33.         id:'i_username',  
  34.         width:320  
  35.     },{  
  36.         xtype:'radio',  
  37.         fieldLabel:'性别',  
  38.         boxLabel:'男',  
  39.         name:'sex',  
  40.         id:'male',  
  41.         itemCls:'sex-male', //向左边浮动,处理控件横排  
  42.         clearCls:'allow-float', //允许两边浮动,在实际生成的HTML结构中有专门的DIV阻断浮动  
  43.         checked:true  
  44.     },{  
  45.         xtype:'radio',  
  46.         boxLabel:'女',  
  47.         name:'sex',  
  48.         id:'female',  
  49.         itemCls:'sex-female', //向左浮动,处理控件横排  
  50.         clearCls:'allow-float', //允许两边浮动  
  51.         hideLabel:true //不显示前面"性别"的标签  
  52.     },{  
  53.         xtype:'textfield',  
  54.         fieldLabel:'年龄',  
  55.         name:'n_age',  
  56.         id:'i_age',  
  57.         itemCls:'age-field', //向左浮动,处理控件横排  
  58.         width:133  
  59.     },{  
  60.         xtype:'textfield',  
  61.         fieldLabel:'住址',  
  62.         name:'n_address',  
  63.         id:'i_address',  
  64.         itemCls:'stop-float', //不允许浮动,结束控件横排  
  65.         width:320  
  66.     }],  
  67.     buttons:[{  
  68.         text:'确定',  
  69.         handler:onOK //实际应用一般是处理fp.getForm.submit()事件  
  70.     }, {  
  71.         text:'重置',  
  72.         handler:function(){ fp.getForm().reset(); }  
  73.     }],  
  74.     keys:[{ //处理键盘回车事件  
  75.         key:Ext.EventObject.ENTER,  
  76.         fn:onOK,  
  77.         scope:this  
  78.     }]  
  79. });  
  80.   
  81. //确定按钮事件,这里只是简单获取各控件值,实际应用一般和后台脚本结合  
  82. function onOK() {  
  83.     var strMsg;  
  84.     strMsg = '姓名：' + fp.getComponent('i_username').getValue() + '，性别：';  
  85.     if (fp.getComponent('male').checked) strMsg += '男';  
  86.     if (fp.getComponent('female').checked) strMsg += '女';  
  87.     strMsg += '，年龄：' + fp.getComponent('i_age').getValue();  
  88.     strMsg += '，住址：' + fp.getComponent('i_address').getValue();  
  89.     alert(strMsg);  
  90. }  
  91.   
  92. //创建主窗口  
  93. new Ext.Window({  
  94.     title:'Ext中FormPanel面板及Form控件横排测试(CSS)',  
  95.     width:400,  
  96.     closable:false,  
  97.     collapsible:true,  
  98.     draggable:false,  
  99.     resizable:false,  
  100.     modal:true,  
  101.     border:false,  
  102.     items:[fp],  
  103.     buttons:[]  
  104. }).show();  
  105. });  
  106. </scrīpt>  
  107. </body>  
  108. </html></span>  


　　上面代码比较简单，而且也添加了注释，这里只简单说明一下。


　　对于实现Radio控件的横排，首先是通过itemCls属性，修改他的浮动，使之float:left，同时还要修改clearCls，修改成clear:none，允许控件两边都可以浮动，这是因为在实际生成的HTML结构中，会有一个DIV专门负责清除浮动，如果使用默认的设置，接下来的那个控件并不会紧挨着他，也就是还会继续换行，对于第二个Raido控件，必须添加 hideLabel:false属性，这样才能省去前面的标签设置，其他设置跟第一个一样。


　　如果要还原成换行布置，必须在想还原成换行布置的控件上设置itemCls属性，修改为clear:both，而这个设置在IE中好像不用设置也可以，而在FF中必须添加，所以干脆添加在上面，保证两个浏览器都正常浏览。

posted @ 2012-06-26 10:15  holyes  阅读(299)  评论(0)  编辑  收藏  举报