利用ExtJs的Anchor可以为ExtJs自带的表单Form各个组件进行布局，当然，使用《【ExtJs】带日期组件的文本输入框、容器与Ext.Msg.alert告警框告警两次》（点击打开链接）中的vbox也是可以的。其实ExtJs的表单插件与表单布局并不是关键，ExtJs的表单验证还好，就几行语句就能够完成。关键是ExtJs的表单提交必须通过Ajax方式，而在后台必须传回一个Json完成表单的提交，可能有点复杂，下面就以php作为ExtJs的后台处理来说明问题ExtJs的表单。aspx,jsp等各位只要改好参数获取语句一样可以的。
一、基本目标
如下图，这是在Windows2003自带的纯种IE6浏览器执行的效果，首先在浏览器中有一个按钮，点击之后可以打开表单窗口，用户填写的信息必须符合要求，如果没有通过验证，表单的“确定”按钮是灰色状态，当然，点击“关闭”按钮能够随时关闭这个对话框的。
这里面有文本框、密码框、复选框、下拉列表、单选框，所有的值都能够传到后台的formSubmit.php处理之后，再传回来前台。这里不推荐使用ExtJs的颜色组件，因为所有不兼容IE6的插件都是骗人的坏人！
二、基本思想
整个表单的布局如下图，皆是纯粹的ExtJs表单组件，没有用到HTML来布置。
而Login.html这个页面的HTML布局仅仅是一个带id=btn1的按钮，其余所有布局皆由JavaScript脚本完成。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ""><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Ext表单</title><script type="text/javascript" src="js/ext-all.js"></script><script type="text/javascript" src="js/bootstrap.js"></script><script type="text/javascript" src="js/ext-lang-zh_CN.js"></script><link href="ext-theme-classic/ext-theme-classic-all.css" rel="stylesheet" type="text/css"></head><body><button id="btn1" type="button">打开表单</button></body></html>
三、核心脚本
1、Login.html
这个前端页面不含有任何的后端语言
（1）首先可以声明一个名为window1的window，里面的就放一个名为form1的form，指明btn1的onclick事件为显示window1。这部分与《【ExtJs】折叠式布局与卡片式布局》（点击打开链接）一模一样。不再赘述了。
var window1=Ext.create('Ext.window.Window', {renderTo: Ext.getBody(),header: false,border: false, //没有边框resizable: false, //不可以自由调整大小，默认可以width: 400,items:[form1]});window1.show();（2）之后再声明表单使用ExtJs未能通过验证的错误消息，如果没有这两行，ExtJs对于未能通过验证的表单，不会有任何错误的提醒。
Ext.QuickTips.init();Ext.form.Field.prototype.msgTarget = 'side';（3）其后是真正的核心，ExtJs的表单var form1 = Ext.create('Ext.form.Panel', {width: 400,method: 'POST',layout: 'anchor',title: 'Ext表单',items: [{fieldLabel: '用户名',xtype: 'textfield',name: 'username',regex: /^[A-Za-z]{4,12}$/,//正则表达式regexText: '必须4-12个英文字符',anchor: '90%'}, {fieldLabel: '密码',xtype: 'textfield',inputType: 'password',//密码name: 'password',regex: /^[A-Za-z]{4,12}$/,//正则表达式regexText: '必须4-12个英文字符',anchor: '90%'}, {fieldLabel: '复选选框',xtype: 'checkboxgroup',items: [{boxLabel: '选项1',name: 'c1'}, {boxLabel: '选项2',name: 'c2',checked: true}]}, {fieldLabel: '下拉列表',xtype: 'combobox',layout: 'hbox',querymode: 'local',valueField: 'id',//列表value值使用store中的id字段displayField: 'name',//显示值使用store中的name字段forceSelection: true,//不得自由输入，不得为空，必须从下拉列表中选择一项name:'combobox',allowBlank: false,store: {fields: ['id', 'name'],data: [{'id': 'c1',name: 'c1'}, {'id': 'c2',name: 'c2'}, {'id': 'c3',name: 'c3'}]}}, {fieldLabel: '单选框',xtype: 'radiogroup',allowBlank: false,items: [{boxLabel: '选项1',name: 'radiobox',inputValue: 'r1'}, {boxLabel: '选项2',name: 'radiobox',inputValue: 'r2'}, {boxLabel: '选项3',name: 'radiobox',inputValue: 'r3'}]}],bbar: [{xtype: 'tbfill'}, {xtype: 'button',text: '确定',disabled: true,formBind: true,listeners: {click: function(){var thisForm = form1.getForm();thisForm.submit({url: "formSubmit.php",success: function(form, action){Ext.Msg.alert('Success', action.result.msg, function(){window1.hide();});}});}}}, {xtype: 'button',text: '关闭',listeners: {click: function(){window1.hide();}}}, {xtype: 'tbfill'}]});声明这个表单的宽度、提交方式、布局为anchor、标题等基本信息之后，关键是items中的内容，这里面就是ExtJs的一个又一个表单组件。飞机一阵抖动，我终于说出了最后一句再见。
