EXT表单组件常见属性介绍（三）
本范例展⽰如何使⽤表单的各种组件。
下拉框组件展⽰了5种使⽤范例：普通下拉框、绑定HTML组件的下拉框、树形下拉框、分页下拉框、多选下拉框等。
Js代码
1. Ready(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"html colspan属性
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: ptyFn,
125. tpl: "<tpl for='.'><div id='tree'></div></tpl>"
126. });
127.
128. var root = TreeNode({
129. nodeId: 1,
130. text: "根节点",
131. expanded: true
132. });
133. root.appendChild(TreeNode({nodeId:2, text:"节点A", leaf:true})); 134. root.appendChild(TreeNode({nodeId:3, text:"节点B", leaf:true})); 135.
136. var tree = TreePanel({
137. root: root,
138. border: false,
139. autoHeight: true,
140. autoScroll: true
141. });
142.
143. ("click", function(node){
144. if(!node.isLeaf()) return; //只能选择叶节点
145. //下拉框的隐藏值
146. if(cmbManager.hiddenField){
147. cmbManager.hiddenField.value = deId; 148. }
149. cmbManager.); //下拉框的显⽰值150. llapse(); //折叠下拉框
151. });
152.
153. ("expand", function(){
154. der("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]},
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论