form 布局

form 布局

<%@ page language="java" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>My JSP 'form.jsp' starting page</title>
 <meta http-equiv="pragma" content="no-cache">
 <meta http-equiv="cache-control" content="no-cache">
 <meta http-equiv="expires" content="0">   
 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 <meta http-equiv="description" content="This is my page">
 <link rel="stylesheet" type="text/css" href="/js/ext/resources/css/ext-all.css" />
    <link rel="stylesheet" type="text/css" href="/css/main.css" />
   
    <script type="text/javascript" src="/js/ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="/js/ext/ext-all.js"></script>
    <script type="text/javascript">
    Ext.onReady(function(){
     var simpleForm = new Ext.FormPanel({
      renderTo:'a',
      labelAlign: 'left',
      title: '表单例子',
      buttonAlign:'right',
      bodyStyle:'padding:5px',
      width: 600,
      frame:true,
      labelWidth:80,
      items: [{
          layout:'column',   //定义该元素为布局为列布局方式
          border:false,
          labelSeparator:':',
          items:[{
              columnWidth:0.3,  //该列占用的宽度,标识为50%
              layout: 'form',
              border:false,
              items: [{                     //这里可以为多个Item,表现出来是该列的多行
                  cls : 'key',
                  xtype:'textfield',
                  fieldLabel: '用户名',
                  name: 'name',
                  anchor:'90%'
              }]
          },{
              columnWidth:0.3,
              layout: 'form',
              border:false,
              items: [{
                  cls : 'key',
                  xtype:'textfield',
                  inputType:'password',
                  fieldLabel: '口令',
                  name: 'passwd',
                  anchor:'90%'
              }]
          },{
              columnWidth:0.3,
              layout: 'form',
              border:false,
              items: [{
                  cls : 'key',
                  xtype:'textfield',
                  inputType:'password',
                  fieldLabel: '口令',
                  name: 'passwd',
                  anchor:'90%'
              }]
          }]
      }]
  }); 
   
    var form2 = new Ext.FormPanel({
     labelAlign: 'left',
     renderTo:'b',
     title: '表单例子',
     buttonAlign:'right',
     bodyStyle:'padding:5px',
     width: 600,
     frame:true,
     labelWidth:80,
  items: [
  /** 第一行 */
  {
   layout:'column',
         border:false,
         labelSeparator:':',
         items:[{
             columnWidth:.5,
             layout: 'form',
             border:false,
             items: [{
                 xtype:'textfield',
                 fieldLabel: '姓名',
                 name: 'name',
                 anchor:'90%'
             }]
         },{
            columnWidth:.25,
            layout: 'form',
            border:false,
            items: [{
                style:'margin-top:5px',
                xtype:'radio',
                fieldLabel: '性别',
                boxLabel:'男',
                name: 'sex',
                checked:true,
                inputValue:'男',
                anchor:'95%'
            }]},{
            columnWidth:.25,
            layout: 'form',
            labelWidth:0,
            labelSeparator:'',
            hideLabels:true,
            border:false,
            items: [{
                style:'margin-top:5px',
                xtype:'radio',
                fieldLabel: '',
                boxLabel:'女',
                name: 'sex',
                inputValue:'女',
                anchor:'95%'
            }]}
        ]},
  /** 第二行 */
  {
   layout:'column',
         border:false,
         labelSeparator:':',
         items:[{
            columnWidth:.5,
            layout: 'form',
            border:false,
            items: [{
                xtype:'datefield',
                fieldLabel: '出生日期',
                name: 'birthday',
                anchor:'90%'
            }]},{
            columnWidth:.5,
            layout: 'form',
            border:false,
            items: [{
                xtype:'combo',
                store: new Ext.data.SimpleStore({
                      fields: ["retrunValue", "displayText"],
                      data: [[1,'小学'],[2,'初中'],[3,'高中'],[4,'中专'],[5,'大专'],[6,'大学']]
                   }),
                valueField :"retrunValue",
                displayField: "displayText",
                mode: 'local',
                forceSelection: true,
                blankText:'请选择学历',
                emptyText:'选择学历',
                hiddenName:'education',
                editable: false,
                triggerAction: 'all',
                allowBlank:false,
                fieldLabel: '学历',
                name: 'education',
                anchor:'90%'
            }]}
        ]}
  
  ],
  buttons: []
 });
  });
    </script>
  </head>
  <body>
    <div id="a"></div>
    <div id="b"></div>
    <div id="c"></div>
    <div id="d"></div>
    <div id="e"></div>
    <div id="f"></div>
    <div id="g"></div>
    <div id="h"></div>
  </body>
</html>

你可能感兴趣的:(form 布局)