I wanted to create an ItemSelector in ExtJS 4.1, but they don't seem to have a working "title" property for the two lists. Here is exactly what I want:

<http://dev.sencha.com/deploy/ext-4.0.0/examples/multiselect/multiselect-demo.html>

(observe the two titles: "available" and "selected")

and here is "the same example" applied for the 4.1 version:

<http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/multiselect/multiselect-demo.html>

That is why I have downloaded extJS 4.1 and added the ItemSelector and MultiSelect files from an earlier version(4.0.7). Then I have copied almost everything from the first example, but nothing is done and I gen no error message.

Please tell me how I should make such an ItemSelector work(preferably using ext JS 4.1, since it's the latest version and it seems wrong to start with a deprecated version, but at this point, any working solution will do, since I ran out of ideas).

Here is my html file: 

```
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

```

Insert title here

```
<!-- ExtJS -->
<link rel="stylesheet" type="text/css" href="./resources/css/ext-all.css" />
<script type="text/javascript" src="bootstrap.js"></script>

<!-- Shared -->
<!--     <link rel="stylesheet" type="text/css" href="../shared/example.css" /> -->

<!-- Example -->
<script type="text/javascript" src="app.js"></script>
<link rel="stylesheet" type="text/css" href="./resources/css/ItemSelector.css" />

```

and the app.js file:

```
Ext.Loader.setConfig({enabled: true});
//Ext.Loader.setPath('Ext.ux', './ux');
Ext.require([
    'Ext.form.Panel',
    'Ext.ux.form.MultiSelect',
    'Ext.ux.form.ItemSelector'
]);

 Ext.onReady(function(){
console.log("ready");

/*
 * Ext.ux.form.MultiSelect Example Code
 */
var msForm = Ext.widget('form', {
    title: 'MultiSelect Test',
    width: 400,
    bodyPadding: 10,
    renderTo: 'multiselect',
    items:[{
        anchor: '100%',
        xtype: 'multiselect',
        msgTarget: 'side',
        fieldLabel: 'Multiselect',
        name: 'multiselect',

        allowBlank: false,
        // minSelections: 2,
        // maxSelections: 3,

        store: [[123,'One Hundred Twenty Three'],
                ['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five'],
                ['6', 'Six'], ['7', 'Seven'], ['8', 'Eight'], ['9', 'Nine']],

        value: ['3', '4', '6'],

        ddReorder: true
    }],

    tbar:[{
        text: 'Options',
        menu: [{
            text: 'Set value (2,3)',
            handler: function(){
                msForm.getForm().findField('multiselect').setValue(['2', '3']);
            }
        },{
            text: 'Toggle enabled',
            handler: function(){
                var m = msForm.getForm().findField('multiselect');
                if (!m.disabled) {
                    m.disable();
                } else {
                    m.enable();
                }
            }
        },{
            text: 'Toggle delimiter',
            handler: function() {
                var m = msForm.getForm().findField('multiselect');
                if (m.delimiter) {
                    m.delimiter = null;
                    Ext.Msg.alert('Delimiter Changed', 'The delimiter is now set to <b>null</b>. Click Save to ' +
                                  'see that values are now submitted as separate parameters.');
                } else {
                    m.delimiter = ',';
                    Ext.Msg.alert('Delimiter Changed', 'The delimiter is now set to <b>","</b>. Click Save to ' +
                                  'see that values are now submitted as a single parameter separated by the delimiter.');
                }
            }
        }]
    }],

    buttons: [{
        text: 'Clear',
        handler: function(){
            var field = msForm.getForm().findField('multiselect');
            if (!field.readOnly && !field.disabled) {
                field.clearValue();
            }
        }
    }, {
        text: 'Reset',
        handler: function() {
            msForm.getForm().reset();
        }
    }, {
        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));
            }
        }
    }]
});

console.log(msForm);

var ds = Ext.create('Ext.data.ArrayStore', {
    data: [[123,'One Hundred Twenty Three'],
        ['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five'],
        ['6', 'Six'], ['7', 'Seven'], ['8', 'Eight'], ['9', 'Nine']],
    fields: ['value','text'],
    sortInfo: {
        field: 'value',
        direction: 'ASC'
    }
});

/*
 * Ext.ux.form.ItemSelector Example Code
 */
var isForm = Ext.widget('form', {
    title: 'ItemSelector Test',
    width: 700,
    bodyPadding: 10,
    renderTo: 'itemselector',

    tbar:[{
        text: 'Options',
        menu: [{
            text: 'Set value (2,3)',
            handler: function(){
                isForm.getForm().findField('itemselector').setValue(['2', '3']);
            }
        },{
            text: 'Toggle enabled',
            handler: function(){
                var m = isForm.getForm().findField('itemselector');
                if (!m.disabled) {
                    m.disable();
                } else {
                    m.enable();
                }
            }
        },{
            text: 'Toggle delimiter',
            handler: function() {
                var m = isForm.getForm().findField('itemselector');
                if (m.delimiter) {
                    m.delimiter = null;
                    Ext.Msg.alert('Delimiter Changed', 'The delimiter is now set to <b>null</b>. Click Save to ' +
                                  'see that values are now submitted as separate parameters.');
                } else {
                    m.delimiter = ',';
                    Ext.Msg.alert('Delimiter Changed', 'The delimiter is now set to <b>","</b>. Click Save to ' +
                                  'see that values are now submitted as a single parameter separated by the delimiter.');
                }
            }
        }]
    }],

    items:[{
        xtype: 'itemselector',
        name: 'itemselector',
        anchor: '100%',
        fieldLabel: 'ItemSelector',
        imagePath: '../ux/images/',

        store: ds,
        displayField: 'text',
        valueField: 'value',
        value: ['3', '4', '6'],

        allowBlank: false,
        // minSelections: 2,
        // maxSelections: 3,
        msgTarget: 'side'
    }],

    buttons: [{
        text: 'Clear',
        handler: function(){
            var field = isForm.getForm().findField('itemselector');
            if (!field.readOnly && !field.disabled) {
                field.clearValue();
            }
        }
    }, {
        text: 'Reset',
        handler: function() {
            isForm.getForm().reset();
        }
    }, {
        text: 'Save',
        handler: function(){
            if(isForm.getForm().isValid()){
                Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />'+
                    isForm.getForm().getValues(true));
            }
        }
    }]
});

});

```

and finally, this is my folder structure:

```
-app.js
-bootstrap.js
-ext-all-debug.js
-NewFile.html
-ux
   -form
         -ItemSelector.js
         -MultiSelector.js
         -layout
              -ItemSelector.js
              -MultiSelect.js
-resources
   -css
         -ext-all.css
         -ItemSelector.css

```