1：代码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>form表单布局的简单例子</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="ext3.2/resources/css/ext-all.css"></link>
  <script type="text/javascript" src="ext3.2/adapter/ext/ext-base-debug.js"></script>
  <script type="text/javascript" src="ext3.2/ext-all-debug.js"></script>
  <script type="text/javascript" src="ext3.2/adapter/ext/ext-base.js"></script>
  <script type="text/javascript" src="ext3.2/ext-all.js"></script>
  <script type="text/javascript" src="ext3.2/src/local/ext-lang-zh_CN.js"></script>
  
  <script type="text/javascript">
      Ext.onReady(function() {
          Ext.QuickTips.init();
        var formPanel = new Ext.form.FormPanel({
          labelAlign: 'right',  //标签位置
          labelWidth: 50,       //标签宽度
          buttonAlign: 'center',
          width: 600,
          title: 'form',
          frame: true,
          items: [{
            layout: 'column',   //布局方式
            items: [{
              columnWidth: .7,  //列宽
              xtype: 'fieldset',
              checkboxToggle: true,   
              title: '单纯输入',
              autoHeight: true,
              defaults: {width: 300},
              defaultType: 'textfield',  //默认类型
              items: [{
                fieldLabel: '姓名',
                name: 'name'
              }, {
              xtype: 'combo',
              fieldLabel: '性别',
              name: 'sex',
              store: new Ext.data.SimpleStore({
                fields: ['value', 'text'],
                data: [
                  ['man', '男'],
                  ['woman', '女']
                ]
              }),
              displayField: 'text',
              valueField: 'value',
              mode: 'local',
              emptyText: '请选择'
              }, {
                xtype: 'textarea',
                fieldLabel: '个性签名',
                name: 'signature'
              }, {
                xtype: 'hidden',
                name: 'hidden'
              }]
            }, {
              columnWidth: .3,
              layout: 'form',
              items: [{
                xtype: 'fieldset',
                checkboxToggle: true,
                title: '单选',
                autoHeight: true,
                defaultType: 'radio',
                hideLabels: true,
                style: 'margin-left: 10px;',
                bodyStyle: 'margin-left: 20px;',
                items: [{
                  boxLabel: '渴望自由',
                  name: 'rad',
                  value: '1',
                  checked: true,
                  autoWidth: 'auto'
                }, {
                  boxLabel: '祈求爱情',
                  name: 'rad',
                  value: '2',
                  width: 'auto'
                }]
              }]
            }]
          }, {
            layout: 'form',
            labelAlign: 'top',
            items: [{
              xtype: 'htmleditor',
              fieldLabel: '在线编辑器',
              id: 'editor',
              anchor:'98%',
              height: 100
            }]
          }],
          buttons: [{
            text: '保存'
          }, {
            text: '取消'
          }]
        });
        
       formPanel.render('hello');
    });
</script>
  </head>
  <body>
    <div id="hello"></div>
  </body>
</html>

2：程序效果图

 

Ext Js 3.2 form表单布局的小例子_path