title: extjs model associations in a list view
body: <p>I have two models: Page and Department. I am showing pages in a list view in extjs and I would like to display the Department's Name instead of the department_id in the List view. I have not gotten to the part of actually adding the department to the page VIA the GUI, only through direct db insert statements, but I would like to at least be able to display the department name in the list view.</p>
  
  <p>I have the following so far, this is showing department_id</p>
  
  <h1>models</h1>
  
  <pre><code>Ext.define('ExtMVC.model.Department', {
      extend: 'Ext.data.Model',
      fields: ['name']
  });
  
  Ext.define('ExtMVC.model.Page', {
      extend: 'Ext.data.Model',
      fields: ['title','body','department_id'],
      associations: [
          {type: 'belongsTo', model: 'Department'}
      ]
  });
  </code></pre>
  
  <h1>stores</h1>
  
  <pre><code>Ext.define('ExtMVC.store.Pages', {
      extend: 'Ext.data.Store',
      model: 'ExtMVC.model.Page',
      autoLoad: true,
      proxy: {
        type: 'rest',
        url: '/admin/pages',
        format: 'json'
      }
  });
  Ext.define('ExtMVC.store.Departments', {
      extend: 'Ext.data.Store',
      model: 'ExtMVC.model.Department',
      autoLoad: true,
      proxy: {
        type: 'rest',
        url: '/admin/departments',
        format: 'json'
      }
  });
  </code></pre>
  
  <h1>List View</h1>
  
  <pre><code>Ext.define('ExtMVC.view.page.List' ,{
      extend: 'Ext.grid.Panel',
      alias : 'widget.pagelist',
  
      title : 'All Pages',
      store: 'Pages',
  
      initComponent: function() {
          this.tbar = [{
              text: 'Create Page', action: 'create'
          }];
  
          this.columns = [
              {header: 'Title',       dataIndex: 'title',       flex: 1},
              {header: 'Department',  dataIndex: 'department_id',  flex: 1}
          ];
          this.callParent(arguments);
      }
  });
  </code></pre>
  
  <h1>controller (fwiw)</h1>
  
  <pre><code>Ext.define('ExtMVC.controller.Pages', {
      extend: 'Ext.app.Controller',
  
      init: function() {
        this.control({
              'pagelist': {
                  itemdblclick: this.editPage
              },
              'pagelist &gt; toolbar &gt; button[action=create]': {
                  click: this.onCreatePage
              },
              'pageadd button[action=save]': {
                click: this.doCreatePage
              },
              'pageedit button[action=save]': {
                click: this.updatePage
              }
          });
      },
  
      onCreatePage: function () {
        var view = Ext.widget('pageadd');
      },
  
      onPanelRendered: function() {
          console.log('The panel was rendered');
      },
  
      doCreatePage: function (button) {
        var win = button.up('window'),
        form = win.down('form'),
        values = form.getValues(),
        store = this.getPagesStore();
        if (form.getForm().isValid()) {
          store.add(values);
          win.close();
          this.getPagesStore().sync();
        }
      },
  
      updatePage: function (button) {
          var win = button.up('window'),
              form = win.down('form'),
              record = form.getRecord(),
              values = form.getValues(),
              store = this.getPagesStore();
          if (form.getForm().isValid()) {
              record.set(values);
              win.close();
              this.getPagesStore().sync();
          }
      },
  
      editPage: function(grid, record) {
        var view = Ext.widget('pageedit');
        view.down('form').loadRecord(record);
      },
  
      stores: [
          'Pages',
          'Departments'
      ],
  
      models: [
        'Page'
  
      ],
  
      views: [
          'page.List',
          'page.Add',
          'page.Edit'
      ]
  });
  </code></pre>