View Full Version : Mutli Select ComboBox

9 Apr 2007, 5:56 AM
I have been hunting through the source code, trying to find something of a multi select combo box. One that I am able to select more than one entry.

Having the functionality of the combo box is awesome, and to tie that in with the ability not only to select one entry, but have a checkbox next to each item in the list would be perfect.

Any chance there is something like this in existence that I have overlooked? I seen the checkbox item, but noticed that is more for the one off items. I also seen that you can integrate it into a toolbar, but I want a single stand alone field that can have the multi select, so I don't believe this would work.

9 Apr 2007, 4:44 PM
I dont think this exists yet.

Forms are still fairly new. Im sure it will come soon.

24 Apr 2007, 2:35 PM
I just made a request for this. Jeff made a good recommendation to use check boxes as a workaround. But I agree this should be supported.

24 Apr 2007, 11:52 PM
I just made a request for this. Jeff made a good recommendation to use check boxes as a workaround. But I agree this should be supported.
That's great! Thanks

28 Apr 2007, 8:09 PM
Help me~
Multi Select ComboBox

Thanks all! Thanks!

24 May 2007, 3:15 PM
You could try
coding a select in the html form with multiple set.

<select name="test" size="4" multiple="multiple" id="test">

create a data store

var ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'test'}),
reader: new Ext.data.JsonReader({root: 'data',totalProperty: 'totalCount',id: 'id'},
[ {name: 'id', mapping: 'id'},{name: 'name', mapping: 'name'}])

Then build the combo box looping through the data store and adding a new Option to the select on the apporiate event.

3 Jul 2007, 5:59 AM
hi all. any news on the multi select combo? has anybody come up with a cool solution? also, is there a way of having a combo who's items are checkboxes?

thanks in advance

12 Jul 2007, 10:42 AM
I needed a double select list for a project so I threw together one real fast. I was in a hurry so I'm sure it could be done more efficiently but it works. Because I used select elements it looks ugly as sin in IE but terrific in Firefox. Firefox screen shot attached.

var form = new Ext.form.Form({labelAlign:"right", method:"POST", url:"submit.php"});
form.container({width:325, labelAlign:"top"});
firstBox = form.column({width:155});
chgBox = form.column({width:20});
secBox = form.column({width:150});
chgBox.on("render", function () {var chgEl = Ext.get(chgBox.id);var chgChild = chgEl.createChild({tag:"div", cls:"x-form-item"}, chgEl.dom.lastChild);var chgChild2 = chgChild.createChild({tag:"div", cls:"x-form-element"}, chgChild.dom.lastChild);chgChild.createChild({tag:"div", style:"height: 75px;"}, chgChild.dom.lastChild);chgEl.createChild({tag:"div", cls:"x-form-clear-left"}, chgEl.dom.lastChild);chgChild2.createChild("<a href=\"#\" onclick=\"double_list_move($('not_rma'), $('Rmapart')); return false;\"><img src=\"/images/add.png\" alt=\"Add\" /></a>");chgChild2.createChild("<a href=\"#\" onclick=\"double_list_move($('Rmapart'), $('not_rma')); return false;\"><img src=\"/images/remove.png\" alt=\"Remove\" /></a>");});
firstBox.on("render", function () {var firstEl = Ext.get(firstBox.id);var firstChild = firstEl.createChild({tag:"div", cls:"x-form-item"}, firstEl.dom.lastChild);var firstChild2 = firstChild.createChild({tag:"div", cls:"x-form-element"}, firstChild.dom.lastChild);firstChild.createChild("<label for\"Rmapart\">RMA Parts List</label>", firstChild.dom.lastChild);firstEl.createChild({tag:"div", cls:"x-form-clear-left"}, firstEl.dom.lastChild);firstSel = firstChild2.createChild("<select name=\"Rmapart[]\" id=\"Rmapart\" multiple=\"multiple\" class=\"double_list x-form-text x-form-field\" style=\"width:150px; height: 150px;\" autocomplete=\"off\"></select>");firstSel.on("focus", function () {firstSel.addClass("x-form-focus");});firstSel.on("blur", function () {firstSel.removeClass("x-form-focus");});});
secBox.on("render", function () {var secEl = Ext.get(secBox.id);var secChild = secEl.createChild({tag:"div", cls:"x-form-item"}, secEl.dom.lastChild);var secChild2 = secChild.createChild({tag:"div", cls:"x-form-element"}, secChild.dom.lastChild);secChild.createChild("<label for\"not_rma\">Device Parts List</label>", secChild.dom.lastChild);secEl.createChild({tag:"div", cls:"x-form-clear-left"}, secEl.dom.lastChild);secSel = secChild2.createChild("<select name=\"not_rma[]\" id=\"not_rma\" multiple=\"multiple\" style=\"width:150px; height: 150px;\" autocomplete=\"off\" class=\"x-form-text x-form-field\"></select>");secSel.on("focus", function () {secSel.addClass("x-form-focus");});secSel.on("blur", function () {secSel.removeClass("x-form-focus");});});

function double_list_move(src, dest) {
for (var i = 0; i < src.options.length; i++) {
if (src.options[i].selected) {
dest.options[dest.length] = new Option(src.options[i].text, src.options[i].value);
src.options[i] = null;

function double_list_submit() {
selects = $$("select.double_list");
selects.each(function (element) {for (var i = 0; i < element.options.length; i++) {element.options[i].selected = true;}});
return true;


13 Jul 2007, 1:58 AM

can you pass your all code(script, css and html) , let me test

13 Jul 2007, 3:12 AM
html is just like the examples, div just needs an id called form. CSS is ext-all.css

The way I did it plays nicely with other standard ext form elements.

16 Jul 2007, 5:16 AM
I tried to use your example but without success for the moment.
First I don't understand why there is always XX values in both comboxes by default.
Then I tried to add default values in the combo bow to test the add/remove features, but the "render" action is not finished when I add new option object. What is the event name to listen to perform action when the reder is over ?

18 Jul 2007, 6:26 AM
Has there been any progress on a mult-select combo? Checkboxes would be cool.


5 Aug 2007, 4:43 AM
Works like a dream with switching and all, but how do I integrate it with submit command for the form I just created?? Anyone can help?

5 Aug 2007, 7:06 AM
I want to create a standar method to select values for my applications based on dialog

12 Oct 2007, 1:45 PM
Any news on multiple selectbox ? this feature is really missing to convert existing application to extjs forms.


14 Oct 2007, 4:08 PM