X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/ee06f37b0f6f6d94cd05a6ffae556660f7c4a2bc..c930e9176a5a85509c5b0230e2bff5c22a591432:/examples/image-organizer/imgorg/MultiCombo.js?ds=inline

diff --git a/examples/image-organizer/imgorg/MultiCombo.js b/examples/image-organizer/imgorg/MultiCombo.js
new file mode 100644
index 00000000..597fc6e3
--- /dev/null
+++ b/examples/image-organizer/imgorg/MultiCombo.js
@@ -0,0 +1,919 @@
+/*!
+ * Ext JS Library 3.0.0
+ * Copyright(c) 2006-2009 Ext JS, LLC
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
+Ext.ns('Ext.ux');
+
+/**
+ * Ext.ux.MultiCombo
+ */
+Ext.ux.MultiCombo = Ext.extend(Ext.form.ComboBox, {
+
+	/**
+	 * @cfg {String} overClass [x-grid3-row-over]
+	 */
+	overClass : 'x-grid3-row-over',
+	/**
+	 * @cfg {Boolean} enableKeyEvents for typeAhead
+	 */
+	enableKeyEvents: true,
+	/**
+	 * @cfg {String} selectedClass [x-grid3-row-selected]
+	 */
+	selectedClass: 'x-grid3-row-selected',
+	/**
+	 * @cfg {String} highlightClass The css class applied to rows which are hovered with mouse
+	 * selected via key-nav, or highlighted when a text-query matches a single item.
+	 */
+	highlightClass: 'x-grid3-row-over',
+	/**
+	 * @cfg {Number} autoSelectKey [44] COMMA Sets the key used to auto-select an auto-suggest
+	 * highlighted query.  When pressed, the highlighted text-item will be selected as if the user
+	 * selected the row with a mouse click.
+	 */
+	autoSelectKey : 44,
+	/**
+	 * @cfg {String} allSelectedText Text to display when all items are selected
+	 */
+	allSelectedText : 'All selected',
+	/**
+	 * @cfg {Number} maxDisplayRows The maximum number of rows to show before applying vscroll
+	 */
+	maxDisplayRows: null,
+
+	mode: 'local',
+	triggerAction: 'all',
+	typeAhead: true,
+
+	// private
+	highlightIndex : null,
+	highlightIndexPrev : null,
+
+	query : null,
+
+
+	/**
+	 * @cfg {Array} value CheckboxCombo expresses its value as an array.
+	 */
+	value: [],
+
+	/**
+	 * @cfg {Integer} minChars [0]
+	 */
+	minChars: 0,
+
+	initComponent : function() {
+		var cls = 'x-combo-list';
+
+		// when blurring out of field, ensure that rawValue contains ONLY items contained in Store.
+		this.on('blur', this.validateSelections.createDelegate(this));
+
+		// create an auto-select key handler, like *nix-based console [tab] key behaviour
+		this.on('keypress', function(field, ev) {
+			if (ev.getKey() == this.autoSelectKey) {	// COMMA
+				this.onAutoSelect();
+			}
+		},this);
+
+		this.addEvents(
+			/**
+			 * @event initview Fires when Combo#initView is called.
+			 * gives plugins a chance to interact with DataView
+			 * @author Chris Scott
+			 * @param {Combo} this
+			 * @param {DataView} dv
+			 */
+			'initview',
+            'clearall'
+		);
+
+		// when list expands, constrain the height with @cfg maxDisplayRows
+		if (this.maxDisplayRows) {
+			this.on('expand', function(){
+				var cnt = this.store.getCount();
+				if (cnt > this.maxDisplayRows) {
+					var children = this.view.getNodes();
+					var h = 0;
+					for (var n = 0; n < this.maxDisplayRows; n++) {
+						h += Ext.fly(children[n]).getHeight();
+					}
+					this.maxHeight = h;
+				}
+			}, this, {
+				single: true
+			});
+		}
+
+		this.on('beforequery', this.onQuery, this);
+
+		// Enforce that plugins is an Array.
+		if (typeof(this.plugins) == 'undefined'){
+			this.plugins = [];
+		}
+		else if (!Ext.isArray(this.plugins)) {
+			this.plugins = [this.plugins];
+		}
+
+		var tmp = this.value;	// for case where transform is set.
+		Ext.ux.MultiCombo.superclass.initComponent.call(this);
+		if (this.transform) {
+			if (typeof(tmp) == 'undefined') {
+				tmp = [];
+			}
+			this.setValue(tmp);
+		}
+	},
+
+	// private
+    onViewClick : function(dv, index, node, ev){
+		var rec = this.store.getAt(index);
+		this.onSelect(rec, index);
+		this.el.focus();
+		/*
+        if(doFocus !== false){
+            this.el.focus();
+        }
+        */
+    },
+
+	// onTriggerClick, overrides Ext.form.ComboBox#onTriggerClick
+	onTriggerClick: function() {
+		if (this.highlightIndex != -1) {
+			this.clearHighlight();
+		}
+		this.highlightIndex = -1;
+
+		if(this.disabled){
+            return;
+        }
+		if(this.isExpanded()){
+            this.collapse();
+            this.el.focus();
+        }else {
+            this.onFocus({});
+			if(this.triggerAction == 'all') {
+				this.doQuery(this.getRawValue(), true);
+				var vlen = this.getValue().length, slen = this.view.getSelectedRecords().length;
+				if (vlen != slen || vlen == 0) {
+					this.selectByValue(this.value, true);
+				}
+            } else {
+                this.expand();
+				this.doQuery(this.getRawValue());
+            }
+
+			this.highlightIndex = -1
+			this.highlightIndexPrev = null;
+			this.selectNext();
+			this.scrollIntoView();
+            this.el.focus();
+        }
+	},
+
+	// onQuery, beforequery listener, @return false
+	onQuery : function(qe) {
+		q = qe.query;
+        forceAll = qe.forceAll;
+        if(forceAll === true || (q.length >= this.minChars)){
+            if(this.lastQuery !== q){
+				if (typeof(this.lastQuery) != 'undefined') {
+					if (q.match(new RegExp('^'+this.allSelectedText))) {
+						this.query = this.store.data;
+					}
+					else if (this.lastQuery.length > q.length) {
+						var items = q.replace(/\s+/g, '').split(',');
+						if (items[items.length-1].length == 0) {
+							items.pop();
+						}
+						this.query = this.store.data.filterBy(this.store.createFilterFn(this.displayField, new RegExp('^'+items.join('$|^')+'$', "i"), false, false));
+					}
+					else {
+						this.query = null;
+					}
+				}
+                this.lastQuery = q;
+                if(this.mode == 'local'){
+					var raw = this.getRawValue();
+					if (raw == this.allSelectedText) {
+
+					}
+					var items = raw.replace(/\s+/g, '').split(',');
+					var last = items.pop();
+					this.matches = this.store.data.filterBy(this.store.createFilterFn(this.displayField, new RegExp('^'+last, "i"), false, false)).filterBy(this.createTypeAheadFilterFn(items));
+					if (this.matches.getCount() == 0) {
+						this.clearHighlight();
+					}
+					if (q.length == 0) {
+						this.view.clearSelections();
+						this.updateValue([]);
+					}
+
+                    this.onLoad();
+                } else {
+                    this.store.baseParams[this.queryParam] = q;
+                    this.store.load({
+                        params: this.getParams(q)
+                    });
+                    this.expand();
+                }
+            }else{
+                this.selectedIndex = -1;
+                this.onLoad();
+            }
+        }
+
+		return false;
+	},
+
+	// onLoad, overrides Ext.form.ComboBox#onLoad
+	onLoad : function(){
+
+        if(!this.hasFocus){
+            return;
+        }
+        if(this.store.getCount() > 0){
+            if (!this.isExpanded()) {
+				this.expand();
+				this.restrictHeight();
+			}
+            if(this.lastQuery == this.allQuery){
+                if(this.editable){
+                    this.el.dom.select();
+                }
+            }else{
+				if (this.query != null) {
+					var values = [], indexes = [];
+					this.query.each(function(r){
+						values.push(r.data[this.valueField]);
+						indexes.push(this.store.indexOf(r));
+					}, this);
+					this.view.clearSelections();
+					this.updateValue(values, this.getRawValue());
+					this.view.select(indexes);
+				}
+				if (this.matches != null) {
+					if (this.matches.getCount() == 1) {
+						this.highlight(this.store.indexOf(this.matches.first()));
+						this.scrollIntoView();
+					}
+				}
+				else {
+					// @HACK: If store was configured with a proxy, set its mode to local now that its populated with data.
+					// Re-execute the query now.
+					this.mode = 'local';
+					this.lastQuery = undefined;
+					this.doQuery(this.getRawValue(), true);
+				}
+                if(this.typeAhead && this.lastKey != Ext.EventObject.DOWN && this.lastKey != Ext.EventObject.BACKSPACE && this.lastKey != Ext.EventObject.DELETE){
+					this.taTask.delay(this.typeAheadDelay);
+                }
+            }
+        }else{
+            this.onEmptyResults();
+        }
+    },
+
+	onSelect : function(record, index) {
+		if (index == -1) {
+			throw new Error('MultiCombo#onSelect did not receive a valid index');
+		}
+
+		// select only when user clicks [apply] button
+		if (this.selectOnApply == true) {
+			return;
+		}
+
+		if (this.fireEvent('beforeselect', this, record, index) !== false) {
+			var text = [];
+			var value = [];
+			var rs = this.view.getSelectedRecords();
+			for (var n = 0, len = rs.length; n < len; n++) {
+				text.push(rs[n].data[this.displayField]);
+				value.push(rs[n].data[this.valueField]);
+			}
+			this.updateValue(value, (value.length != this.store.getCount()) ? text.join(', ') : this.allSelectedText);
+			var node = this.view.getNode(index);
+			this.innerList.scrollChildIntoView(node, false);
+			this.fireEvent('select', this, record, index);
+		}
+	},
+
+	// private
+    onViewOver : function(ev, node){
+		var t = ev.getTarget(this.view.itemSelector);
+		if (t == null) {
+			return;
+		}
+		this.highlightIndex = this.store.indexOf(this.view.getRecord(t));
+		this.clearHighlight();
+		this.highlight(this.highlightIndex);
+        if(this.inKeyMode){ // prevent key nav and mouse over conflicts
+            return;null
+        }
+        return;
+    },
+
+	// private
+    onTypeAhead : function(){
+		if(this.store.getCount() > 0){
+			this.inKeyMode = false;
+            var raw = this.getRawValue();
+			var pos = this.getCaretPosition(raw);
+			var items = [];
+			var query = '';
+			if (pos !== false && pos < raw.length) {
+				items = raw.substr(0, pos).replace(/\s+/g, '').split(',');
+				query = items.pop();
+			} else {
+				items = raw.replace(/\s+/g, '').split(',');
+				query = items.pop();
+			}
+			var rs = this.store.data.filterBy(this.store.createFilterFn(this.displayField, new RegExp(query, "i"), false, false)).filterBy(this.createTypeAheadFilterFn(items));
+
+			if (rs.getCount() == 1) {
+				var r = rs.first();
+				var rindex = this.store.indexOf(r)
+				if (!this.view.isSelected(rindex)) {
+		            this.typeAheadSelected = true;
+					var selStart = raw.length;
+					var len = items.join(',').length;
+					var selEnd = null;
+					var newValue = r.data[this.displayField];
+					if (pos !== false && pos < raw.length) {
+						var insertIdx = items.length;
+						var selStart = pos;
+						items = raw.replace(/\s+/g, '').split(',');
+						items.splice(insertIdx, 1, newValue);
+						selEnd = items.slice(0, insertIdx+1).join(', ').length;
+						this.highlight(rindex);
+						this.scrollIntoView();
+
+					}
+					else {
+						items.push(newValue);
+					}
+					var len = items.join(',').length;
+		            if(selStart != len){
+						var lastWord = raw.split(',').pop();
+						if (items.length >1 && lastWord.match(/^\s+/) == null) {
+							selStart++;
+						}
+						this.setRawValue(items.join(', '));
+		                this.selectText(selStart, (selEnd!=null) ? selEnd : this.getRawValue().length);
+		            }
+				}
+			}
+        }
+    },
+
+	apply : function() {
+		var selected = 	this.view.getSelectedRecords();
+		var value = [];
+		for (var n=0,len=selected.length;n<len;n++) {
+			value.push(selected[n].data[this.valueField]);
+		}
+		this.setValue(value);
+	},
+
+	getCaretPosition : function(raw) {
+		raw = raw || this.getRawValue();
+		if(document.selection) {	// <-- IE, ugh:  http://parentnode.org/javascript/working-with-the-cursor-position/
+        	var range = document.selection.createRange();
+			//Save the current value. We will need this value later to find out, where the text has been changed
+			var orig = obj.value.replace(/rn/g, "n");
+			// replace the text
+			range.text = text;
+			// Now get the new content and save it into a temporary variable
+			var actual = tmp = obj.value.replace(/rn/g, "n");
+			/* Find the first occurance, where the original differs
+			   from the actual content. This could be the startposition
+			   of our text selection, but it has not to be. Think of the
+			   selection "ab" and replacing it with "ac". The first
+			   difference would be the "c", while the start position
+			   is the "a"
+			*/
+			for(var diff = 0; diff < orig.length; diff++) {
+			    if(orig.charAt(diff) != actual.charAt(diff)) break;
+			}
+
+			/* To get the real start position, we iterate through
+			   the string searching for the whole replacement
+			   text - "abc", as long as the first difference is not
+			   reached. If you do not understand that logic - no
+			   blame to you, just copy & paste it ;)
+			*/
+			for(var index = 0, start = 0; tmp.match(text) && (tmp = tmp.replace(text, "")) && index <= diff; index = start + text.length) {
+			    start = actual.indexOf(text, index);
+			}
+	    } else if(this.el.dom.selectionStart) {	// <-- Go the Gecko way
+			return this.el.dom.selectionStart;
+	    } else {
+	        // Fallback for any other browser
+			return false;
+	    }
+	},
+
+	onAutoSelect : function() {
+		if (!this.isExpanded()) {
+			var vlen = this.getValue().length, slen = this.view.getSelectedRecords().length;
+			if (vlen != slen || vlen == 0) {
+				this.selectByValue(this.value, true);
+			}
+		}
+		var raw = this.getRawValue();
+		this.selectText(raw.length, raw.length);
+
+		var pos = this.getCaretPosition(raw);
+		var word = '';
+		if (pos !== false && pos < raw.length) {
+			word = Ext.util.Format.trim(raw.substr(0, pos).split(',').pop());
+		} else {
+			word = Ext.util.Format.trim(raw.split(',').pop());
+		}
+		var idx = this.store.find(this.displayField, word);
+		if (idx > -1 && !this.view.isSelected(idx)) {
+			var rec = this.store.getAt(idx);
+			this.select(idx);
+		}
+	},
+	// filters-out already-selected items from type-ahead queries.
+	// e.g.: if store contains: "betty, barney, bart" and betty is already selected,
+	// when user types "b", only "bart" and "barney" should be returned as possible matches,
+	// since betty is *already* selected
+	createTypeAheadFilterFn : function(items) {
+		var key = this.displayField;
+		return function(rec) {
+			var re = new RegExp(rec.data[key], "i");
+			var add = true;
+			for (var n=0,len=items.length;n<len;n++) {
+				if (re.test(items[n])) {
+					add = false;
+					break;
+				}
+			}
+			return add;
+		}
+	},
+
+	updateValue : function(value, text) {
+		this.value = value;
+		if(this.hiddenField){
+			this.hiddenField.value = value.join(',');
+		}
+		if (typeof(text) == 'string') {
+			this.setRawValue(text);
+		}
+
+	},
+
+	/**
+	 * setValue
+	 * Accepts a comma-separated list of ids or an array.  if given a string, will conver to Array.
+	 * @param {Array, String} v
+	 */
+	setValue : function(v) {
+		var text = [];
+		var value = [];
+
+		if (typeof(v) == 'string') {	// <-- "1,2,3"
+			value = v.match(/\d+/g); // <-- strip multiple spaces and split on ","
+            if(value){
+			    for (var n=0,len=value.length;n<len;n++) {
+				    value[n] = parseInt(value[n]);
+			    }
+            }
+		}
+		else if (Ext.isArray(v)) {			// <-- [1,2,3]
+			value = v;
+		}
+		if (value && value.length) {
+			if (this.mode == 'local') {
+				this.updateValue(value);
+				this.setRawValue(this.getTextValue());
+			}
+			else {
+				this.updateValue(value);
+				this.store.load({
+					callback: function() {
+						this.setRawValue(this.getTextValue());
+					},
+					scope: this
+				});
+				this.mode = 'local';
+			}
+		}
+	},
+
+	getTextValue : function() {
+		if (this.value.length == this.store.getCount()) {
+			return this.allSelectedText;
+		}
+		else {
+			var text = [];
+			this.store.data.filterBy(this.store.createFilterFn(this.valueField, new RegExp(this.value.join('|'), "i"), false, false)).each(function(r){
+				text.push(r.data[this.displayField]);
+			}, this);
+			return text.join(', ');
+		}
+	},
+
+	/**
+     * Select an item in the dropdown list by its numeric index in the list. This function does NOT cause the select event to fire.
+     * The store must be loaded and the list expanded for this function to work, otherwise use setValue.
+     * @param {Number} index The zero-based index of the list item to select
+     * @param {Boolean} scrollIntoView False to prevent the dropdown list from autoscrolling to display the
+     * selected item if it is not currently in view (defaults to true)
+     */
+    select : function(index, scrollIntoView){
+		if (!typeof(index) == 'number') {
+			throw new Error('MultiCombo#select expected @param {Number} index but got: ' + typeof(index));
+		}
+        this.view.isSelected(index) ? this.view.deselect(index, true) : this.view.select(index, true);
+		this.onSelect(this.store.getAt(index), index);
+
+		this.matches = null;
+        if(scrollIntoView !== false){
+            var el = this.view.getNode(index);
+            if(el){
+                this.innerList.scrollChildIntoView(el, false);
+            }
+        }
+
+    },
+
+	getLastValue : function() {
+		return Ext.util.Format.trim(this.getRawValue().split(',').pop());
+	},
+
+	/**
+     * Select an item in the dropdown list by its data value. This function does NOT cause the select event to fire.
+     * The store must be loaded and the list expanded for this function to work, otherwise use setValue.
+     * @param {String} value The data value of the item to select
+     * @param {Boolean} scrollIntoView False to prevent the dropdown list from autoscrolling to display the
+     * selected item if it is not currently in view (defaults to true)
+     * @return {Boolean} True if the value matched an item in the list, else false
+     */
+    selectByValue : function(v, scrollIntoView){
+		if (v.length) {
+			var indexes = [];
+			var rs = this.store.data.filterBy(this.store.createFilterFn(this.valueField, new RegExp(v.join('|'), "i"))).each(function(r){
+				indexes.push(this.store.indexOf(r));
+			}, this);
+			if (indexes.length) {
+				this.view.select(indexes);
+				return true;
+			}
+		}
+		else {
+			this.view.clearSelections();
+			this.setRawValue('');
+			return false;
+		}
+    },
+
+	// private
+    initEvents : function(){
+        Ext.form.ComboBox.superclass.initEvents.call(this);
+        this.keyNav = new Ext.KeyNav(this.el, {
+            "up" : function(e){
+				this.lastKey = Ext.EventObject.UP;
+                this.inKeyMode = true;
+                this.selectPrev();
+				this.scrollIntoView();
+            },
+
+            "down" : function(e){
+                this.inKeyMode = true;
+				if(!this.isExpanded()){
+					this.lastKey = Ext.EventObject.DOWN;
+                    this.onTriggerClick();
+                }else{
+                    this.selectNext();
+					this.scrollIntoView();
+                }
+
+            },
+
+            "enter" : function(e){
+				var idx = this.highlightIndex;
+				if (this.inKeyMode === true) {
+					if (this.plugins.length && (idx <= -1)) {
+						if (this.plugins[idx + 1]) {
+							this.plugins[idx + 1].onEnter(this);
+						}
+					}
+					else
+						if (this.plugins.length && this.highlightIndex == 0 && this.highlightIndexPrev == -1) {
+							if (this.plugins[idx]) {
+								this.plugins[idx].onEnter(this);
+							}
+						}
+						else {
+							var idx = this.getHighlightedIndex() || 0;
+							if (this.highlightIndex != null && idx != null) {
+								this.select(idx, true);
+								//this.delayedCheck = true;
+								//this.unsetDelayCheck.defer(10, this);
+
+							}
+						}
+				}
+				else {
+					var v = this.getLastValue();
+					var raw = this.getRawValue();
+
+					/** this block should be moved to method getCurrentWord
+					 *
+					 */
+					var pos = this.getCaretPosition(raw);
+					var word = '';
+					if (pos !== false && pos < raw.length) {
+						word = Ext.util.Format.trim(raw.substr(0, pos).split(',').pop());
+					} else {
+						word = Ext.util.Format.trim(raw.split(',').pop());
+					}
+					/*******************************************************/
+
+					var idx = this.store.find(this.displayField, word);
+					if (idx != -1) {
+						var rec = this.store.getAt(idx);
+						this.select(idx, true);
+					}
+					raw = this.getRawValue();
+					this.selectText(raw.length, raw.length);
+					this.collapse();
+				}
+            },
+
+            "esc" : function(e){
+                this.collapse();
+            },
+
+            "tab" : function(e){
+				if (this.matches != null && this.matches.getCount() == 1) {
+					var idx = this.store.indexOf(this.matches.first());
+					if (!this.view.isSelected(idx)) {
+						this.select(this.store.indexOf(this.matches.first()), true);
+					}
+				}
+				else if (this.value.length == 0 && this.getRawValue().length > 0) {
+					this.setRawValue('');
+				}
+				this.collapse();
+                return true;
+            },
+
+            scope : this,
+
+            doRelay : function(foo, bar, hname){
+                if(hname == 'down' || this.scope.isExpanded()){
+                   return Ext.KeyNav.prototype.doRelay.apply(this, arguments);
+                }
+                return true;
+            },
+
+            forceKeyDown : true
+        });
+        this.queryDelay = Math.max(this.queryDelay || 10,
+                this.mode == 'local' ? 10 : 250);
+        this.dqTask = new Ext.util.DelayedTask(this.initQuery, this);
+        if(this.typeAhead){
+            this.taTask = new Ext.util.DelayedTask(this.onTypeAhead, this);
+        }
+        if(this.editable !== false){
+            this.el.on("keyup", this.onKeyUp, this);
+        }
+        if(this.forceSelection){
+            this.on('blur', this.doForce, this);
+        }
+    },
+
+	// private, blur-handler to ensure that rawValue contains only values from selections, in the same order as selected
+	validateSelections : function(field) {
+		var v = this.getValue();
+		var text = [];
+		for (var i=0,len=v.length;i<len;i++) {
+			var idx = this.store.find(this.valueField, v[i]);
+			if (idx >=0) {
+				text.push(this.store.getAt(idx).data[this.displayField]);
+			}
+		}
+		this.setRawValue(text.join(', '));
+	},
+
+	scrollIntoView : function() {
+		var el = this.getHighlightedNode();
+		if (el) {
+			this.innerList.scrollChildIntoView(el);
+		}
+	},
+
+	// private
+    selectNext : function(){
+		this.clearHighlight();
+		if (this.highlightIndex == null) {
+			this.highlightIndex = -1;
+		}
+		if (this.highlightIndex <= -1 && this.highlightIndexPrev != -1) {
+			if (this.plugins.length > 0) {
+				var idx = Math.abs(this.highlightIndex)-1;
+				if (this.plugins.length >= Math.abs(this.highlightIndex)) {
+					this.plugins[idx].selectNext(this);
+					this.highlightIndexPrev = this.highlightIndex;
+					this.highlightIndex++;
+					return false;
+				}
+			}
+		}
+		if (this.highlightIndexPrev == -1 && this.highlightIndex == 0) {
+			this.highlightIndex = -1;
+		}
+		var ct = this.store.getCount();
+		if(ct > 0){
+            if (this.highlightIndex == -1 || this.highlightIndex+1 < ct) {
+				if (this.highlightIndex == -1) {
+					this.highlightIndexPrev = 0;
+				}
+				else {
+					this.highlightIndexPrev = this.highlightIndex -1;
+				}
+				this.highlight(++this.highlightIndex);
+
+			}
+			else {
+				this.highlight(ct-1);
+			}
+        }
+    },
+
+    // private
+    selectPrev : function(){
+		this.clearHighlight();
+		if (this.highlightIndex <= 0) {
+			var idx = Math.abs(this.highlightIndex);
+			if (this.plugins.length >= idx+1 && this.highlightIndexPrev >= 0) {
+				this.clearHighlight();
+				this.plugins[idx].selectPrev(this);
+				this.highlightIndexPrev = this.highlightIndex;
+				this.highlightIndex--;
+				if (this.highlightIndex == -1) {
+					this.highlightIndexPrev = -1;
+				}
+				return false;
+			}
+			else {
+				this.highlightIndex = -1;
+				this.highlightIndexPrev = -1;
+				this.collapse();
+				return;
+			}
+		}
+
+		this.highlightIndexPrev = this.highlightIndex;
+        var ct = this.store.getCount();
+        if(ct > 0){
+			if (this.highlighIndex == -1) {
+				this.highlightIndex = 0;
+			}
+			else if (this.highlightIndex != 0) {
+				this.highlightIndex--;
+			}
+			else if (this.highlightIndex == 0) {
+				this.collapse();
+			}
+			this.highlight(this.highlightIndex);
+        }
+    },
+
+	collapse : function() {
+		if (this.isExpanded()) {
+			this.highlightIndex = null;
+			this.highlightIndexPrev = null;
+		}
+		Ext.ux.MultiCombo.superclass.collapse.call(this);
+	},
+
+	highlight : function(index) {
+		this.view.el.select('.'+this.highlightClass).removeClass(this.highlightClass);
+		var node = Ext.fly(this.view.getNode(index));
+		if (node) {
+			node.addClass(this.highlightClass);
+		}
+	},
+
+	getHighlightedIndex : function() {
+		var node = this.view.el.child('.' + this.highlightClass, true);
+		return (node) ? this.store.indexOf(this.view.getRecord(node)) : this.highlightIndex;
+	},
+	getHighlightedNode : function() {
+		return this.view.el.child('.'+this.highlightClass, true);
+	},
+
+	clearHighlight : function() {
+		if (typeof(this.view) != 'object') { return false; }
+		var el = this.view.el.select('.'+this.highlightClass);
+		if (el) {
+			el.removeClass(this.highlightClass);
+		}
+	},
+
+    // private
+    initList : function(){
+        if(!this.list){
+            var cls = 'x-combo-list';
+
+            this.list = new Ext.Layer({
+                shadow: this.shadow, cls: [cls, this.listClass].join(' '), constrain:false
+            });
+
+            var lw = this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth);
+            this.list.setWidth(lw);
+            this.list.swallowEvent('mousewheel');
+            this.assetHeight = 0;
+            if(this.syncFont !== false){
+                this.list.setStyle('font-size', this.el.getStyle('font-size'));
+            }
+            if(this.title){
+                this.header = this.list.createChild({cls:cls+'-hd', html: this.title});
+                this.assetHeight += this.header.getHeight();
+            }
+
+            this.innerList = this.list.createChild({cls:cls+'-inner'});
+            this.innerList.on('mouseover', this.onViewOver, this);
+            this.innerList.on('mousemove', this.onViewMove, this);
+            this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
+
+            if(this.pageSize){
+                this.footer = this.list.createChild({cls:cls+'-ft'});
+                this.pageTb = new Ext.PagingToolbar({
+                    store:this.store,
+                    pageSize: this.pageSize,
+                    renderTo:this.footer
+                });
+                this.assetHeight += this.footer.getHeight();
+            }
+
+            if(!this.tpl){
+                /**
+                * @cfg {String/Ext.XTemplate} tpl The template string, or {@link Ext.XTemplate}
+                * instance to use to display each item in the dropdown list. Use
+                * this to create custom UI layouts for items in the list.
+                * <p>
+                * If you wish to preserve the default visual look of list items, add the CSS
+                * class name <pre>x-combo-list-item</pre> to the template's container element.
+                * <p>
+                * <b>The template must contain one or more substitution parameters using field
+                * names from the Combo's</b> {@link #store Store}. An example of a custom template
+                * would be adding an <pre>ext:qtip</pre> attribute which might display other fields
+                * from the Store.
+                * <p>
+                * The dropdown list is displayed in a DataView. See {@link Ext.DataView} for details.
+                */
+                this.tpl = '<tpl for="."><div class="'+cls+'-item">{' + this.displayField + '}</div></tpl>';
+                /**
+                 * @cfg {String} itemSelector
+                 * <b>This setting is required if a custom XTemplate has been specified in {@link #tpl}
+                 * which assigns a class other than <pre>'x-combo-list-item'</pre> to dropdown list items</b>.
+                 * A simple CSS selector (e.g. div.some-class or span:first-child) that will be
+                 * used to determine what nodes the DataView which handles the dropdown display will
+                 * be working with.
+                 */
+            }
+
+            /**
+            * The {@link Ext.DataView DataView} used to display the ComboBox's options.
+            * @type Ext.DataView
+            */
+            this.view = new Ext.DataView({
+                applyTo: this.innerList,
+                tpl: this.tpl,
+				simpleSelect: true,
+                multiSelect: true,
+				overClass: this.overClass,
+                selectedClass: this.selectedClass,
+                itemSelector: this.itemSelector || '.' + cls + '-item'
+            });
+            this.view.on('click', this.onViewClick, this);
+			this.fireEvent('initview', this, this.view);
+            this.bindStore(this.store, true);
+
+            if(this.resizable){
+                this.resizer = new Ext.Resizable(this.list,  {
+                   pinned:true, handles:'se'
+                });
+                this.resizer.on('resize', function(r, w, h){
+                    this.maxHeight = h-this.handleHeight-this.list.getFrameWidth('tb')-this.assetHeight;
+                    this.listWidth = w;
+                    this.innerList.setWidth(w - this.list.getFrameWidth('lr'));
+                    this.restrictHeight();
+                }, this);
+                this[this.pageSize?'footer':'innerList'].setStyle('margin-bottom', this.handleHeight+'px');
+            }
+        }
+    }
+});
+
+
+Ext.reg('multicombo', Ext.ux.MultiCombo);
\ No newline at end of file