title: extjs 4 XTemplate class associations
body: <p>I'm testing out extjs 4 and I have stumbled upon something, I can't seem to figure out.</p>
  
  <p>I have simple object association: <strong>Snapshot  - hasMany  -> Model</strong></p>
  
  <p>Now, I am trying to use XTemplate to show this association in View component, so I have my XTemplate looking like this: </p>
  
  <pre><code>Ext.create('Ext.XTemplate',
  '&lt;tpl for="."&gt;',
  '&lt;div class="snapshot" id="{id}"&gt;',
  '&lt;h1&gt;{snapshot}&lt;/h1&gt;',
  '&lt;p&gt;&lt;span class="label"&gt;Created: &lt;/span&gt;{dateString}&lt;/p&gt;',
  '&lt;p&gt;&lt;span class="label"&gt;Models&lt;/span&gt;&lt;/p&gt;',
  '&lt;tpl for="models"&gt;',
  '&lt;p&gt;{name}  - {description}&lt;/p&gt;',
  '&lt;/tpl&gt;',
  '&lt;/div&gt;',
  '&lt;/tpl&gt;',
  '&lt;div class="x-clear bottompad"&gt;&lt;/div&gt;'
  );
  </code></pre>
  
  <p>And my JSON response looks like this (showing just 'snapshot' node):</p>
  
  <pre><code>    {
          "id": 1,
          "snapshot": "Snapshot 1",
          "created": 1305806847000,
          "models": [
              {
                  "id": 1,
                  "name": "ABC",
                  "description": "A B C"
              }, {
  
                  "id": 111,
                  "name": "ABCDD",
                  "description": "A B C XCXC"
              }
          ]
      }
  </code></pre>
  
  <p>As extjs 4 introduces concept of Model I have created models for Snapshot and Model and created association according to API docs.</p>
  
  <p>Snapshot model:</p>
  
  <pre><code>Ext.define('Snapshot', {
      extend: 'Ext.data.Model',
      fields: [
          {name: 'id', type: 'int'},
          'snapshot',
          {name: 'created',type: 'date', dateFormat: 'time' }
  
      ],
      associations:[
        {type: 'hasMany', model: 'Model', name: 'models'}  
      ],
      idProperty: 'id'
  });
  </code></pre>
  
  <p>Model model ;P</p>
  
  <pre><code>Ext.define('Model', {
      extend: 'Ext.data.Model',
      belongsTo: 'Snapshot',
      fields: [
          { name: 'id',  type: 'int' },
          { name: 'snapshot_id', type: 'int' },            
          'name',
          'description'
      ],
      idProperty: 'id'
  });
  </code></pre>
  
  <p>And this is where my problem lies - When I use this setup, none of my models is displayed when XTemplate is being executed, however if I remove associations from Snapshot model and just add another field called 'models' it works OK.</p>
  
  <p>What is the best practise to display list of models correctly while using associations?
  Would I have to use nested templates and custom functions to do this?</p>