EXTJS ComboBox 使用方法

发布时间:2017-5-23 3:33:59 编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"EXTJS ComboBox 使用方法",主要涉及到EXTJS ComboBox 使用方法方面的内容,对于EXTJS ComboBox 使用方法感兴趣的同学可以参考一下。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <link rel="stylesheet" href="ext-3.1.1/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.1.1/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.1.1/ext-all.js"></script> <script type="text/javascript"> Ext.onReady(function(){ Ext.QuickTips.init(); Ext.form.Field.prototype.msgTarget = 'side'; Ext.override(Ext.form.TextField, { unitText: '', onRender: function (ct, position) { Ext.form.TextField.superclass.onRender.call(this, ct, position); // 如果单位字符串已定义 则在后方增加单位对象 if (this.unitText != '') { this.unitEl = ct.createChild({ tag: 'div', html: this.unitText }); this.unitEl.addClass('x-form-unit'); // 增加单位名称的同时 按单位名称大小减少文本框的长度 初步考虑了中英文混排 未考虑为负的情况 this.width = this.width - (this.unitText.replace(/[^\x00-\xff]/g, "xx").length * 6 + 2); // 同时修改错误提示图标的位置 this.alignErrorIcon = function () { this.errorIcon.alignTo(this.unitEl, 'tl-tr', [2, 0]); }; } } }); var btnsubclick = function(){ Ext.MessageBox.alert('提示','你点确定按钮'); } var btnresclick = function(){ var userName = Ext.getDom("userName"); alert(userName.value); } var btnsub = new Ext.Button({ text:'提交', handler:btnsubclick }); var btnres = new Ext.Button({ text: '重置', listeners: { 'click': btnresclick } }); var txtuser = new Ext.form.TextField({ style:'margin:10 auto', width:140, allowBalnk:false, maxLength:16, name:'userName', fieldLabel: '用户', blankText:'请输入用户名', maxLengthText:'用户名不能超过16个字符' }); var txtpwd = new Ext.form.TextField({ style:'margin:10 auto', width:140, allowBalnk:false, maxLength:16, name:'pwd', fieldLabel: '密码', blankText:'请输入密码', maxLengthText:'密码不能超过16个字符' }); var radiogroup = new Ext.form.RadioGroup({ fieldLabel:'性别', width:120, items:[{name:'sex',inputValue:'男',boxLabel:'男',checked:true},{name:'sex',inputValue:'女',boxLabel:'女'}] }); radiogroup.on('change',function(rdgroup,checkded){ alert(checkded.getRawValue()); //inputValue的值 }); var checkboxs = new Ext.form.CheckboxGroup({ fieldLabel:'兴趣', width:170, items:[{boxLabel:'看书',inputValue:'看书'},{boxLabel:'上网',inputValue:'上网'},{boxLabel:'听音乐',inputValue:'听音乐'}] }); checkboxs.on('change',function(cbgroup,checked){ for(var i = 0 ;i<checked.length;i++) { alert(checked[i].getRawValue());//inputValue的值 } }); //创建数据源[数组数据源] var combostore = new Ext.data.ArrayStore({ fields: ['id', 'name'], data: [[1,'ADC'], [2,'AP'], [3,'DPS']] }); var mycombox = new Ext.form.ComboBox({ fieldLabel:'选择英雄', store:combostore, displayField:'name', valueField:'id', triggerAction:'all', emptyText: '请选择...', allowBlank:false, editbale:false, blankText:"请选择英雄", mode:'local' }); mycombox.on('select', function () { alert(mycombox.getValue()); }) var fp = new Ext.form.FormPanel({ frame: true, labelAlign: 'right', labelWidth: 45, style:'margin:10px', buttonAlign: 'center', items:[txtuser,txtpwd,radiogroup,checkboxs,mycombox], buttons:[btnsub,btnres] }); var win = new Ext.Window({ title:'登录测试', width:350, heigth:174, buttonAlign: 'right', items:fp }); win.show(); }) </script> <!-- 说明: (1)var combostore = new Ext.data.ArrayStore():创建一个新的数组数据源。 (2)fields: ['id', 'name']:数据源包含两列,列名分别为'id','name'。 (3)data: 数据源对应的数据,例:id:1,name:adc。 (4)var combobox = new Ext.form.ComboBox():创建一个新的下拉列表。 (5)store: combostore:数据源为上面创建的数据源,这个属性是combobox的必需属性。 (6)displayField: 'name',valueField: 'id':combobox对应数据源的显示列与值列,这两个属性也是必须的。 (7)mode: 'local':指定数据源为本地数据源,如果是本地创建的数据源,该属性也是必须的,如果数据源来自于服务器, 设置为'remote'表示数据源来自于服务器,关于服务器交互后面我们会讲解。 (8)triggerAction: 'all':请设置为”all”,否则默认 为”query”的情况下,你选择某个值后,再此下拉时,只出现匹配选项, 如果设为all的话,每次下拉均显示全部选项。 (9)editable: false:默认情况下,combobox的内容是可以编辑的,该属性设置为false, 使下拉列表只能选择不能编辑。 (10)mycombobox.on('select', function () {alert(combobox.getValue());}):选择时alert出下拉列表的值。 .说明: combo这个组件是需要绑定一个数据源才能使用,所以store和displayField和valueField是必须的 属性 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 --> </head> <body> </body> </html>

上一篇:HDU 4706 Children's Day
下一篇:免费的Android UI库及组件推荐

相关文章

相关评论

本站评论功能暂时取消,后续此功能例行通知。

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

腹肌贴健身器材智能腹部训练健腹器肌