MultiSelect ComboBox Component for Ext JS

December 26th, 2008

Unable to find a ComboBox component for Ext JS that would work in an Ext Grid, permit multiple selections, and support both local and remote datasources with multiple fields (one for display, one for the index), I set out to build my own some time back.

Note: Since I began working on this some time back, a similar Ext plugin was developed by another developer: see http://lovcombo.extjs.eu/

Examples after the fold.

Here is an example of the MultiSelect ComboBox.

Here is an example of the MultiSelect menu working in an Ext JS Grid.

The source below above is pretty self explanatory, feel free to post in the ExtJS forums with any questions as I will lurk there.

Tagged: Ext, javascript

§ 9 Responses to “MultiSelect ComboBox Component for Ext JS”

- Name: ald_2008
- Date: January 27th, 2009
- Hi,
  Really good work, Thanks!
  Have one question, how are you populating selected values in a message box when you click on the Show Selected Button.
  Can you please post the code for it? or email it to me?
  
  I will appreciate it.
  
  Thanks,
- Name: Scott G.
- Date: April 29th, 2009
- Tony, thanks for building this great component. FYI I initially found it on this page:
  
  http://www.tonylandis.com/code-projects/ext-multiselect-combobox-extension.htm
  
  The page has a working example of the latest code, but the download link gets you an earlier version with some bugs in it. Thought you might like to know so you can update it!
- Name: Harry
- Date: June 26th, 2009
- Hi Tony,
  
  tanx a lot for such a great work. Could you just help me with loading data dynamically(ie., after rendering the component)? it is showing empty list.
- Name: Freesurf
- Date: July 18th, 2009
- Hi…very cool script!!
  
  Like Harry, I’m trying to load store from a database!!
  
  This is my code…but doesn’t work
  
  ——–
  
  Ext.example.Store = new Ext.data.Store({
  id: ‘StatesData’,
  proxy: new Ext.data.HttpProxy({
  url: ‘database.php’,
  method: ‘POST’
  }),
  reader: new Ext.data.JsonReader({
  root: ‘results’,
  totalProperty: ‘total’
  },[
  {name: 'id', type: 'string', mapping: 'id'},
  {name: 'name', type: 'string', mapping: 'name'}
  ]),
  sortInfo:{field: ‘name’, direction: “ASC”}
  });
  
  Ext.example.Store.load();
  
  ———
  
  Could you help me? Tnx in advance
- Name: vandroid
- Date: August 3rd, 2009
- There is some error in this component.
  Try to make a little change in example-grid-multiselect.js:
  replace line
  ['AK', 'Alaska', 'The Land of the Midnight Sun'],
  with
  ['A', 'Alaska', 'The Land of the Midnight Sun'],
  and see what happens. Open page in browser, check Alabama and Alaska - the text field & qtip now contains Alabama, Alabama. Also hide menu, then click it again - only Alabama item will be checked.
  
  I had no time to wait for your reply, so i decided to solve it by myself
  
  The problem is in MultiSelect2.js, method setValues(), line 173:
  var item = this.store.query(this.valueField, keys[i]).items[0];
  
  Documentation says, that first parameter of query() method is “Either a string that the field should begin with, or a RegExp to test against the field.”
  So when we query for A (Alaska), it returns collection with 3 items (AL, A, AR) and item[0] is AL.
  
  As a quick’n'dirt solution, i simply changed the query to regexp:
  var regxp = new RegExp(”^” + keys[i] + “$”);
  var item = this.store.query(this.valueField,regxp).items[0];
- Name: Michael G.
- Date: August 12th, 2009
- Great Work Tony!
  
  The only problem I have is that we use ColdFusion 8 so we are stuck to extjs 1.1, which comes with CF.
  
  Is there any chance to get your MultiSelect Component running under extjs 1.1? It is exactly what we need and I haven’t found a better solution yet.
- Name: Scott G.
- Date: September 24th, 2009
- Thanks for the great component!
  
  I made a small upgrade to the component which allows the control to display the number of items selected if they won’t fit in the box, instead of just cutting them off. So if you selected “Arkansas”, “Colorado” and “New York” in your example, it would show “(3 Selected)” instead of a cut-off list. The tooltip will still show the entire list of selected items:
  
  ——-
  
  setValues: function(keys, removeDashes) {
  
  if (typeof(removeDashes) == ‘undefined’) {
  removeDashes = true;
  }
  
  // Get the width of the combobox control (just the text part)
  var inputWidth = this.getEl().getWidth() - 5;
  
  // Set up a flag to indicate whether the textual representation of the current component value is too wide for the combobox
  var overWidthLimit = false;
  
  var text = ”;
  var tipText = ”;
  var value = ”;
  // For each of the keys in the keys argument…
  for (var i = 0; i inputWidth) {
  text = ‘(’+keys.length+’ selected)’;
  textWidth = inputWidth;
  overWidthLimit = true;
  }
  // If we’re not over the limit, add the item’s text to the combobox’s text
  else {
  text += itemText;
  }
  }
  // Add the item’s text to the tooltip text.
  tipText += itemText;
  }
  }
  }
  // Set the combobox value
  this.setValue(value, text, tipText);
  },
  
  ——
- Name: kavitha
- Date: October 21st, 2009
- Hi Tony,
  
  Great Work!. It’s really a good and useful component. I could successfully use this component in my project and my user’s liked it a lot. But now they are expecting us to give a functionality to select all the items in one shot by adding one more check box (name could be select All) as first element of the list like 2007 Excel filtering. So they can check all items and uncheck all the items by clicking/unclicking on the select all checkbox.
  
  Can you suggest how can we implement that feature?
  
  Thanks,
  -Kavitha
- Name: Bjoern
- Date: December 27th, 2009
- Hi Tony,
  
  great work, do you plan a version for ExtJS 3.1 ? We just downloaded ExtJS 3.1 and verify all components and the multiselect combobox does not seem to work anymore with ExtJS 3.1. With ExtJS 3.0.0 it has been working.
  
  Best regards,
  Bjoern