title: ExtJS DataView customization and events
body: <p>I've got a couple of questions regarding the DataView sample from ExtJS available here:</p>
  
  <p><a href="http://dev.sencha.com/deploy/ext-4.0.0/examples/view/data-view.html" rel="nofollow">http://dev.sencha.com/deploy/ext-4.0.0/examples/view/data-view.html</a></p>
  
  <p>Here are the questions that I have:</p>
  
  <ol>
  <li><p>I have got a custom component that extends panel and does some layout and things to suit my application. I want to use data view to render many instances of this component in a vertical list view much like this example. I am working with MVC and have a model and store. </p></li>
  <li><p>The example listens to selectionchange event in the view. Since I am following ExtJS MVC pattern, I would like to have a listener for this event in the controller. However, I cannot get it to do that. I have tried something like this (assuming action: 'picturesListView' for the Ext.view.View in the example):</p>
  
  <pre><code>this.control({
      'picturesListView': {
           selectionchange: function() { console.log('selectionchange'); }
       }
  });
  </code></pre></li>
  </ol>
  
  <p>However this doesn't work. </p>
  
  <p>Posting the class code on request:</p>
  
  <pre><code>Ext.create('Ext.Panel', {
      id: 'images-view',
      frame: true,
      collapsible: true,
      width: 535,
      renderTo: 'dataview-example',
      title: 'Simple DataView (0 items selected)',
      items: Ext.create('Ext.view.View', {
          store: store,
          tpl: [
              '&lt;tpl for="."&gt;',
                  '&lt;div class="thumb-wrap" id="{name}"&gt;',
                  '&lt;div class="thumb"&gt;&lt;img src="{url}" title="{name}"&gt;&lt;/div&gt;',
                  '&lt;span class="x-editable"&gt;{shortName}&lt;/span&gt;&lt;/div&gt;',
              '&lt;/tpl&gt;',
              '&lt;div class="x-clear"&gt;&lt;/div&gt;'
          ],
          multiSelect: true,
          height: 310,
          trackOver: true,
          overItemCls: 'x-item-over',
          itemSelector: 'div.thumb-wrap',
          emptyText: 'No images to display',
          alias: 'view.picturesListView',
          plugins: [
              Ext.create('Ext.ux.DataView.DragSelector', {}),
              Ext.create('Ext.ux.DataView.LabelEditor', {dataIndex: 'name'})
          ],
          prepareData: function(data) {
              Ext.apply(data, {
                  shortName: Ext.util.Format.ellipsis(data.name, 15),
                  sizeString: Ext.util.Format.fileSize(data.size),
                  dateString: Ext.util.Format.date(data.lastmod, "m/d/Y g:i a")
              });
              return data;
          },
          }
      })
  });
  </code></pre>