css1：
/** vim: ts=4:sw=4:nu:fdc=4:nospell** Ext.ux.form.LovCombo CSS File** @author Ing.Jozef Sakálo?* @copyright (c) 2008, by Ing. Jozef Sakálo?* @date 5. April 2008* @version $Id: Ext.ux.form.LovCombo.css,v 1.1 2010/05/12 10:43:51 ycliu Exp $** @license Ext.ux.form.LovCombo.css is licensed under the terms of the Open Source* LGPL 3.0 license. Commercial use is permitted to the extent that the * code/component(s) do NOT become part of another Open Source or Commercially* licensed development library or toolkit without explicit permission.* * License details: http://www.gnu.org/licenses/lgpl.html*/.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(../images/checked.gif);
}
.ux-lovcombo-icon-unchecked {background: transparent url(../images/unchecked.gif);
}
.checked{background-image:url(../images/checked.gif)
}
.unchecked{background-image:url(../images/unchecked.gif)
}/* eof */
css2：
/** vim: ts=4:sw=4:nu:fdc=4:nospell** Ext.ux.form.LovCombo Example Application CSS File** @author Ing.Jozef Sakálo?* @copyright (c) 2008, by Ing. Jozef Sakálo?* @date 16. April 2008* @version $Id: lovcombo.css,v 1.1 2010/05/12 10:43:51 ycliu Exp $** @license Ext.ux.form.LovCombo.css is licensed under the terms of the Open Source* LGPL 3.0 license. Commercial use is permitted to the extent that the * code/component(s) do NOT become part of another Open Source or Commercially* licensed development library or toolkit without explicit permission.* * License details: http://www.gnu.org/licenses/lgpl.html*/#west-content a {text-decoration:none;
}
#west-content a:hover {text-decoration:underline;
}
#west {width:280px;
}
#center {width:640px;
}
#adsense-top {margin: 10px 0 10px 0;
}
#west-content {font-family:arial, sans-serif;
}
#center-content {font-family:arial, sans-serif;margin:0 0 0 10px;color:#777777;
}
#center-content h2 {font-size:16px;text-align:center;
}
#description {color:#777777;text-align:justify;
}
#description em {font-style:italic;font-weight:bold;
}
#description p {margin: 2px 0 8px 0;
}
.adsense {opacity:.55;filter:alpha(opacity=55);-moz-opacity:.55;
}
#change-log {padding:20px 0 0 20px;
}
#change-log ul {margin: 8px 0 0 1em;list-style:disc outside;text-align:justify;
}
#cts {margin: 20px;zoom:1;
}/* eof */
js：
// vim: ts=4:sw=4:nu:fdc=4:nospell
/*** Ext.ux.form.LovCombo, List of Values Combo** @author Ing. Jozef Sak谩lo拧* @copyright (c) 2008, by Ing. Jozef Sak谩lo拧* @date 16. April 2008* @version $Id: Ext.ux.form.LovCombo.js,v 1.1 2010/05/12 10:43:43 ycliu Exp $** @license Ext.ux.form.LovCombo.js is licensed under the terms of the Open Source* LGPL 3.0 license. Commercial use is permitted to the extent that the * code/component(s) do NOT become part of another Open Source or Commercially* licensed development library or toolkit without explicit permission.* * License details: http://www.gnu.org/licenses/lgpl.html*//*global Ext */// add RegExp.escape if it has not been already addedvar subCount = 10;//下拉框最大选择数if('function' !== typeof RegExp.escape) {RegExp.escape = function(s) {if('string' !== typeof s) {return s;}// Note: if pasting from forum, precede ]/\ with backslash manuallyreturn 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 checkboxif(!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 parentExt.ux.form.LovCombo.superclass.initComponent.apply(this, arguments);// install internal event handlersthis.on({scope:this,beforequery:this.onBeforeQuery,blur:this.onRealBlur});// remove selection from input fieldthis.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 goodthis.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 recordsvar 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*/,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 itemsExt.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 fieldrecord.set(this.checkField, !record.get(this.checkField));// display full listif(this.store.isFiltered()) {this.doQuery(this.allQuery);}// set (update) value and fire event//alert(record);//alert(this.getCheckedValue());var subf = this.getCheckedValue().split(",");//alert(subf.length);if(subf.length>subCount){// alert("最多只能选10个子项!");Ext.Msg.alert("警告","最多只能选10个子项!");this.setValue(subf.slice(0,10));}else{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 fieldrecord.set(this.checkField, true);}, this);//display full listthis.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); // eof