2024年10月extjs下拉框多选（extjs combobox样式下拉框中如何添加复选框）

　　⑴extjs下拉框多选（extjsbobox样式下拉框中如何添加复选框

　　⑵extjsbobox样式下拉框中如何添加复选框

　　⑶{xtype:’bo’,name:’status’,id:’statusId’,multiSelect:true,editable:false,emptyText:’策略执行状态’,queryMode:’local’,store:status,valueField:’id’,displayField:’name’,listConfig:{itemTpl:‘《tplfor=“.“》《divclass=“x-bo-list-item“onClick=“onClick(this)“》《span》《inputtype=“checkbox“value=“{}“/》{name}《/span》《/div》《/tpl》’,},queryMode:’local’,triggerAction:’all’,}这样写不是更方便和直接么，而且获取参数也比较简单，得到的是个array

　　⑷extjs如何给下拉框增加选项

　　⑸bo里的属性store:

　　⑹Extjs中Grid中实现多选，相当于按着Ctrl键实现多选

　　⑺好像没有这样的属性设置...你的自己写段代码来控制了...具体思路:当你点击CheckboxSelectionModel中的项的时候将原来选择的项继续设置为选中状态...这样就行了..就是多了个事件...

　　⑻Extjs怎么实现下拉框多选

　　⑼扩展js类库，在项目中建立一个js文件，命名为:xxx.js?其代码为

　　⑽if?(’function’?!==?typeof?RegExp.escape)???{??????RegExp.escape?=?function?(s)???????{??????????if?(’string’?!==?typeof?s)???????????{??????????????return?s;??????????}??????????return?s.replace(/()/g,?’\$’);??????};??}????Ext.ns(’Ext.form’);????Ext.form.MultiSelect?=?Ext.extend(Ext.form.boBox,???{??????checkField:?’checked’,??????multi:?true,??????separator:?’,’,??????initponent:?function?()???????{??????????if?(!this.tpl)???????????{??????????????this.tpl?=?’《tpl?for=“.“》’?+?’《div?class=“x-bo-list-item“》’??????????????????????+?’《img?src=“’?+?Ext.BLANK_IMAGE_URL?+?’“?’??????????????????????+?’class=“ux-MultiSelect-icon?ux-MultiSelect-icon-’??????????????????????+?’{[values.’?+?this.checkField?+?’?“checked“:“unchecked“’??????????????????????+?’]}“》’??????????????????????+?’{}’??????????????????????+?’《/div》’??????????????????????+?’《/tpl》’;??????????}????????????Ext.form.MultiSelect.superclass.initponent.apply(this,?arguments);????????????this.on(??????????{??????????????scope:?this,??????????????beforequery:?this.onBeforeQuery,??????????????blur:?this.onRealBlur??????????});????????????this.onLoad?=?this.onLoad.createSequence(function?()???????????{??????????????if?(this.el)???????????????{??????????????????var?v?=?this.el.dom.value;??????????????????this.el.dom.value?=?’’;??????????????????this.el.dom.value?=?v;??????????????}??????????});??????},??????initEvents:?function?()???????{??????????Ext.form.MultiSelect.superclass.initEvents.apply(this,?arguments);??????????this.keyNav.tab?=?false;??????},??????beforeBlur:?function?()???????{??????},??????postBlur:?function?()???????{??????},????????clearValue:?function?()???????{??????????this.value?=?’’;??????????this.setRawValue(this.value);??????????this.store.clearFilter();??????????this.store.each(function?(r)???????????{??????????????r.set(this.checkField,?false);??????????},?this);??????????if?(this.hiddenField)???????????{??????????????this.hiddenField.value?=?’’;??????????}??????????this.applyEmptyText();??????},??????getCheckedDisplay:?function?()???????{??????????var?re?=?new?RegExp(this.separator,?“g“);??????????return?this.getCheckedValue(this.displayField).replace(re,?this.separator?+?’?’);??????},??????getCheckedValue:?function?(field)???????{??????????field?=?field?||?this.valueField;??????????var?c?=?;??????????var?snapshot?=?this.store.snapshot?||?this.store.data;??????????snapshot.each(function?(r)???????????{??????????????if?(r.get(this.checkField))???????????????{??????????????????c.push(r.get(field));??????????????}??????????},?this);????????????return?c.join(this.separator);??????},??????onBeforeQuery:?function?(qe)???????{??????????qe.query?=?qe.query.replace(new?RegExp(RegExp.escape(this.getCheckedDisplay())?+?’*’),?’’);??????},??????onRealBlur:?function?()???????{??????????this.list.hide();??????????var?rv?=?this.getRawValue();??????????var?rva?=?rv.split(new?RegExp(RegExp.escape(this.separator)?+?’?*’));??????????var?va?=?;??????????var?snapshot?=?this.store.snapshot?||?this.store.data;????????????Ext.each(rva,?function?(v)???????????{??????????????snapshot.each(function?(r)???????????????{??????????????????if?(v?===?r.get(this.displayField))???????????????????{??????????????????????va.push(r.get(this.valueField));??????????????????}??????????????},?this);??????????},?this);??????????this.setValue(va.join(this.separator));??????????this.store.clearFilter();??????},??????onSelect:?function?(record,?index)???????{??????????if?(this.fireEvent(’beforeselect’,?this,?record,?index)?!==?false)???????????{??????????????record.set(this.checkField,?!record.get(this.checkField));????????????????if?(this.store.isFiltered())???????????????{??????????????????this.doQuery(this.allQuery);??????????????}????????????????if?(this.multi)???????????????{??????????????????if?(record.get(“key“)?==?“---“?&&?record.get(this.checkField))???????????????????{??????????????????????this.setValue(“---“);??????????????????}??????????????????else???????????????????{??????????????????????this.setValue(this.getCheckedValue());??????????????????}??????????????}??????????????else???????????????{??????????????????this.clearValue();??????????????????this.value?=?record.get(this.valueField);??????????????????this.setRawValue(record.get(this.displayField));??????????????????this.list.hide();??????????????}????????????????this.fireEvent(’select’,?this,?record,?index);??????????}??????},??????setValue:?function?(v)???????{??????????if?(v)???????????{??????????????v?=?’’?+?v;??????????????if?(this.valueField)???????????????{??????????????????this.store.clearFilter();??????????????????this.store.each(function?(r)???????????????????{??????????????????????var?checked?=?!(!v.match(’(^|’?+?this.separator?+?’)’??????????????????????????????????+?RegExp.escape(r.get(this.valueField))??????????????????????????????????+?’(’?+?this.separator?+?’|$)’));??????????????????????r.set(this.checkField,?checked);??????????????????},?this);??????????????????this.value?=?this.getCheckedValue();??????????????????this.setRawValue(this.getCheckedDisplay());??????????????????if?(this.hiddenField)???????????????????{??????????????????????this.hiddenField.value?=?this.value;??????????????????}??????????????}??????????????else???????????????{??????????????????this.value?=?v;??????????????????this.setRawValue(v);??????????????????if?(this.hiddenField)???????????????????{??????????????????????this.hiddenField.value?=?v;??????????????????}??????????????}??????????????if?(this.el)???????????????{??????????????????this.el.removeClass(this.emptyClass);??????????????}??????????}??????????else???????????{??????????????this.clearValue();??????????}??????},??????selectAll:?function?()???????{??????????this.store.each(function?(record)???????????{??????????????record.set(this.checkField,?true);??????????},?this);??????????this.doQuery(this.allQuery);??????????this.setValue(this.getCheckedValue());??????},??????deselectAll:?function?()???????{??????????this.clearValue();??????}??});??Ext.reg(’multiSelect’,?Ext.form.MultiSelect);

　　⑾在ext-all.css文件最后，加入css样式

　　⑿.ux-MultiSelect-icon?{?width:px;?height:px;?float:left;?background-position:?-px?-px?!?important;?background-repeat:no-repeat?!?important;?}??.ux-MultiSelect-icon-checked?{?background:?transparent?url();?}??.ux-MultiSelect-icon-unchecked?{?background:?transparent?url();?}

　　⒀var?DepartUserStore=new?Ext.data.Store(???????{??????????????proxy:?new?Ext.data.HttpProxy(??????????????{??????????????????????url:’/Web/Manage/DeskTop/JSON/ScheduleManager/GetSimpleDepartUserInfo.aspx’??????????????}),??????????????//读取Json??????????????reader:?new?Ext.data.JsonReader(??????????????{?totalProperty:?“totalCount“,?root:?“root“?},???????????????[??????????????????????{name:’UserId’,type:’int’},??????????????????????{name:’UserName’,type:’string’}??????????????])??????});????????????var?DepartUserCbox?=?new?Ext.form.MultiSelect(??????{??????????????fieldLabel:?’????姓名’,??????????????labelStyle:?’width:px’,??????????????width:?,??????????????editable:?false,??????????????id:?’DepartUserDS’,??????????????hiddenName:’DepartUserIdDS’,??????????????store:?DepartUserStore,??????????????emptyText:?’--请选择--’,??????????????allowBlank:?false,???????????????blankText:?’请选择’,???????????????mode:’remote’,??????????????displayField:?’UserName’,??????????????valueField:?’UserId’,??????????????triggerAction:?’all’,??????????????selectOnFocus:?true,??????????????listWidth:???????});????????????DepartUserStore.on(’load’,?function?()???????{??????????????DepartUserCbox.selectAll();?//全选??????});?????????DepartUserStore.load();

　　⒁extjs下拉框多选

　　⒂//配置时设置多选多true即可

　　⒃Ext.create(’Ext.form.boBox’,?{????multiSelect:true});

　　⒄extjs中下拉框选择一项另外一项下拉框显示默认值（选择下拉框中的A，另一下拉框自动选择B

　　⒅$(’#fId’).bobox({valueField:’id’,textField:’name’,editable:false,panelHeight:’auto’,url:ctx+’module/list.do’,onSelect:function(rec){$(’#pid’).botree(’clear’);varurl=ctx+’menu/module/’+rec.id+’.do’;$(’#pId’).botree(’reload’,url);},onLoadSuess:function(data){},onLoadError:function(data){$.messager.alert(’提示’,’加载数据失败!’,’info’);}});以上是esayui中的下拉框级联的代码示例$(’#pid’).botree(’clear’);varurl=ctx+’menu/module/’+rec.id+’.do’;$(’#pId’).botree(’reload’,url);在上级选中后把下级选择框内容清楚在重新根据上级的id去加载即可

　　⒆extjs多选下拉框

　　⒇用lvbo插件就行了（地址：}

　　⒈extjs中下拉框的内容实现有条件选择，对应的情况下可以选择一些对应的选项

　　⒉参考代码如下：{header:’单位名称’,dataIndex:’unitname’,field:{xtype:’bo’,editable:false,emptyText:“请选择...“,valueField:“id“,displayField:“text“,mode:’local’,store:storeddl}}varstoreddl=Ext.create(’Ext.data.Store’,{proxy:{type:’ajax’,url:“/Handler/SystemHandler/UnitHandler.ashx?Lx=ddl“},root:’items’,forceSelection:true,//lazyRender:true,fields:,listeners:{select:selectRow,focus:eventFocus}});

　　⒊extjs下拉列表选择框bobox，数据源重新加载后如何设置默认选中的项

　　⒋我建议你在url中增加部分参数,js存储选中ids,并传递默认选中的数据,后台根据选中状况以及关键字排序,在代码中根据传递的选中值,进行属性修改.

　　⒌怎么把用Ext生成多选下拉框

　　⒍使用：lovbo多选下拉框，EXTJS的扩展控件。可百度搜索下载，Lovbo.js和样式表Lovbo.css（css可能不需要使用方法：使用xtype:’lovbo’其他属性和bo一样的。jsp引用《linkrel=“stylesheet“type=“text/css“href=找不到百度HI联系，发给你。