![无废话ExtJs 入门教程十一[下拉列表：Combobox]](https://image.shishitao.com:8440/aHR0cHM6Ly9ia3FzaW1nLmlrYWZhbi5jb20vdXBsb2FkL2NoYXRncHQtcy5wbmc%2FIQ%3D%3D.png?!?w=700&webp=1 "无废话ExtJs 入门教程十一[下拉列表：Combobox]")
extjs技术交流，欢迎加群（201926085)![无废话ExtJs 入门教程十一[下拉列表：Combobox]](https://image.shishitao.com:8440/aHR0cDovL3B1Yi5pZHFxaW1nLmNvbS93cGEvaW1hZ2VzL2dyb3VwLnBuZw%3D%3D.png?w=700&webp=1 "无废话ExtJs 入门教程十一[下拉列表：Combobox]")
继上一节内容，我们在表单里加了个一个下拉列表：
1.代码如下：
![无废话ExtJs 入门教程十一[下拉列表：Combobox]](https://image.shishitao.com:8440/aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg%3D%3D.gif?w=700&webp=1 "无废话ExtJs 入门教程十一[下拉列表：Combobox]")
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title></title>
5 <!--ExtJs框架开始-->
6 <script type="text/javascript" src="/Ext/adapter/ext/ext-base.js"></script>
7 <script type="text/javascript" src="/Ext/ext-all.js"></script>
8 <script src="/Ext/src/locale/ext-lang-zh_CN.js" type="text/javascript"></script>
9 <link rel="stylesheet" type="text/css" href="/Ext/resources/css/ext-all.css" />
10 <!--ExtJs框架结束-->
11 <style type="text/css">
12 .x-form-unit
13 {
14 height: 22px;
15 line-height: 22px;
16 padding-left: 2px;
17 display: inline-block;
18 display: inline;
19 }
20 </style>
21 <script type="text/javascript">
22
23 Ext.override(Ext.form.TextField, {
24 unitText: '',
25 onRender: function (ct, position) {
26 Ext.form.TextField.superclass.onRender.call(this, ct, position);
27 // 如果单位字符串已定义 则在后方增加单位对象
28 if (this.unitText != '') {
29 this.unitEl = ct.createChild({
30 tag: 'div',
31 html: this.unitText
32 });
33 this.unitEl.addClass('x-form-unit');
34 // 增加单位名称的同时 按单位名称大小减少文本框的长度 初步考虑了中英文混排 未考虑为负的情况
35 this.width = this.width - (this.unitText.replace(/[^\x00-\xff]/g, "xx").length * 6 + 2);
36 // 同时修改错误提示图标的位置
37 this.alignErrorIcon = function () {
38 this.errorIcon.alignTo(this.unitEl, 'tl-tr', [2, 0]);
39 };
40 }
41 }
42 });
43
44 Ext.onReady(function () {
45 //初始化标签中的Ext:Qtip属性。
46 Ext.QuickTips.init();
47 Ext.form.Field.prototype.msgTarget = 'side';
48
49 //提交按钮处理方法
50 var btnsubmitclick = function () {
51 Ext.MessageBox.alert('提示', '你点了确定按钮!');
52 }
53 //重置按钮"点击时"处理方法
54 var btnresetclick = function () {
55 Ext.MessageBox.alert('提示', '你点了重置按钮!');
56 }
57 //重置按钮"鼠标悬停"处理方法
58 var btnresetmouseover = function () {
59 Ext.MessageBox.alert('提示', '你鼠标悬停在重置按钮之上!');
60 }
61 //提交按钮
62 var btnsubmit = new Ext.Button({
63 text: '提交',
64 handler: btnsubmitclick
65 });
66 //重置按钮
67 var btnreset = new Ext.Button({
68 text: '重置',
69 listeners: {
70 'mouseover': btnresetmouseover,
71 'click': btnresetclick
72 }
73 });
74 //用户名input
75 var txtusername = new Ext.form.TextField({
76 width: 140,
77 allowBlank: false,
78 maxLength: 20,
79 name: 'username',
80 fieldLabel: '用户名称',
81 blankText: '请输入用户名',
82 maxLengthText: '用户名不能超过20个字符'
83 });
84 //密码input
85 var txtpassword = new Ext.form.TextField({
86 width: 140,
87 allowBlank: false,
88 maxLength: 20,
89 inputType: 'password',
90 name: 'password',
91 fieldLabel: '密码',
92 blankText: '请输入密码',
93 maxLengthText: '密码不能超过20个字符'
94 });
95 var numberfield = new Ext.form.NumberField({
96 fieldLabel: '身高',
97 width: 80,
98 decimalPrecision: 1,
99 minValue: 0.01,
100 maxValue: 200,
101 unitText: ' cm',
102 allowBlank: false,
103 blankText: '请输入身高'
104 });
105
106 var hiddenfield = new Ext.form.Hidden({
107 name: 'userid',
108 value: '1'
109 });
110
111 var datefield = new Ext.form.DateField({
112 fieldLabel: '出生日期',
113 format: 'Y-m-d',
114 editable: false,
115 allowBlank: false,
116 blankText: '请选择日期'
117 });
118 var radiogroup = new Ext.form.RadioGroup({
119 fieldLabel: '性别',
120 width: 100,
121 items: [{
122 name: 'sex',
123 inputValue: '0',
124 boxLabel: '男',
125 checked: true
126 }, {
127 name: 'sex',
128 inputValue: '1',
129 boxLabel: '女'
130 }]
131 });
132 //获取单选组的值
133 radiogroup.on('change', function (rdgroup, checked) {
134 alert(checked.getRawValue());
135 });
136 var checkboxgroup = new Ext.form.CheckboxGroup({
137 fieldLabel: '兴趣爱好',
138 width: 170,
139 items: [{
140 boxLabel: '看书',
141 inputValue: '0'
142 }, {
143 boxLabel: '上网',
144 inputValue: '1'
145 }, {
146 boxLabel: '听音乐',
147 inputValue: '2'
148 }]
149 });
150 //获取复选组的值
151 checkboxgroup.on('change', function (cbgroup, checked) {
152 for (var i = 0; i < checked.length; i++) {
153 alert(checked[i].getRawValue());
154 }
155 });
156 //----------------------下拉列表开始----------------------//
157 //创建数据源[数组数据源]
158 var combostore = new Ext.data.ArrayStore({
159 fields: ['id', 'name'],
160 data: [[1, '团员'], [2, '党员'], [3, '其他']]
161 });
162 //创建Combobox
163 var combobox = new Ext.form.ComboBox({
164 fieldLabel: '政治面貌',
165 store: combostore,
166 displayField: 'name',
167 valueField: 'id',
168 triggerAction: 'all',
169 emptyText: '请选择...',
170 allowBlank: false,
171 blankText: '请选择政治面貌',
172 editable: false,
173 mode: 'local'
174 });
175 //Combobox获取值
176 combobox.on('select', function () {
177 alert(combobox.getValue());
178 })
179 //----------------------下拉列表结束----------------------//
180 //表单
181 var form = new Ext.form.FormPanel({
182 frame: true,
183 title: '表单标题',
184 style: 'margin:10px',
185 html: '<div style="padding:10px">这里表单内容</div>',
186 items: [txtusername, txtpassword, numberfield, hiddenfield, datefield, radiogroup,
187 checkboxgroup, combobox],
188 buttons: [btnsubmit, btnreset]
189 });
190 //窗体
191 var win = new Ext.Window({
192 title: '窗口',
193 width: 476,
194 height: 374,
195 html: '<div>这里是窗体内容</div>',
196 resizable: true,
197 modal: true,
198 closable: true,
199 maximizable: true,
200 minimizable: true,
201 buttonAlign: 'center',
202 items: form
203 });
204 win.show();
205 });
206 </script>
207 </head>
208 <body>
209 <!--
210 说明：
211 (1)var combostore = new Ext.data.ArrayStore():创建一个新的数组数据源。
212 (2)fields: ['id', 'name']：数据源包含两列，列名分别为'id','name'。
213 (3)data: [[1, '团员'], [2, '党员'], [3, '其他']]:数据源对应的数据，例：id:1,name:团员。
214 (4)var combobox = new Ext.form.ComboBox()：创建一个新的下拉列表。
215 (5)store: combostore:数据源为上面创建的数据源，这个属性是combobox的必需属性。
216 (6)displayField: 'name',valueField: 'id'：combobox对应数据源的显示列与值列，这两个属性也是必须的。
217 (7)mode: 'local'：指定数据源为本地数据源，如果是本地创建的数据源，该属性也是必须的，如果数据源来自于服务器，
218 设置为'remote'表示数据源来自于服务器，关于服务器交互后面我们会讲解。
219 (8)triggerAction: 'all'：请设置为”all”,否则默认 为”query”的情况下，你选择某个值后，再此下拉时，只出现匹配选项，
220 如果设为all的话，每次下拉均显示全部选项。
221 (9)editable: false:默认情况下，combobox的内容是可以编辑的，该属性设置为false，
222 使下拉列表只能选择不能编辑。
223 (10)combobox.on('select', function () {alert(combobox.getValue());}):选择时alert出下拉列表的值。
224 -->
225 </body>
226 </html>
2.效果如下：
![无废话ExtJs 入门教程十一[下拉列表：Combobox]](https://image.shishitao.com:8440/aHR0cHM6Ly9waWMwMDIuY25ibG9ncy5jb20vaW1hZ2VzLzIwMTIvNDE0NTMzLzIwMTIwNjIzMTkwMzMxODQuanBn.jpg?w=700&webp=1 "无废话ExtJs 入门教程十一[下拉列表：Combobox]")
3.说明：
combo这个组件是需要绑定一个数据源才能使用,所以store和displayField和valueField是必须的
4.常用属性
1.valueField:"字符型"，value值字段
2.displayField："字符型",显示文本字段
3.editable：false//false则不可编辑，默认为 true
4.triggerAction:”all”//请设置为”all”,否则默认 为”query”的情况下，你选择某个值后，再此下拉时，只出现匹配选项，如果设为”all”的话，每次下拉均显示全部选项
5.hiddenName:string //真正提交时此combo的name，请一定要注意。
6.typeAhead:true,//延时查询，与下面的参数配合
7.typeAheadDelay:3000,//默认250
活到老,学到老,练到老...