无废话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
无废话ExtJs 入门教程十一[下拉列表：Combobox]的更多相关文章
- 无废话ExtJs 入门教程十二[下拉列表联动：Combobox_Two]
无废话ExtJs 入门教程十二[下拉列表联动:Combobox_Two] extjs技术交流,欢迎加群(201926085) 不管是几级下拉列表的联动实现本质上都是根据某个下拉列表的变化,去动态加载其 ...
- 无废话ExtJs 入门教程二十一[继承：Extend]
无废话ExtJs 入门教程二十一[继承:Extend] extjs技术交流,欢迎加群(201926085) 在开发中,我们在使用视图组件时,经常要设置宽度,高度,标题等属性.而这些属性可以通过“继承” ...
- 无废话ExtJs 入门教程十五[员工信息表Demo：AddUser]
无废话ExtJs 入门教程十五[员工信息表Demo:AddUser] extjs技术交流,欢迎加群(201926085) 前面我们共介绍过10种表单组件,这些组件是我们在开发过程中最经常用到的,所以一 ...
- 无废话ExtJs 入门教程二十[数据交互：AJAX]
无废话ExtJs 入门教程二十[数据交互:AJAX] extjs技术交流,欢迎加群(521711109) 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C ...
- 无废话ExtJs 入门教程十九[API的使用]
无废话ExtJs 入门教程十九[API的使用] extjs技术交流,欢迎加群(201926085) 首先解释什么是 API 来自百度百科的官方解释:API(Application Programmin ...
- 无废话ExtJs 入门教程十七[列表：GridPanel]
无废话ExtJs 入门教程十七[列表:GridPanel] extjs技术交流,欢迎加群(201926085) 在Extjs中,GridPanel用于数据显示,即我们平时说的列表页.在本节中,我们先对 ...
- 无废话ExtJs 入门教程十六[页面布局：Layout]
无废话ExtJs 入门教程十六[页面布局:Layout] extjs技术交流,欢迎加群(201926085) 首先解释什么是布局: 来自百度词典的官方解释:◎ 布局 bùjú: [distributi ...
- 无废话ExtJs 入门教程十四[文本编辑器：Editor]
无废话ExtJs 入门教程十四[文本编辑器:Editor] extjs技术交流,欢迎加群(201926085) ExtJs自带的编辑器没有图片上传的功能,大部分时候能够满足我们的需要. 但有时候这个功 ...
- 无废话ExtJs 入门教程十三[上传图片：File]
无废话ExtJs 入门教程十三[上传图片:File] extjs技术交流,欢迎加群(201926085) 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C ...
随机推荐
- Python super继承详解
MRO(Method resolution order)是python用来解析方法调用顺序的,mro中记录了一个类的所有基类的类类型序列,super不是简单地调用基类的方法,而是按照MRO中的顺序来调 ...
- WIN7 IIS7 安装方法
一.首先是安装IIS.打开控制面板,找到"程序与功能",点进去. 二.点击左侧"打开或关闭Windows功能". 三 看下图打相应的钩.
- Java读取mat文件
概述 使用ujmp中的jmatio模块读取.mat文件到java程序中. 其实,ujmp主要是在模块core中实现了矩阵运算,其余模块都是复用了已有的开源库.模块jmatio是复用了已有的JMatIo ...
- c里面的fflush函数
NAME fflush - flush a stream SYNOPSIS #include <stdio.h> int fflush(FILE *stream); DESCRIPTION ...
- svn上传报Authorization failed错误解决办法
svn上传文件时没有弹出用户登录界面,而是直接报Authorization failed错误.出现该问题基本都是三个配置文件的问题,下面把这个文件列出来 svnserve.conf配置文件中的 [ge ...
- ios 转发一篇对于6 plus的分辨率模式的说明
http://segmentfault.com/q/1010000002545515 分为兼容模式和高分辨率模式. 兼容模式 当你的 app 没有提供 3x 的 LaunchImage 时,系统默认进 ...
- HDU 4865 Peter's Hobby（概率、dp、log）
给出2个影响矩阵,一个是当天天气对湿度的影响,一个是前一天天气对当天天气的影响. 即在晴天(阴天.雨天)发生Dry(Dryish.Damp.Soggy)的概率,以及前一天晴天(阴天.雨天)而今天发生晴 ...
- nyoj20_吝啬的国度_DFS
吝啬的国度 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描述 在一个吝啬的国度里有N个城市,这N个城市间只有N-1条路把这个N个城市连接起来.现在,Tom在第S号城市, ...
- ASM:《X86汇编语言-从实模式到保护模式》5-7章：汇编基础
第5-7章感觉是这一本书中比较奇怪的章节,可能是作者考虑到读者人群水平的差异,故意由浅入深地讲如何在屏幕上显示字符和使用mov,jmp指令等等,但是这样讲的东西有点重复,而且看了第六,第七章以后,感觉 ...
- springmvc多文件上传
@RequestMapping(value = "/upload", method = RequestMethod.POST) public void upload(@Reques ...