title: Sencha Touch 2: Populating one DataView using multiple stores
body: <p>I realise this may sound silly, so hopefully this doesn't come across as being too stupid. I'm wanting to use multiple stores to populate one DataView, or other item that I can apply an itemTpl to. I have a basic idea that I'm wanting to implement:</p>
  
  <ul>
  <li>I have a store of Users and Items, users can buy items. </li>
  <li>Every user has an associated balance which dictates what items they can purchase.</li>
  </ul>
  
  <p>I want to be able to present a list of items that can be purchased (regardless of whether a user has enough money in their account). Any items that a user can't afford should be greyed out (but still visible).</p>
  
  <p>As you can see from the above pictures, the first user can see all items without any being greyed out (as they have enough balance), however the second user doesn't have enough money available to purchase the armour. Is there any way to grab the information from the two separate stores (ItemStore and UserStore) to list all items, but grey out items that a user doesn't have enough for.</p>
  
  <p>Below is my code:</p>
  
  <p><strong>(DataView) ItemSelectionScreen:</strong></p>
  
  <pre><code>Ext.define("touchstore.view.purchase.ItemSelectionScreen", {
      extend: 'Ext.dataview.DataView',
      xtype: 'item-selection',
  
      config: {
          store: 'ItemStore',
          itemTpl: new Ext.XTemplate(
              '&lt;tpl for="."&gt;',
                  '&lt;div class="item {canAfford}"&gt;', //canAfford should be that the users balance is greater than the price of the item
                      '&lt;h1&gt;{itemName}&lt;/h1&gt;',
                      '&lt;span&gt;{description}&lt;/span&gt;&lt;br /&gt;',
                      '&lt;div class="cost"&gt;&lt;strong&gt;Cost: {cost}&lt;/strong&gt;&lt;/div&gt;',
                  '&lt;/div&gt;',
              '&lt;/tpl&gt;')
      }
  });
  </code></pre>
  
  <p><strong>ItemModel:</strong></p>
  
  <pre><code>Ext.define('touchstore.model.ItemModel', {    
      extend: 'Ext.data.Model',
  
      config: {
          fields: [
              { name: 'itemName', type: 'string' },
              { name: 'description', type: 'string' },
              { name: 'cost', type: 'int' }
          ]
      }
  });
  </code></pre>
  
  <p><strong>ItemStore:</strong></p>
  
  <pre><code>Ext.define("touchstore.store.ItemStore", {
      extend: 'Ext.data.Store',
  
      config: {
          model: 'touchstore.model.ItemModel',
          data: [
              { itemName: 'Sword', description: 'Battle your enemies fiercely with this beautiful, yet deadly sword.', cost: 500 },
              { itemName: 'Armour', description: 'Defend yourself from attacks with this beautifully crafted piece of armour.', cost: 1400 },
              { itemName: 'Leather Boots', description: 'Run faster with these lightweight yet stylish boots.', cost: 400 }
          ]
      }
  });
  </code></pre>
  
  <p><strong>UserModel:</strong></p>
  
  <pre><code>Ext.define("touchstore.model.UserModel", {
      extend: 'Ext.data.Model',
  
      config: {
          fields: [
              { name: 'username', type: 'string' },
              { name: 'balance', type: 'int' }
          ]
      }
  });
  </code></pre>
  
  <p><strong>UserStore:</strong></p>
  
  <pre><code>Ext.define("touchstore.store.UserStore", {
      extend: 'Ext.data.Store',
  
      config: {
          model: 'touchstore.model.UserModel',
          data: [
              { username: 'steve.smith', balance: 2000 },
              { username: 'robert.junior', balance: 500 }
          ]
      }
  });
  </code></pre>