zoukankan      html  css  js  c++  java

  • 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.         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.         133   
    59.     },{   
    60.         xtype: 'textfield' ,   
    61.         fieldLabel: '住址' ,   
    62.         name: 'n_address' ,   
    63.         id: 'i_address' ,   
    64.         itemCls: 'stop-float' ,  //不允许浮动,结束控件横排   
    65.         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.     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.         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.         133  
    59.     },{  
    60.         xtype:'textfield',  
    61.         fieldLabel:'住址',  
    62.         name:'n_address',  
    63.         id:'i_address',  
    64.         itemCls:'stop-float', //不允许浮动,结束控件横排  
    65.         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.     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中必须添加，所以干脆添加在上面，保证两个浏览器都正常浏览。

  • 相关阅读:
    ASP.NET AJAX异步调用Web Service和页面中的类方法< 收藏>
    WebCast下载工具iReaper
    ASP.NET AJAX Control Toolkit
    CodeSmith对数据库中表的操作(转)
    仿163网盘无刷新多文件上传系统<转>
    疯狂.NET 通用权限设计 C\S后台管理，B\S前台调用源码样例程序源码下载之 操作权限《转》
    TFS2010物理迁移
    Extensible Storage Engine
    改善ASP.NET MVC应用程序第一次启动性能问题
    Windows Server 2012添加WORKGROUPS Windows Server 2008 R2服务器
  • 原文地址：https://www.cnblogs.com/holyes/p/8908681d23ad64e97cb88e7a6eae9190.html
Copyright © 2011-2022 走看看