毒品对身体的影响:EXT表单组件常见属性介绍（三）

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

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

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: "