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 -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/**
- * 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/**
- * 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=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.
- *
- * If you wish to preserve the default visual look of list items, add the CSS
- * class name
x-combo-list-item
to the template's container element.
- *
- * The template must contain one or more substitution parameters using field
- * names from the Combo's {@link #store Store}. An example of a custom template
- * would be adding an
ext:qtip
attribute which might display other fields
- * from the Store.
- *
- * The dropdown list is displayed in a DataView. See {@link Ext.DataView} for details.
- */
- this.tpl = '{' + this.displayField + '} ';
-
/**
- * @cfg {String} itemSelector
- * This setting is required if a custom XTemplate has been specified in {@link #tpl}
- * which assigns a class other than 'x-combo-list-item'
to dropdown list items.
- * 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