关于 Ext.ux.form.LovCombo的问题
最近要用做一个多选下拉联动combobox，但是在第一步就卡住了：准备用这个扩展 Lovcombo来做，先用官方的示例测试下。
出问题了：下拉列表里只有一竖排checkbox的框，没有选项的名字（应该是显示名字吧），但是可以选择，checkbox框后面是空白的。。
我用的是ext3.0版本。不知道有什么补救办法没？搞了好几天了，快顶不住了。。
补充下：刚用ext2.2版本好像没有问题，我想在3.0版本中用这个扩展，请大家帮下忙。。谢谢啦
那个改的就是3.0版本的呀
//LovCombo.js
[code="java"]
String.prototype.trim = function() {
return this.replace(/^\s+|\s+$/g, '');
}
// add RegExp.escape if it has not been already added
if('function' !== typeof RegExp.escape) {
RegExp.escape = function(s) {
if('string' !== typeof s) {
return s;
}
// Note: if pasting from forum, precede ]/\ with backslash manually
return s.replace(/([.*+?^=!:${}()|[]\/\])/g, '\$1');
}; // eo function escape
}
// create namespace
Ext.ns('Ext.ux.form');
/**
- @class Ext.ux.form.LovCombo
@extends Ext.form.ComboBox
*/
Ext.ux.form.LovCombo = Ext.extend(Ext.form.ComboBox, {// {{{
// configuration options
/**- @cfg {String} checkField name of field used to store checked state.
- It is automatically added to existing fields.
- Change it only if it collides with your normal field.
*/
checkField:'checked'
/**
- @cfg {String} separator separator to use between values and texts
*/
,separator:','
/**
- @cfg {String/Array} tpl Template for items.
Change it only if you know what you are doing.
*/
// }}}
// {{{
,initComponent:function() {// template with checkbox
if(!this.tpl) {
this.tpl =
''
+'''
+'+'class="ux-lovcombo-icon ux-lovcombo-icon-'
+'{[values.' + this.checkField + '?"checked":"unchecked"' + ']}">'
+'{' + (this.displayField || 'text' )+ '}'
+'
+''
;
}// 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;
}
});
} // e/o function initComponent
// }}}
// {{{
/**- Disables default tab key bahavior
@private
*/
,initEvents:function() {
Ext.ux.form.LovCombo.superclass.initEvents.apply(this, arguments);// disable default tab handling - does no good
this.keyNav.tab = false;
} // eo function initEvents
// }}}
// {{{
/**- clears value
/
,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();
} // eo function clearValue
// }}}
// {{{
/* - @return {String} separator (plus space) separated list of selected displayFields
- @private
/
,getCheckedDisplay:function() {
var re = new RegExp(this.separator, "g");
return this.getCheckedValue(this.displayField).replace(re, this.separator + ' ');
} // eo function getCheckedDisplay
// }}}
// {{{
/* - @return {String} separator separated list of selected valueFields
@private
*/
,getCheckedValue:function(field) {
field = field || this.valueField;
var c = [];// store may be filtered so get all records
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);
} // eo function getCheckedValue
// }}}
// {{{
/**beforequery event handler - handles multiple selections
@param {Object} qe query event
@private
/
,onBeforeQuery:function(qe) {
qe.query = qe.query.replace(new RegExp(this.getCheckedDisplay() + '[ ' + this.separator + ']'), '');
}, // eo function onBeforeQuery
// }}}
// {{{
/**blur event handler - runs only when real blur event is fired
*/
findRecord : function(prop, value){
var record;
if(this.store.getCount() > 0){
this.store.each(function(r){
if(r.data[prop] == value){
record = r;
return false;
}
});
}
return record;
},
beforeBlur : function(){
var val = this.getRawValue();
if(this.forceSelection){
if(val.length > 0 && val != this.emptyText){
this.el.dom.value = Ext.isDefined(this.lastSelectionText) ? this.lastSelectionText : '';
this.applyEmptyText();
}else{
this.clearValue();
}
}else{
var texts = val.split(',');
var values='';
for(var i=0;i var rec = this.findRecord(this.displayField, texts[i].trim());
if(rec){
values+=(values.length>0?',':'')+rec.data[this.valueField];
}
}
this.setValue(values);
}
}
,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;// iterate through raw values and records and check/uncheck items
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();
} // eo function onRealBlur
// }}}
// {{{
/**Combo's onSelect override
@private
@param {Ext.data.Record} record record that has been selected in the list
@param {Number} index index of selected (clicked) record
*/
,onSelect:function(record, index) {
if(this.fireEvent('beforeselect', this, record, index) !== false){// toggle checked field record.set(this.checkField, !record.get(this.checkField)); // display full list if(this.store.isFiltered()) { this.doQuery(this.allQuery); } // set (update) value and fire event this.setValue(this.getCheckedValue()); this.fireEvent('select', this, record, index);}
} // eo function onSelect
// }}}
// {{{
/**Sets the value of the LovCombo
@param {Mixed} v value
*/
,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
// }}}
- @cfg {String} checkField name of field used to store checked state.
}); // eo extend
// register xtype
Ext.reg('lovcombo', Ext.ux.form.LovCombo);
[/code]
//LovCombo.css
[code="java"]
.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(../../resources/images/default/menu/checked.gif);
}
.ux-lovcombo-icon-unchecked {
background: transparent url(../../resources/images/default/menu/unchecked.gif);
}
[/code]
老版本的东西肯定要改它源码可行的。
Ext的论坛有好几种多选下拉列表，建议你自己去搜索