Ext.onReady(function() { var store = Ext.create('Ext.data.Store', { autoLoad : true, fields : ['value', 'text'], proxy : { type : 'ajax', url : '/demo/common/data/demo.json',// url根据实际修改即可 reader : 'json' } }); var comboBoxDemo = Ext.create('Ext.form.field.ComboBox', { renderTo : Ext.getBody(), width : 400, margin : 20, labelWidth : 80, // 标签的宽度 fieldLabel : 'ComboBox', // 标签显示的内容 emptyText : '[请选择]', // combobox内容为空时显示的文字 displayField : 'text', // 客户端显示的数据 valueField : 'value', // 实际返回服务器的值,可以不指定,不指定时返回displayField的值 store : store, // 数据源,类型限制Ext.data.Store/String/Array // queryMode : 'local', // 查询方式:local(查询本地数据),默认为remote(查询远程数据) // pageSize : 5, 限制下拉项每页显示个数,只适用于queryMode:'remote' // typeAhead : true, // 延迟查询,与typeAheadDelay配合使用 // typeAheadDelay : 1000, // 延迟时间,单位为毫秒,默认值为250 multiSelect : true, // 是否可以选择多条数据 // editable : false, // 是否可编辑,默认值为true,false为不可编辑 // forceSelection : true, // 必须选择下拉框中的值,不允许用户输入自定义的值 // hiddenName : '', // 真正提交时此combo的name,请一定要注意 // hideTrigger : true, //是否隐藏触发项(下拉框右侧图标) listeners : { // 监听事件。更多事件请参考API // 自定义的简单combobox扩展插件,功能:实现2个选项之间的选项全部选中,第一个选项为起始选项 select : function(combo, records, eOpts) { // records保存的是所有选中项 var first = store.indexOf(records[0]); var last = store.indexOf(records[records.length - 1]); if (first < last) { records.splice(0);// 先清空records,再重新赋值 for (var i = first; i <= last; i++) { records.push(store.getAt(i)); } } else { records.splice(0); for (var i = first; i >= last; i--) { records.push(store.getAt(i)); } } combo.setValue(records);// 将设置好的records设置为选中项 } } }); });