Ext2.0的form不单增加了时间输入控件、隐藏输入控件，还修改了创建方法，通过formpanel代替了原来form，column也根据新的布局定义更新了定义方式。总体来说，定义一个form更简单便捷了。本文将通过一个实例介绍一下2.0的form的创建以及其大部分控件的使用方法，因水平有限，错漏难免，忘大家多多谅解！

1. Ext.QuickTips.init();
2. Ext.form.Field.prototype.msgTarget = 'side';

第一句的目的是为需要的元件提供提示信息功能，form的主要提示信息就是客户端验证的错误信息了。

1. var simpleForm = new Ext.FormPanel({
2. labelAlign: 'left',
3. title: '表单例子',
4. buttonAlign:'right',
5. bodyStyle:'padding:5px',
6. width: 600,
7. frame:true,
8. labelWidth:80,
9. items: [],
10. buttons: []
11. });
12. simpleForm.render(document.body);

1. <div style='background:black;width:200px;height:200px;'>
2. </div>

然后在里面加入2个div，每个宽度和高度都是200，背景色一个是红色，一个是绿色：

1. <div style='background:black;width:200px;height:200px;'>
2. <div style='background:red;width:50px;height:50px;'></div>
3. <div style='background:green;width:50px;height:50px;'></div>
4. </div>

我们来看看效果：

在没有使用float之前，两个子div是分别各占一行的。好，现在我们在两个子div中加入“float:left”在看看效果：

1. <div style='background:black;width:200px;height:200px;'>
2. <div style='background:red;width:50px;height:50px;float:left;'></div>
3. <div style='background:green;width:50px;height:50px;float:left;'></div>
4. </div>

两个子div出现在同一行了。我们复制一下两个子div，粘贴两次，然后看看效果：

1. <div style='background:black;width:200px;height:200px;'>
2. <div style='background:red;width:50px;height:50px;float:left;'></div>
3. <div style='background:green;width:50px;height:50px;float:left;'></div>
4. <div style='background:red;width:50px;height:50px;float:left;'></div>
5. <div style='background:green;width:50px;height:50px;float:left;'></div>
6. <div style='background:red;width:50px;height:50px;float:left;'></div>
7. <div style='background:green;width:50px;height:50px;float:left;'></div>
8. </div>

1. {
2. layout:'column',
3. border:false,
4. labelSeparator:'：',
5. items:[]
6. }

1. {
2. columnWidth:.5,
3. layout: 'form',
4. border:false,
5. items: [{
6. xtype:'textfield',
7. fieldLabel: '姓名',
8. name: 'name',
9. anchor:'90%'
10. }]
11. }

1. {
2. columnWidth:.25,
3. layout: 'form',
4. border:false,
5. items: [{
6. style:'margin-top:5px',
7. xtype:'radio',
8. fieldLabel: '性别',
9. boxLabel:'男',
10. name: 'sex',
11. checked:true,
12. inputValue:'男',
13. anchor:'95%'
14. }]
15. },{
16. columnWidth:.25,
17. layout: 'form',
18. labelWidth:0,
19. labelSeparator:'',
20. hideLabels:true,
21. border:false,
22. items: [{
23. style:'margin-top:5px',
24. xtype:'radio',
25. fieldLabel: '',
26. boxLabel:'女',
27. name: 'sex',
28. inputValue:'女',
29. anchor:'95%'
30. }]
31. }

1. {
2. columnWidth:.5,
3. layout: 'form',
4. border:false,
5. items: [{
6. xtype:'datefield',
7. fieldLabel: '出生日期',
8. name: 'birthday',
9. anchor:'90%'
10. }]
11. }

日期控件的列宽也是50%，列的其它设置没有变化。控件的类型为datefield，标题是出生日期，input的name属性是birthday，intput宽度也是设置了90%，出来留出空位给错误信息外，还可以让控件与上一行的姓名的宽度相同，整列看起来比较整齐。

1. Date.dayNames = [
2. "周日",
3. "周一",
4. "周二",
5. "周三",
6. "周四",
7. "周五",
8. "周六"
9. ];

因为在日期选择中显示的区域不够宽，只能显示一个汉字，所以需要将上面定义的把“周”去掉，修改为：

1. Date.dayNames = [
2. "日",
3. "一",
4. "二",
5. "三",
6. "四",
7. "五",
8. "六"
9. ];

在年份和月份选择中的按钮文字还是英文“ok”和“cancel”的，这里我们也需要修改一下：

1. if(Ext.DatePicker){
2. Ext.apply(Ext.DatePicker.prototype, {
3. todayText         : "今天",
4. minText           : "日期在最小日期之前",
5. maxText           : "日期在最大日期之后",
6. disabledDaysText  : "",
7. disabledDatesText : "",
8. monthNames      : Date.monthNames,
9. dayNames          : Date.dayNames,
10. nextText          : '下月 (Control+Right)',
11. prevText          : '上月 (Control+Left)',
12. monthYearText     : '选择一个月 (Control+Up/Down 来改变年)',
13. todayTip          : "{0} (Spacebar)",
14. okText            : "确定",
15. cancelText        : "取消",
16. format            : "y年m月d日"
17. });
18. }

上面定义中黑色字体部分就是要加入的代码。如果不喜欢默认格式是“y年m月d日”，需要修改：

1. if(Ext.form.DateField){
2. Ext.apply(Ext.form.DateField.prototype, {
3. disabledDaysText  : "禁用",
4. disabledDatesText : "禁用",
5. minText           : "该输入项的日期必须在 {0} 之后",
6. maxText           : "该输入项的日期必须在 {0} 之前",
7. invalidText       : "{0} 是无效的日期 - 必须符合格式： {1}",
8. format            : "Y-m-d"
9. });
10. }

修改DatePicker不会改变DateField的格式的，这个自己根据情况决定，呵呵。

1. {
2. columnWidth:.5,
3. layout: 'form',
4. border:false,
5. items: [{
6. xtype:'combo',
7. store: new Ext.data.SimpleStore(
8. {
9. fields: ["retrunValue", "displayText"],
10. data: [[1,'小学'],[2,'初中'],[3,'高中'],[4,'中专'],[5,'大专'],[6,'大学']]
11. }),
12. valueField :"retrunValue",
13. displayField: "displayText",
14. mode: 'local',
15. forceSelection: true,
16. blankText:'请选择学历',
17. emptyText:'选择学历',
18. hiddenName:'education',
19. editable: false,
20. triggerAction: 'all',
21. allowBlank:false,
22. fieldLabel: '学历',
23. name: 'education',
24. anchor:'90%'
25. }]
26. }

列的定义就不说了，没变化。在items里，类型设置成combo了，在这里定义了一个sotre属性，就是选择值存储的地方，因为是在客户端的数据，所以使用了一个简单存储（SimpleStore）。在存储里，我们通过一个数组定义了retrunValue和displayText两个字段。retrunValue字段指定是提交给后台的值，displayText字段指定是在下拉中显示的选择值。然后我们在data里定义了几组数据（data: [[1,'小学'],[2,'初中'],[3,'高中'],[4,'中专'],[5,'大专'],[3,'大学']]），我们可以看到，每组数据都是根据fiedls的定义来组成的，数组里第一个值就是retrunValue的值，第二个值就是displayText的值，例如[1,'小学']，就表示retrunValue是1，displayText是小学。

1. {
2. columnWidth:.35,
3. layout: 'form',
4. border:false,
5. items: [{
6. xtype:'checkbox',
7. fieldLabel: '权限组',
8. boxLabel:'系统管理员',
9. name: 'popedom',
10. inputValue:'1',
11. anchor:'95%'
12. }]
13. },{
14. columnWidth:.2,
15. layout: 'form',
16. labelWidth:0,
17. labelSeparator:'',
18. hideLabels:true,
19. border:false,
20. items: [{
21. xtype:'checkbox',
22. fieldLabel: '',
23. boxLabel:'管理员',
24. name: 'pepedom',
25. inputValue:'2',
26. anchor:'95%'
27. }]
28. },{
29. columnWidth:.2,
30. layout: 'form',
31. labelWidth:0,
32. labelSeparator:'',
33. hideLabels:true,
34. border:false,
35. items: [{
36. xtype:'checkbox',
37. fieldLabel: '',
38. boxLabel:'普通用户',
39. name: 'pepedom',
40. inputValue:'3',
41. anchor:'95%'
42. }]
43. },{
44. columnWidth:.25,
45. layout: 'form',
46. labelWidth:0,
47. labelSeparator:'',
48. hideLabels:true,
49. border:false,
50. items: [{
51. xtype:'checkbox',
52. fieldLabel: '',
53. boxLabel:'访客',
54. name: 'pepedom',
55. inputValue:'4',
56. anchor:'95%'
57. }]
58. }

checkbox的设置和radio的设置大同小异，大家注意列宽的定义就行。

1. {
2. columnWidth:.5,
3. layout: 'form',
4. border:false,
5. items: [{
6. xtype:'textfield',
7. fieldLabel: '电子邮件',
8. name: 'email',
9. vtype:'email',
10. allowBlank:false,
11. anchor:'90%'
12. }]
13. },{
14. columnWidth:.5,
15. layout: 'form',
16. border:false,
17. items: [{
18. xtype:'textfield',
19. fieldLabel: '个人主页',
20. name: 'url',
21. vtype:'url',
22. anchor:'90%'
23. }]
24. }]
25. }

这里的定义和普通的文本输入框没什么区别，只是多了一个vtypes的属性定义。Vtypes里总共定义了email、url、alpha和alphanum四种类型数据格式，email和url这个不用介绍了，呵呵。alpha是字母和下划线的组合，alphanum是字母、下划线和数字的组合。

1. {
2. xtype:'tabpanel',
3. plain:true,
4. activeTab: 0,
5. height:235,
6. defaults:{bodyStyle:'padding:10px'},
7. items:[]
8. }

要注意的是，这个tabpanel不是在上面coulmn的items里加的，因为不在column里。我们加在formpanel里。把item类型设置为'tabpanel'就行了，然后将标签页头的背景设置为透明的（plain:true），当前活动的标签页是第一页（activeTab: 0），高度设置为235px（height:235），tab页的面板使用内补丁10px（defaults:{bodyStyle:'padding:10px'}）。

1. {
2. title:'登录信息',
3. layout:'form',
4. defaults: {width: 230},
5. defaultType: 'textfield',
6. items: [{
7. fieldLabel: '登录名',
8. name: 'loginID',
9. allowBlank:false,
10. vtype:'alphanum',
11. allowBlank:false
12. },{
13. inputType:'password',
14. fieldLabel: '密码',
15. name: 'password',
16. allowBlank:false
17. }]
18. }

在标签定义了，设置了标签标题是登录信息（title:'登录信息'），控件容器是formlayout（layout:'form'），控件的默认宽度是230px（defaults: {width: 230}），默认控件类型是textfield（defaultType: 'textfield'）。

1. {
2. title:'数字时间字母',
3. layout:'form',
4. defaults: {width: 230},
5. defaultType: 'textfield',
6. items: [{
7. xtype:'numberfield',
8. fieldLabel: '数字',
9. name: 'number'
10. },{
11. xtype:'timefield',
12. fieldLabel: '时间',
13. name: 'time'
14. },{
15. fieldLabel: '纯字母',
16. name: 'char',
17. vtype:'alpha'
18. }]
19. }

Numberfield顾名思义就是只能输入数字的输入控件。在该例子，没做最大值、最小值任何限制，如果要设置最大值和最小值，分别设置maxValue和minValue两个属性就行了。如果要设置数字输入长度，例如身份证号码，可以设置maxLength和minLength两个属性。可以通过设置maxText、minText、maxLengthText和minLengthText设置各自的验证出错信息。可通过allowDecimals属性设置是否只允许输入整型值，默认值是true，允许输入浮点数。设置allowNegative设置是否只允许输入正数，默认值是true，允许输入正负数。通过decimalPrecision属性可设置小数点后的位数，默认值是2位。

1. if(Ext.form.TimeField){
2. Ext.apply(Ext.form.TimeField.prototype, {
3. format:'G:i:s',
4. minText : "该输入项的时间必须大于或等于： {0}",
5. maxText : "该输入项的时间必须小于或等于： {0}",
6. invalidText : "{0}不是有效的时间",
7. });
8. }

在这里，我默认定义了时间格式是24小时制的，小时为个位数是不加前缀0。

1. {
2. title:'文本区域',
3. layout:'fit',
4. items: {
5. xtype:'textarea',
6. id:'area',
7. fieldLabel:''
8. }
9. }

和textfield一样，只要设置类型为textarea就可以了，唯一的区别是为了让textarea和面板自适应面板，使用了fitlayout作为它的容器，所以在这里我们不用设置textarea的宽度和高度。

1. buttons: [{
2. text: '保存',
3. handler:function(){
4. if(simpleForm.form.isValid()){
5. this.disabled=true;
6. simpleForm.form.doAction('submit',{
7. url:'test.asp',
8. method:'post',
9. params:'',
10. success:function(form,action){
11. Ext.Msg.alert('操作',action.result.data);                                                        this.disabled=false;
12. },
13. failure:function(){
14. Ext.Msg.alert('操作','保存失败！');
15. this.disabled=false;
16. }
17. });
18. }
19. }
20. },{
21. text: '取消',
22. handler:function(){simpleForm.form.reset();}
23. }]

在formpanel类中，form属性指向的是formpanle里的basicform对象，我们可通过formpanle.form来使用该basicform对象。在被例子，我们已经将formpanel对象赋值给了simpleForm这个变量，所以我们可以通过simpleForm.form访问面板里的basicform对象。

1. onSubmit: Ext.emptyFn,        submit: function() {            this.getEl().dom.submit();
2. }

第一个设置的目的是取消formpanel的默认提交函数。第二就是设置新的提交方式为旧方式提交。

1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2. <html>
3. <head>
4. <title>简单的表单例子</title>
5. <meta http-equiv="content-type" content="text/html; charset=utf-8">
6. <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css">
7. </head>
8. <body>
9. <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
10. <script type="text/javascript" src="../../ext-all.js"></script>
11. <script type="text/javascript" src="../../ext-lang-zh_CN.js"></script>
12. <script>
13. Ext.QuickTips.init();
14. Ext.form.Field.prototype.msgTarget = 'side';
15. var simpleForm = new Ext.FormPanel({
16. labelAlign: 'left',
17. title: '表单例子',
18. buttonAlign:'right',
19. bodyStyle:'padding:5px',
20. width: 600,
21. frame:true,
22. labelWidth:80,
23. items: [{
24. layout:'column',
25. border:false,
26. labelSeparator:'：',
27. items:[{
28. columnWidth:.5,
29. layout: 'form',
30. border:false,
31. items: [{
32. xtype:'textfield',
33. fieldLabel: '姓名',
34. name: 'name',
35. anchor:'90%'
36. }]
37. },{
38. columnWidth:.25,
39. layout: 'form',
40. border:false,
41. items: [{
42. style:'margin-top:5px',
43. xtype:'radio',
44. fieldLabel: '性别',
45. boxLabel:'男',
46. name: 'sex',
47. checked:true,
48. inputValue:'男',
49. anchor:'95%'
50. }]
51. },{
52. columnWidth:.25,
53. layout: 'form',
54. labelWidth:0,
55. labelSeparator:'',
56. hideLabels:true,
57. border:false,
58. items: [{
59. style:'margin-top:5px',
60. xtype:'radio',
61. fieldLabel: '',
62. boxLabel:'女',
63. name: 'sex',
64. inputValue:'女',
65. anchor:'95%'
66. }]
67. },{
68. columnWidth:.5,
69. layout: 'form',
70. border:false,
71. items: [{
72. xtype:'datefield',
73. fieldLabel: '出生日期',
74. name: 'birthday',
75. anchor:'90%'
76. }]
77. },{
78. columnWidth:.5,
79. layout: 'form',
80. border:false,
81. items: [{
82. xtype:'combo',
83. store: new Ext.data.SimpleStore(
84. {
85. fields: ["retrunValue", "displayText"],
86. data: [[1,'小学'],[2,'初中'],[3,'高中'],[4,'中专'],[5,'大专'],[6,'大学']]
87. }),
88. valueField :"retrunValue",
89. displayField: "displayText",
90. mode: 'local',
91. forceSelection: true,
92. blankText:'请选择学历',
93. emptyText:'选择学历',
94. hiddenName:'education',
95. editable: false,
96. triggerAction: 'all',
97. allowBlank:false,
98. fieldLabel: '学历',
99. name: 'education',
100. anchor:'90%'
101. }]
102. },{
103. columnWidth:.35,
104. layout: 'form',
105. border:false,
106. items: [{
107. xtype:'checkbox',
108. fieldLabel: '权限组',
109. boxLabel:'系统管理员',
110. name: 'popedom',
111. inputValue:'1',
112. anchor:'95%'
113. }]
114. },{
115. columnWidth:.2,
116. layout: 'form',
117. labelWidth:0,
118. labelSeparator:'',
119. hideLabels:true,
120. border:false,
121. items: [{
122. xtype:'checkbox',
123. fieldLabel: '',
124. boxLabel:'管理员',
125. name: 'pepedom',
126. inputValue:'2',
127. anchor:'95%'
128. }]
129. },{
130. columnWidth:.2,
131. layout: 'form',
132. labelWidth:0,
133. labelSeparator:'',
134. hideLabels:true,
135. border:false,
136. items: [{
137. xtype:'checkbox',
138. fieldLabel: '',
139. boxLabel:'普通用户',
140. name: 'pepedom',
141. inputValue:'3',
142. anchor:'95%'
143. }]
144. },{
145. columnWidth:.25,
146. layout: 'form',
147. labelWidth:0,
148. labelSeparator:'',
149. hideLabels:true,
150. border:false,
151. items: [{
152. xtype:'checkbox',
153. fieldLabel: '',
154. boxLabel:'访客',
155. name: 'pepedom',
156. inputValue:'4',
157. anchor:'95%'
158. }]
159. },{
160. columnWidth:.5,
161. layout: 'form',
162. border:false,
163. items: [{
164. xtype:'textfield',
165. fieldLabel: '电子邮件',
166. name: 'email',
167. vtype:'email',
168. allowBlank:false,
169. anchor:'90%'
170. }]
171. },{
172. columnWidth:.5,
173. layout: 'form',
174. border:false,
175. items: [{
176. xtype:'textfield',
177. fieldLabel: '个人主页',
178. name: 'url',
179. vtype:'url',
180. anchor:'90%'
181. }]
182. }]
183. },{
184. xtype:'tabpanel',
185. plain:true,
186. activeTab: 0,
187. height:235,
188. defaults:{bodyStyle:'padding:10px'},
189. items:[{
190. title:'登录信息',
191. layout:'form',
192. defaults: {width: 230},
193. defaultType: 'textfield',
194. items: [{
195. fieldLabel: '登录名',
196. name: 'loginID',
197. allowBlank:false,
198. vtype:'alphanum',
199. allowBlank:false
200. },{
201. inputType:'password',
202. fieldLabel: '密码',
203. name: 'password',
204. allowBlank:false
205. }]
206. },{
207. title:'数字时间字母',
208. layout:'form',
209. defaults: {width: 230},
210. defaultType: 'textfield',
211. items: [{
212. xtype:'numberfield',
213. fieldLabel: '数字',
214. name: 'number'
215. },{
216. xtype:'timefield',
217. fieldLabel: '时间',
218. name: 'time'
219. },{
220. fieldLabel: '纯字母',
221. name: 'char',
222. vtype:'alpha'
223. }]
224. },{
225. title:'文本区域',
226. layout:'fit',
227. items: {
228. xtype:'textarea',
229. id:'area',
230. fieldLabel:''
231. }
232. }]
233. }],
234. buttons: [{
235. text: '保存',
236. handler:function(){
237. if(simpleForm.form.isValid()){
238. this.disabled=true;
239. simpleForm.form.doAction('submit',{
240. url:'test.asp',
241. method:'post',
242. params:'',
243. success:function(form,action){
244. Ext.Msg.alert('操作',action.result.data);
245. this.disabled=false;
246. },
247. failure:function(){
248. Ext.Msg.alert('操作','保存失败！');
249. this.disabled=false;
250. }
251. });
252. }
253. }
254. },{
255. text: '取消',
256. handler:function(){simpleForm.form.reset();}
257. }]
258. });
259. simpleForm.render(document.body);
260. </script>
261. </body>
262. </html>

后台文件的代码(ASP)：

1. <%@Language=VBScript  CodePage=65001%>
2. <%
3. dim temp
4. For Each x In Request.Form
5. temp=temp& x & "：" & Request.Form(x) & ","
6. next
7. Response.Charset="utf-8"
8. Session.CodePage=65001
9. response.write "{success:true,data:'"&temp&"'}"
10. %>

CSS属性float的测试文件代码：

1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2. <html>
3. <head>
4. <title>float测试例子</title>
5. <meta http-equiv="content-type" content="text/html; charset=utf-8">
6. </head>
7. <body>
8. <div style='background:black;width:200px;height:200px;'>
9. <div style='background:red;width:50px;height:50px;float:left;'></div>
10. <div style='background:green;width:50px;height:50px;float:left;'></div>
11. <div style='background:red;width:50px;height:50px;float:left;'></div>
12. <div style='background:green;width:50px;height:50px;float:left;'></div>
13. <div style='background:red;width:50px;height:50px;float:left;'></div>
14. <div style='background:green;width:50px;height:50px;float:left;'></div>
15. </div>
16. </body>
17. </html>