extJS how to create multi select?

Question

So, how to create multi select?

I found on sencha.com this tutorial:

       var msForm = new Ext.form.FormPanel({
    title: 'MultiSelect Test',
    width:700,
    bodyStyle: 'padding:10px;',
    items:[{
        xtype:"multiselect",
        fieldLabel:"Multiselect<br />(Required)",
        name:"multiselect",
        dataFields:["code", "desc"], 
        valueField:"code",
        displayField:"desc",
        width:250,
        height:200,
        allowBlank:false,
        data:[[123,"One Hundred Twenty Three"],
            ["1", "One"], ["2", "Two"], ["3", "Three"], ["4", "Four"], ["5", "Five"],
            ["6", "Six"], ["7", "Seven"], ["8", "Eight"], ["9", "Nine"]],
        tbar:[{
            text:"clear",
            handler:function(){
                msForm.getForm().findField("multiselect").reset();
            }
        }]
    }],       
    buttons: [{
        text: 'Save',
        handler: function(){
            if(msForm.getForm().isValid()){
                Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />'+ 
                    msForm.getForm().getValues(true));
            }
        }
    }]
});

when i paste it, and write msForm , just white screen , when i delete this code, everythings perfect.. wtf? I want multi select too!!

Download firefox, install the firebug extension from getfirebug.com and then run your code with firebug turned on and report back the error message. — JamesHalsall
if nothing is being displayed then an error must be occurring, if there's text on the page then its possibly just a CSS issue — JamesHalsall

Abdel Raoof Olakara Abdel Raoof Olakara · Accepted Answer · 2011-05-02T11:22:52

Just adding the code is not enough! You need to add the CSS and JS files. You need to add:

MultiSelect.css
MultiSelect.js

You will also have to use the ItemSelector.js as per your requirements. These file are available at:

extJS how to create multi select?

1 Answers