title: Ext JS 4 ItemSelector example
body: <p>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:</p>
  
  <p><a href="http://dev.sencha.com/deploy/ext-4.0.0/examples/multiselect/multiselect-demo.html" rel="nofollow">http://dev.sencha.com/deploy/ext-4.0.0/examples/multiselect/multiselect-demo.html</a></p>
  
  <p>(observe the two titles: "available" and "selected")</p>
  
  <p>and here is "the same example" applied for the 4.1 version:</p>
  
  <p><a href="http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/multiselect/multiselect-demo.html" rel="nofollow">http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/multiselect/multiselect-demo.html</a></p>
  
  <p>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.</p>
  
  <p>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).</p>
  
  <p>Here is my html file: </p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
  </code></pre>
  
  <p>
  
  
  Insert title here</p>
  
  
  
  <pre><code>&lt;!-- ExtJS --&gt;
  &lt;link rel="stylesheet" type="text/css" href="./resources/css/ext-all.css" /&gt;
  &lt;script type="text/javascript" src="bootstrap.js"&gt;&lt;/script&gt;
  
  &lt;!-- Shared --&gt;
  &lt;!--     &lt;link rel="stylesheet" type="text/css" href="../shared/example.css" /&gt; --&gt;
  
  &lt;!-- Example --&gt;
  &lt;script type="text/javascript" src="app.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" type="text/css" href="./resources/css/ItemSelector.css" /&gt;
  </code></pre>
  
  <p>
  </p>
  
  
  
  
  
  <p>
  </p>
  
  <p>and the app.js file:</p>
  
  <pre><code>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 &lt;b&gt;null&lt;/b&gt;. 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 &lt;b&gt;","&lt;/b&gt;. 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 &amp;&amp; !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: &lt;br /&gt;'+
                      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 &lt;b&gt;null&lt;/b&gt;. 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 &lt;b&gt;","&lt;/b&gt;. 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 &amp;&amp; !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: &lt;br /&gt;'+
                      isForm.getForm().getValues(true));
              }
          }
      }]
  });
  
  });
  </code></pre>
  
  <p>and finally, this is my folder structure:</p>
  
  <pre><code>-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
  </code></pre>