EXT表单组件常见属性引见（三）

本范例展示如何使用表单的各种组件。

下拉框组件展示了5种使用范例：普通下拉框、绑定HTML组件的下拉框、树形下拉框、分页下拉框、多选下拉框等。

??

?

Js代码

1. Ext.onReady(function(){ ??
2. ????Ext.BLANK_IMAGE_URL?=?"/widgets/ext-2.2/resources/images/default/s.gif";? ??
3. ????Ext.QuickTips.init(); ??
4. ????Ext.form.Field.prototype.msgTarget?=?"qtip"; ??
5. ??
6. ????//component ??
7. ????var?hiddenField?=?new?Ext.form.Hidden({ ??
8. ????????name:?"hiddenField", ??
9. ????????value:?"1"??
10. ????}); ??
11. ??
12. ????var?usernameField?=?new?Ext.form.TextField({ ??
13. ????????name:?"username", ??
14. ????????fieldLabel:?"用户名", ??
15. ????????allowBlank:?true, ??
16. ????????blankText:?"请输入用户名！"??
17. ????}); ??
18. ??
19. ????var?pwdField?=?new?Ext.form.TextField({ ??
20. ????????name:?"password", ??
21. ????????fieldLabel:?"密码", ??
22. ????????allowBlank:?true, ??
23. ????????blankText:?"请输入密码！", ??
24. ????????inputType:?"password"??
25. ????}); ??
26. ??
27. ????var?ageField?=?new?Ext.form.NumberField({ ??
28. ????????name:?"age", ??
29. ????????allowBlank:?true, ??
30. ????????blankText:?"请输入年龄！", ??
31. ????????fieldLabel:?"年龄", ??
32. ????????allowDecimals:?false, ??
33. ????????allowNegative:?false, ??
34. ????????minValue:?18, ??
35. ????????minText:?"年龄不能少于18", ??
36. ????????maxValue:?100, ??
37. ????????maxText:?"年龄不能大于100"??
38. ????}); ??
39. ??
40. ????var?love1?=?new?Ext.form.Checkbox({ ??
41. ????????name:?"love1", ??
42. ????????boxLabel:?"打球", ??
43. ????????inputValue:?"1"??
44. ????}); ??
45. ??
46. ????var?love2?=?new?Ext.form.Checkbox({ ??
47. ????????name:?"love2", ??
48. ????????boxLabel:?"游泳", ??
49. ????????inputValue:?"2"??
50. ????}); ??
51. ??
52. ????var?love3?=?new?Ext.form.Checkbox({ ??
53. ????????name:?"love3", ??
54. ????????boxLabel:?"登山", ??
55. ????????inputValue:?"3"??
56. ????}); ??
57. ??
58. ????var?loveGroup?=?new?Ext.form.CheckboxGroup({ ??
59. ????????name:?"love", ??
60. ????????columns:?[80,?80,?1.0], ??
61. ????????fieldLabel:?"爱好", ??
62. ????????items:?[love1,?love2,?love3] ??
63. ????}); ??
64. ??
65. ????var?sex1?=?new?Ext.form.Radio({ ??
66. ????????name:?"sex1", ??
67. ????????boxLabel:?"男", ??
68. ????????inputValue:?"1"??
69. ????}); ??
70. ??
71. ????var?sex2?=?new?Ext.form.Radio({ ??
72. ????????name:?"sex1", ??
73. ????????boxLabel:?"女", ??
74. ????????inputValue:?"0"??
75. ????}); ??
76. ??
77. ????var?sexGroup?=?new?Ext.form.RadioGroup({ ??
78. ????????name:?"sex", ??
79. ????????columns:?[80,?1.0], ??
80. ????????fieldLabel:?"性别", ??
81. ????????items:?[sex1,?sex2] ??
82. ????}); ??
83. ??
84. ????//本地数据源的组合框 ??
85. ????var?store?=?new?Ext.data.SimpleStore({ ??
86. ????????fields:?["code",?"name"], ??
87. ????????data:?[ ??
88. ????????????["1",?"北京"], ??
89. ????????????["5",?"上海"], ??
90. ????????????["4",??"广东"] ??
91. ????????] ??
92. ????}); ??
93. ????var?cmbProvince?=?new?Ext.form.ComboBox({ ??
94. ????????id:?"cmbProvince", ??
95. ????????hiddenName:?"province.id", ??
96. ????????fieldLabel:?"省份", ??
97. ????????resizable:?true, ??
98. ????????editable:?false, ??
99. ????????width:?100, ??
100. ????????emptyText:?"请选择...", ??
101. ????????store:?store, ??
102. ????????valueField:?"code", ??
103. ????????displayField:?"name", ??
104. ????????triggerAction:?"all", ??
105. ????????mode:?"local"??
106. ????}); ??
107. ??
108. ????//远程数据源的组合框 ??
109. ????var?store2?=?new?Ext.data.SimpleStore({ ??
110. ????????fields:?["name"], ??
111. ????????proxy:?new?Ext.data.HttpProxy({ ??
112. ????????????url:?"../testForm!loadData.action"??
113. ????????}) ??
114. ????}); ??
115. ??
116. ????var?cmbManager?=?new?Ext.form.ComboBox({ ??
117. ????????hiddenName:?"manager", ??
118. ????????fieldLabel:?"经理", ??
119. ????????editable:?false, ??
120. ????????triggerAction:?"all", ??
121. ????????mode:?"local", ??
122. ????????maxHeight:?200, ??
123. ????????store:?new?Ext.data.SimpleStore({fields:[],data:[[]]}), ??
124. ????????onSelect:?Ext.emptyFn, ??
125. ????????tpl:?"<tpl?for='.'><div?id='tree'></div></tpl>"??
126. ????}); ??
127. ??
128. ????var?root?=?new?Ext.tree.TreeNode({ ??
129. ????????nodeId:?1, ??
130. ????????text:?"根节点", ??
131. ????????expanded:?true??
132. ????}); ??
133. ????root.appendChild(new?Ext.tree.TreeNode({nodeId:2,?text:"节点A",?leaf:true})); ??
134. ????root.appendChild(new?Ext.tree.TreeNode({nodeId:3,?text:"节点B",?leaf:true})); ??
135. ??
136. ????var?tree?=?new?Ext.tree.TreePanel({ ??
137. ????????root:?root, ??
138. ????????border:?false, ??
139. ????????autoHeight:?true, ??
140. ????????autoScroll:?true??
141. ????}); ??
142. ??
143. ????tree.on("click",?function(node){??? ??
144. ????????if(!node.isLeaf())?return;?//只能选择叶节点 ??
145. ????????//下拉框的隐藏值 ??
146. ????????if(cmbManager.hiddenField){ ??
147. ????????????cmbManager.hiddenField.value?=?node.attributes.nodeId; ??
148. ????????} ??
149. ????????cmbManager.setRawValue(node.text);?//下拉框的显示值 ??
150. ????????cmbManager.collapse();?//折叠下拉框 ??
151. ????}); ??
152. ??
153. ????cmbManager.on("expand",?function(){?? ??
154. ????????tree.render("tree");??? ??
155. ????});? ??
156. ??
157. ????//分页远程数据源的组合框 ??
158. ????var?store3?=?new?Ext.data.JsonStore({ ??
159. ????????url:?"../testForm!loadData3.action", ??
160. ????????totalProperty:?"totalNum", ??
161. ????????root:?"books", ??
162. ????????fields:?["id",?"name"] ??
163. ????}); ??
164. ????var?cmbBook?=?new?Ext.form.ComboBox({ ??
165. ????????hiddenName:?"books", ??
166. ????????fieldLabel:?"书籍", ??
167. ????????store:?store3, ??
168. ????????valueField:?"name", ??
169. ????????displayField:?"name", ??
170. ????????triggerAction:?"all", ??
171. ????????mode:?"remote", ??
172. ????????queryParam:?"books", ??
173. ????????loadingText:?"正在装载数据...", ??
174. ????????width:?180, ??
175. ????????minChars:?1, ??
176. ????????editable:?false, ??
177. ????????listWidth:?250, ??
178. ????????pageSize:?3 ??
179. ????}); ??
180. ??
181. ????//HTML标准组件 ??
182. ????var?cmbPass?=?new?Ext.form.ComboBox({ ??
183. ????????hiddenName:?"status", ??
184. ????????fieldLabel:?"是否有效", ??
185. ????????triggerAction:?"all", ??
186. ????????editable:?false, ??
187. ????????width:?100, ??
188. ????????transform:?"isPass", ??
189. ????????lazyRender:?true??
190. ????}); ??
191. ??
192. ????var?cmbTimes?=?new?Ext.form.TimeField({ ??
193. ????????hiddenName:?"time", ??
194. ????????fieldLabel:?"时间", ??
195. ????????minValue:?"09:00", ??
196. ????????minText:?"所选时间应大于{0}", ??
197. ????????maxValue:?"18:00", ??
198. ????????maxText:?"所选时间应小于{0}", ??
199. ????????format:?"H时i分", ??
200. ????????increment:?30, ??
201. ????????invalidText:?"时间格式无效！", ??
202. ????????maxHeight:?200, ??
203. ????????width:?100, ??
204. ????????value:?"09时00分", ??
205. ????????editable:?false??
206. ????}); ??
207. ??
208. ????var?cmbMonths?=?new?Ext.ux.MultiSelectCombo({ ??
209. ????????hiddenName:?"months", ??
210. ????????fieldLabel:?"月份", ??
211. ????????maxHeight:?200, ??
212. ????????editable:?false, ??
213. ????????store:?[["201010","201010"],?["201009","201009"],?["201008","201008"],?["201007","201007"],?["201006","201006"]], ??
214. ????????mode:?"local", ??
215. ????????width:?180, ??
216. ????????maxItemsCount:?3, ??
217. ????????maxItemsCountText:?"最多只能选择三个选项！"??
218. ????}); ??
219. ??
220. ????var?cmbBirths?=??new?Ext.form.DateField({ ??
221. ????????name:?"births", ??
222. ????????fieldLabel:?"出生日期", ??
223. ????????disabledDays:?[0,6], ??
224. ????????disabledDaysText:?"禁止选择周末！", ??
225. ????????width:?100, ??
226. ????????readOnly:?true, ??
227. ????????format:?"Y-m-d", ??
228. ????????invalidText:?"不是有效的日期值！"??
229. ????}); ??
230. ??
231. ????var?fieldSet1?=?new?Ext.form.FieldSet({ ??
232. ????????title:?"下拉框", ??
233. ????????checkboxName:?"fieldSet1", ??
234. ????????checkboxToggle:?true, ??
235. ????????autoHeight:?true, ??
236. ????????layout:?"table", ??
237. ????????layoutConfig:?{ ??
238. ????????????columns:?3 ??
239. ????????}, ??
240. ????????defaults:?{ ??
241. ????????????style:"margin-left:8px;?margin-top:3px;?margin-right:8px;?margin-bottom:3px;?valign:top", ??
242. ????????????layout:"form", ??
243. ????????????labelAlign:?"right"??
244. ????????}, ??
245. ????????items:?[ ??
246. ????????????{rowspan:1,?colspan:1,?items:[cmbProvince]}, ??
247. ????????????{rowspan:1,?colspan:1,?items:[cmbManager]}, ??
248. ????????????{rowspan:1,?colspan:1,?items:[cmbBook]}, ??
249. ????????????{rowspan:1,?colspan:1,?items:[cmbPass]}, ??
250. ????????????{rowspan:1,?colspan:1,?items:[cmbTimes]}, ??
251. ????????????{rowspan:1,?colspan:1,?items:[cmbMonths]}, ??
252. ????????????{rowspan:1,?colspan:1,?items:[cmbBirths]}] ??
253. ????}); ??
254. ??
255. ????var?remarksField?=?new?Ext.form.TextArea({ ??
256. ????????name:?"remarks", ??
257. ????????fieldLabel:?"备注", ??
258. ????????width:?400, ??
259. ????????height:?80 ??
260. ????}); ??
261. ??
262. ????var?form?=?new?Ext.form.FormPanel({ ??
263. ????????id:?"frmAddUser", ??
264. ????????title:?"新增用户", ??
265. ????????autoWidth:?true, ??
266. ????????autoHeight:?true, ??
267. ????????frame:?true, ??
268. ????????renderTo:?Ext.getBody(), ??
269. ????????labelWidth:?70, ??
270. ????????tbar:?toolbar, ??
271. ????????items:?[hiddenField,?usernameField,?pwdField,?ageField,?loveGroup,?sexGroup,? ??
272. ????????????fieldSet1,?remarksField], ??
273. ????????url:?"../testForm!ajaxSubmitForm.action"??
274. ????}); ??
275. });??

Ext.onReady(function(){
	Ext.BLANK_IMAGE_URL = "/widgets/ext-2.2/resources/images/default/s.gif"; 
	Ext.QuickTips.init();
	Ext.form.Field.prototype.msgTarget = "qtip";

	//component
	var hiddenField = new Ext.form.Hidden({
		name: "hiddenField",
		value: "1"
	});

	var usernameField = new Ext.form.TextField({
		name: "username",
		fieldLabel: "用户名",
		allowBlank: true,
		blankText: "请输入用户名！"
	});

	var pwdField = new Ext.form.TextField({
		name: "password",
		fieldLabel: "密码",
		allowBlank: true,
		blankText: "请输入密码！",
		inputType: "password"
	});

	var ageField = new Ext.form.NumberField({
		name: "age",
		allowBlank: true,
		blankText: "请输入年龄！",
		fieldLabel: "年龄",
		allowDecimals: false,
		allowNegative: false,
		minValue: 18,
		minText: "年龄不能少于18",
		maxValue: 100,
		maxText: "年龄不能大于100"
	});

	var love1 = new Ext.form.Checkbox({
		name: "love1",
		boxLabel: "打球",
		inputValue: "1"
	});

	var love2 = new Ext.form.Checkbox({
		name: "love2",
		boxLabel: "游泳",
		inputValue: "2"
	});

	var love3 = new Ext.form.Checkbox({
		name: "love3",
		boxLabel: "登山",
		inputValue: "3"
	});

	var loveGroup = new Ext.form.CheckboxGroup({
		name: "love",
		columns: [80, 80, 1.0],
		fieldLabel: "爱好",
		items: [love1, love2, love3]
	});

	var sex1 = new Ext.form.Radio({
		name: "sex1",
		boxLabel: "男",
		inputValue: "1"
	});

	var sex2 = new Ext.form.Radio({
		name: "sex1",
		boxLabel: "女",
		inputValue: "0"
	});

	var sexGroup = new Ext.form.RadioGroup({
		name: "sex",
		columns: [80, 1.0],
		fieldLabel: "性别",
		items: [sex1, sex2]
	});

	//本地数据源的组合框
	var store = new Ext.data.SimpleStore({
		fields: ["code", "name"],
		data: [
			["1", "北京"],
			["5", "上海"],
			["4",  "广东"]
		]
	});
	var cmbProvince = new Ext.form.ComboBox({
		id: "cmbProvince",
		hiddenName: "province.id",
		fieldLabel: "省份",
		resizable: true,
		editable: false,
		width: 100,
		emptyText: "请选择...",
		store: store,
		valueField: "code",
		displayField: "name",
		triggerAction: "all",
		mode: "local"
	});

	//远程数据源的组合框
	var store2 = new Ext.data.SimpleStore({
		fields: ["name"],
		proxy: new Ext.data.HttpProxy({
			url: "../testForm!loadData.action"
		})
	});

	var cmbManager = new Ext.form.ComboBox({
		hiddenName: "manager",
		fieldLabel: "经理",
		editable: false,
		triggerAction: "all",
		mode: "local",
		maxHeight: 200,
		store: new Ext.data.SimpleStore({fields:[],data:[[]]}),
		onSelect: Ext.emptyFn,
		tpl: "<tpl for='.'><div id='tree'></div></tpl>"
	});

	var root = new Ext.tree.TreeNode({
		nodeId: 1,
		text: "根节点",
		expanded: true
	});
	root.appendChild(new Ext.tree.TreeNode({nodeId:2, text:"节点A", leaf:true}));
	root.appendChild(new Ext.tree.TreeNode({nodeId:3, text:"节点B", leaf:true}));

	var tree = new Ext.tree.TreePanel({
		root: root,
		border: false,
		autoHeight: true,
		autoScroll: true
	});

	tree.on("click", function(node){   
		if(!node.isLeaf()) return; //只能选择叶节点
		//下拉框的隐藏值
		if(cmbManager.hiddenField){
			cmbManager.hiddenField.value = node.attributes.nodeId;
		}
		cmbManager.setRawValue(node.text); //下拉框的显示值
		cmbManager.collapse(); //折叠下拉框
	});

	cmbManager.on("expand", function(){  
		tree.render("tree");   
	}); 

	//分页远程数据源的组合框
	var store3 = new Ext.data.JsonStore({
		url: "../testForm!loadData3.action",
		totalProperty: "totalNum",
		root: "books",
		fields: ["id", "name"]
	});
	var cmbBook = new Ext.form.ComboBox({
		hiddenName: "books",
		fieldLabel: "书籍",
		store: store3,
		valueField: "name",
		displayField: "name",
		triggerAction: "all",
		mode: "remote",
		queryParam: "books",
		loadingText: "正在装载数据...",
		width: 180,
		minChars: 1,
		editable: false,
		listWidth: 250,
		pageSize: 3
	});

	//HTML标准组件
	var cmbPass = new Ext.form.ComboBox({
		hiddenName: "status",
		fieldLabel: "是否有效",
		triggerAction: "all",
		editable: false,
		width: 100,
		transform: "isPass",
		lazyRender: true
	});

	var cmbTimes = new Ext.form.TimeField({
		hiddenName: "time",
		fieldLabel: "时间",
		minValue: "09:00",
		minText: "所选时间应大于{0}",
		maxValue: "18:00",
		maxText: "所选时间应小于{0}",
		format: "H时i分",
		increment: 30,
		invalidText: "时间格式无效！",
		maxHeight: 200,
		width: 100,
		value: "09时00分",
		editable: false
	});

	var cmbMonths = new Ext.ux.MultiSelectCombo({
		hiddenName: "months",
		fieldLabel: "月份",
		maxHeight: 200,
		editable: false,
		store: [["201010","201010"], ["201009","201009"], ["201008","201008"], ["201007","201007"], ["201006","201006"]],
		mode: "local",
		width: 180,
		maxItemsCount: 3,
		maxItemsCountText: "最多只能选择三个选项！"
	});

	var cmbBirths =  new Ext.form.DateField({
		name: "births",
		fieldLabel: "出生日期",
		disabledDays: [0,6],
		disabledDaysText: "禁止选择周末！",
		width: 100,
		readOnly: true,
		format: "Y-m-d",
		invalidText: "不是有效的日期值！"
	});

	var fieldSet1 = new Ext.form.FieldSet({
		title: "下拉框",
		checkboxName: "fieldSet1",
		checkboxToggle: true,
		autoHeight: true,
		layout: "table",
		layoutConfig: {
			columns: 3
		},
		defaults: {
			style:"margin-left:8px; margin-top:3px; margin-right:8px; margin-bottom:3px; valign:top",
			layout:"form",
			labelAlign: "right"
		},
		items: [
			{rowspan:1, colspan:1, items:[cmbProvince]},
			{rowspan:1, colspan:1, items:[cmbManager]},
			{rowspan:1, colspan:1, items:[cmbBook]},
			{rowspan:1, colspan:1, items:[cmbPass]},
			{rowspan:1, colspan:1, items:[cmbTimes]},
			{rowspan:1, colspan:1, items:[cmbMonths]},
			{rowspan:1, colspan:1, items:[cmbBirths]}]
	});

	var remarksField = new Ext.form.TextArea({
		name: "remarks",
		fieldLabel: "备注",
		width: 400,
		height: 80
	});

	var form = new Ext.form.FormPanel({
		id: "frmAddUser",
		title: "新增用户",
		autoWidth: true,
		autoHeight: true,
		frame: true,
		renderTo: Ext.getBody(),
		labelWidth: 70,
		tbar: toolbar,
		items: [hiddenField, usernameField, pwdField, ageField, loveGroup, sexGroup, 
			fieldSet1, remarksField],
		url: "../testForm!ajaxSubmitForm.action"
	});
});

?