title: Using the DataView Example to create a photo gallery
body: <p>I am building a web application using ExtJS. In my web application, the users can upload photos to the server directory. In addition, I also save the file path to a database table along with the user id so I know whose photo a certain photo is. Naturally, I would also want them to be able to view it. I can fetch the database rows properly based on the logged in user. However, the difficulty I'm having right now concerns showing the user his or her photos.</p>
  <p>Upon searching the web, I <a href="http://dev.sencha.com/deploy/ext-4.0.0/examples/view/data-view.html" rel="nofollow noreferrer">saw this example</a> provided by Sencha. Upon looking at the code, it seemed simple enough to integrate to my existing application.</p>
  <p>Upon examining the provided <a href="http://dev.sencha.com/deploy/ext-4.0.0/examples/view/data-view.js" rel="nofollow noreferrer">data-view.js file</a>, I saw that it uses 2 plugins that were already provided in the <code>ext/src/ux/</code> subdirectory so I saw no purpose in adding them and my app.js file looks like this:</p>
  <pre><code>requires: [
      'Ext.Loader',
      'Ext.layout.container.Absolute',
      'Ext.layout.container.Column',
      'Ext.grid.*',
      'Ext.ux.DataView.DragSelector',
      'Ext.ux.DataView.LabelEditor'
  ],
  </code></pre>
  <p>Now, I also have my own model and my own store.</p>
  <p>My model looks like:</p>
  <pre><code>Ext.define('app.model.ciGallery', {
  extend: 'Ext.data.Model',
  
  requires: [
      'Ext.data.Field'
  ],
  
  fields: [
      {
          name: 'image_path'
      },
      {
          name: 'description'
      },
      {
          name: 'upload_date'
      },
      {
          name: 'upload_time'
      }
  ]
  });
  </code></pre>
  <p>And my store looks like a standard store used to do CRUD on database.</p>
  <p>Now, in order to create the photo gallery example, what I did was to get the panel where I want the gallery to appear on and made a function for its <code>afterrender</code> property. In that after render function, what I basically did was to copy paste the entire example starting from <code>Ext.create(....</code></p>
  <p>It looks like this:</p>
  <pre><code>var store = Ext.getStore(&quot;ciGallery&quot;);
  
  Ext.create('Ext.Panel', {
      id: 'images-view',
      frame: true,
      collapsible: true,
      width: 200,
      renderTo: 'dataview-example',
      title: 'Simple DataView (0 items selected)',
      items: Ext.create('Ext.view.View', {
          store: store,
          tpl: [
              '&lt;tpl for=&quot;.&quot;&gt;',
              '&lt;div class=&quot;thumb-wrap&quot; id=&quot;{name}&quot;&gt;',
              '&lt;div class=&quot;thumb&quot;&gt;&lt;img src=&quot;{url}&quot; title=&quot;{name}&quot;&gt;&lt;/div&gt;',
              '&lt;span class=&quot;x-editable&quot;&gt;{shortName}&lt;/span&gt;&lt;/div&gt;',
              '&lt;/tpl&gt;',
              '&lt;div class=&quot;x-clear&quot;&gt;&lt;/div&gt;'
          ],
          multiSelect: true,
          height: 310,
          trackOver: true,
          overItemCls: 'x-item-over',
          itemSelector: 'div.thumb-wrap',
          emptyText: 'No images to display',
          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.image_path, 15),
                  sizeString: Ext.util.Format.fileSize(data.upload_date),
                  dateString: Ext.util.Format.date(data.upload_time)
              });
              return data;
          },
  
          listeners: {
              selectionchange: function(dv, nodes ){
                  var l = nodes.length,
                      s = l !== 1 ? 's' : '';
                  this.up('panel').setTitle('Simple DataView (' + l + ' item' + s + ' selected)');
              }
          }
      })
  });
  </code></pre>
  <p>Where <code>ciGallery</code> is my store, <code>dataview-example</code> is the <code>id</code> property of the parent panel, as well as adjustments to the <code>prepareData</code> function to match the properties of the model I use.</p>
  <p>However, when I run my application and go to that panel, it seems like nothing rendered properly because I don't see anything, not even a blank panel.</p>