无废话ExtJs 入门教程十一[下拉列表:Combobox]

继上一节内容,我们在表单里加了个一个下拉列表:

1.代码如下:

  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.效果如下:

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

posted @ 2012-06-23 19:09  李林峰的园子  阅读(48494)  评论(12编辑  收藏  举报