ext lovcombo的使用
如下LovCombo.js ////////代码直接考过去用就行了
f('function' !== typeof RegExp.escape) { RegExp.escape = function(s) { if('string' !== typeof s) { return s; } return s.replace(/([.*+?^=!:${}()|[\]\/\\])/g, '\\$1'); }; } // create namespace Ext.ns('Ext.ux.form'); Ext.ux.form.LovCombo = Ext.extend(Ext.form.ComboBox, { checkField:'checked' ,separator:',' ,initComponent:function() { // template with checkbox if(!this.tpl) { this.tpl = '<tpl for=".">' +'<div class="x-combo-list-item">' +'<img src="' + Ext.BLANK_IMAGE_URL + '" ' +'class="ux-lovcombo-icon ux-lovcombo-icon-' +'{[values.' + this.checkField + '?"checked":"unchecked"' + ']}">' +'<div class="ux-lovcombo-item-text">{' + (this.displayField || 'text' )+ '}</div>' +'</div>' +'</tpl>' ; } // call parent Ext.ux.form.LovCombo.superclass.initComponent.apply(this, arguments); // install internal event handlers this.on({ scope:this ,beforequery:this.onBeforeQuery ,blur:this.onRealBlur }); // remove selection from input field 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.ux.form.LovCombo.superclass.initEvents.apply(this, arguments); this.keyNav.tab = false; } ,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(this.getCheckedDisplay() + '[ ' + this.separator + ']*'), ''); } ,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); } this.setValue(this.getCheckedValue()); 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(); } } // eo function setValue // }}} // {{{ /** * Selects all items */ ,selectAll:function() { this.store.each(function(record){ // toggle checked field record.set(this.checkField, true); }, this); //display full list this.doQuery(this.allQuery); this.setValue(this.getCheckedValue()); } // eo full selectAll // }}} // {{{ /** * Deselects all items. Synonym for clearValue */ ,deselectAll:function() { this.clearValue(); } // eo full deselectAll // }}} }); // eo extend // register xtype Ext.reg('lovcombo', Ext.ux.form.LovCombo);
在另一个extjs中应用这个样式 Ext.namespace("Ext.ux.form");//在文件头不要忘记引用命名空间 {/////////////////////////////////////////这个原先的xtype是combo的,下拉单选框 columnWidth : 1, border : false, layout : 'form', items : [{ hideLabel:true, hidden:true, xtype:'lovcombo',//就是这一句了,没有其他了,有效代码就这两句,命运折腾人呀 fieldLabel : '协办部门', name : 'xiebanDeptId', id : 'xiebanDeptId', anchor : '98%', // nessasary allowBlank : false, displayField : 'deptName', valueField : 'deptId', editable : false, triggerAction : 'all', allowBlank : true, blankText : '请指定协办部门', emptyText : '请指定协办部门', store : Neo.frontdesk.deptStore }] }] }效果如图:
落了一个地方,要加添加一个css文件,否则不会显示复选框,我的这个就没显示,加上css就可以了。
lovcombo.css
.ux-lovcombo-icon {
width:16px;
height:16px;
float:left;
background-position: -1px -1px ! important;
background-repeat:no-repeat ! important;
}
.ux-lovcombo-icon-checked {
background: transparent url(../../../extjs/resources/images/slate/menu/checked.gif);
}
.ux-lovcombo-icon-unchecked {
background: transparent url(../../../extjs/resources/images/slate/menu/unchecked.gif);
}