CSS Ext中FormPanel面板及Form控件横排测试(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>  

你可能感兴趣的:(FormPanel)