title: EXT JS 4 use an model association to render a grid display value
body: <h1>Details</h1>
  <p>I have a grid used to display invoice information. The grid is populated using the Invoice store, the Invoice store uses the Invoice model, the Invoice model has a &quot;has one&quot; association with the InvoiceStatus model with a primary key of 'id' and a foren key of 'invoice_status_id'.</p>
  <h1>Problem</h1>
  <p>I'm not sure how to make the display value of the Invoice Grid's 'Status' column use the associated models 'name' inserted of the invoice_status_id. I know I need to create a renderer to do this however I still get a null value. Both the Invoice and InvoiceStatus stors are populating with the correct values.</p>
  <p><strong>Status Column Render</strong></p>
  <pre><code>renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
      return record.getStatus().get('name');
  },
  </code></pre>
  <p><strong>Invoice Store</strong></p>
  <pre><code>Ext.define('MyApp.store.Invoice', {
      extend: 'Ext.data.Store',
  
      requires: [
          'MyApp.model.InvoiceModel'
      ],
  
      constructor: function(cfg) {
          var me = this;
          cfg = cfg || {};
          me.callParent([Ext.apply({
              autoLoad: true,
              autoSync: true,
              model: 'MyApp.model.InvoiceModel',
              remoteSort: true,
              storeId: 'StoreInvoce',
              proxy: {
                  type: 'rest',
                  url: '/api/invoice',
                  reader: {
                      type: 'json',
                      root: 'data'
                  }
              }
          }, cfg)]);
      }
  });
  </code></pre>
  <p><strong>InvoiceStatus Store</strong></p>
  <pre><code>Ext.define('MyApp.store.InvoiceStatus', {
      extend: 'Ext.data.Store',
      alias: 'store.InvoiceStatus',
  
      requires: [
          'MyApp.model.InvoiceStatus'
      ],
  
      constructor: function(cfg) {
          var me = this;
          cfg = cfg || {};
          me.callParent([Ext.apply({
              autoLoad: true,
              autoSync: true,
              model: 'MyApp.model.InvoiceStatus',
              remoteSort: true,
              storeId: 'MyJsonStore1',
              proxy: {
                  type: 'rest',
                  url: '/api/invoice_status',
                  reader: {
                      type: 'json',
                      root: 'data'
                  }
              }
          }, cfg)]);
      }
  });
  </code></pre>
  <p><strong>Invoice Model</strong></p>
  <pre><code>Ext.define('MyApp.model.InvoiceModel', {
      extend: 'Ext.data.Model',
   
      uses: [
          'MyApp.model.InvoiceStatus'
      ],
   
      fields: [
          {
              mapping: 'id',
              name: 'id',
              type: 'int'
          },
          {
              mapping: 'client_id',
              name: 'client_id',
              type: 'int'
          },
          {
              mapping: 'client_name',
              name: 'client_name',
              type: 'string'
          },
          {
              dateFormat: 'Y-m-d',
              dateReadFormat: '',
              mapping: 'issue_date',
              name: 'issue_date',
              sortType: 'asDate',
              type: 'date'
          },
          {
              dateFormat: 'Y-m-d',
              mapping: 'due_date',
              name: 'due_date',
              sortType: 'asDate',
              type: 'date'
          },
          {
              mapping: 'payment_date',
              name: 'payment_date',
              sortType: 'asDate',
              type: 'date',
              useNull: true
          },
          {
              name: 'amount'
          },
          {
              mapping: 'invoice_status_id',
              name: 'invoice_status_id',
              sortType: 'asInt',
              type: 'int'
          }
      ],
   
      hasOne: {
          model: 'MyApp.model.InvoiceStatus',
          foreignKey: 'invoice_status_id',
          getterName: 'getStatus'
      }
  });
  </code></pre>
  <p><strong>InvoiceStatus Model</strong></p>
  <pre><code>Ext.define('MyApp.model.InvoiceStatus', {
      extend: 'Ext.data.Model',
  
      fields: [
          {
              mapping: 'id',
              name: 'id',
              type: 'int'
          },
          {
              mapping: 'name',
              name: 'name',
              type: 'string'
          }
      ]
  });
  </code></pre>
  <p><strong>Invoice Grid</strong></p>
  <pre><code>Ext.define('MyApp.view.ApplicationViewport', {
      extend: 'Ext.container.Viewport',
  
      requires: [
          'MyApp.view.ClearTriggerField'
      ],
  
      layout: {
          type: 'border'
      },
  
      initComponent: function() {
          var me = this;
  
          Ext.applyIf(me, {
              items: [
                  {
                      xtype: 'header',
                      region: 'north',
                      height: 100,
                      items: [
                          {
                              xtype: 'image',
                              height: 100,
                              width: 250,
                              alt: 'Logo',
                              src: 'images/logo.gif',
                              title: 'Logo'
                          }
                      ]
                  },
                  {
                      xtype: 'container',
                      region: 'center',
                      layout: {
                          type: 'card'
                      },
                      items: [
                          {
                              xtype: 'container',
                              width: 150,
                              layout: {
                                  type: 'border'
                              },
                              items: [
                                  {
                                      xtype: 'gridpanel',
                                      collapseMode: 'mini',
                                      region: 'west',
                                      split: true,
                                      autoRender: false,
                                      maxWidth: 300,
                                      width: 250,
                                      bodyBorder: false,
                                      animCollapse: false,
                                      collapsed: false,
                                      collapsible: true,
                                      hideCollapseTool: true,
                                      overlapHeader: false,
                                      titleCollapse: true,
                                      allowDeselect: true,
                                      columnLines: false,
                                      forceFit: true,
                                      store: 'ClientDataStor',
                                      dockedItems: [
                                          {
                                              xtype: 'toolbar',
                                              dock: 'top',
                                              items: [
                                                  {
                                                      xtype: 'cleartrigger'
                                                  },
                                                  {
                                                      xtype: 'tbfill'
                                                  },
                                                  {
                                                      xtype: 'button',
                                                      icon: '/images/settings.png'
                                                  }
                                              ]
                                          }
                                      ],
                                      columns: [
                                          {
                                              xtype: 'templatecolumn',
                                              tpl: [
                                                  '&lt;img class=&quot;pull-left client-menu-image&quot; src=&quot;/images/{type}.png&quot;&gt;&lt;div class=&quot;client-menu-name&quot;&gt;{name}&lt;/div&gt;&lt;div class=&quot;client-menu-type&quot;&gt;{type}&lt;/div&gt;'
                                              ],
                                              dataIndex: 'id',
                                              text: 'Client'
                                          }
                                      ],
                                      selModel: Ext.create('Ext.selection.RowModel', {
  
                                      }),
                                      plugins: [
                                          Ext.create('Ext.grid.plugin.BufferedRenderer', {
  
                                          })
                                      ]
                                  },
                                  {
                                      xtype: 'gridpanel',
                                      region: 'center',
                                      title: 'Invoices',
                                      titleCollapse: false,
                                      forceFit: true,
                                      store: 'Invoice',
                                      columns: [
                                          {
                                              xtype: 'numbercolumn',
                                              maxWidth: 120,
                                              minWidth: 50,
                                              dataIndex: 'id',
                                              groupable: false,
                                              lockable: true,
                                              text: 'ID',
                                              tooltip: 'Invoice ID',
                                              format: '0'
                                          },
                                          {
                                              xtype: 'numbercolumn',
                                              hidden: true,
                                              maxWidth: 120,
                                              minWidth: 50,
                                              dataIndex: 'client_id',
                                              groupable: true,
                                              text: 'Client ID',
                                              format: '0'
                                          },
                                          {
                                              xtype: 'gridcolumn',
                                              renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
                                                  return record.getStatus().get('name');
                                              },
                                              maxWidth: 200,
                                              minWidth: 100,
                                              dataIndex: 'invoice_status_id',
                                              text: 'Status'
                                          },
                                          {
                                              xtype: 'datecolumn',
                                              maxWidth: 200,
                                              minWidth: 100,
                                              dataIndex: 'issue_date',
                                              text: 'Issue Date',
                                              format: 'd M Y'
                                          },
                                          {
                                              xtype: 'datecolumn',
                                              maxWidth: 200,
                                              minWidth: 100,
                                              dataIndex: 'due_date',
                                              text: 'Due Date',
                                              format: 'd M Y'
                                          },
                                          {
                                              xtype: 'datecolumn',
                                              maxWidth: 200,
                                              minWidth: 100,
                                              dataIndex: 'payment_date',
                                              text: 'Payment Date',
                                              format: 'd M Y'
                                          },
                                          {
                                              xtype: 'templatecolumn',
                                              summaryType: 'sum',
                                              maxWidth: 150,
                                              minWidth: 50,
                                              tpl: [
                                                  '${amount}'
                                              ],
                                              defaultWidth: 80,
                                              dataIndex: 'amount',
                                              groupable: true,
                                              text: 'Amount'
                                          }
                                      ],
                                      features: [
                                          {
                                              ftype: 'grouping'
                                          }
                                      ]
                                  }
                              ]
                          }
                      ]
                  }
              ]
          });
  
          me.callParent(arguments);
      }
  
  });
  </code></pre>