ExtJS 4 “renderer” column on grid

richardhell picture richardhell · Jun 8, 2012 · Viewed 59.4k times · Source

I've a grid that should execute a renderer on a column, but that don't show anything and neither recoignise record.

View

Ext.define('Ab.view.maquina.MaquinaList', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.maquinalist',
    store: 'Maquinas',
    tbar: [
        { text: _('Agregar'), action:'add'},
        { text: _('Editar'), action: 'upd'},
        { text: _('Eliminar'), action: 'del'}
    ],
    columns: [
        { text: _('Nombre'), flex: 1, dataIndex: 'nombre' },
         { text: _('Estado'), flex: 1, dataIndex: 'estado'},
        { text: _('Marca'), flex: 1, dataIndex: 'codigo', renderer: function(value, record){this.renderMarca(value, record)}} 
    ],
    renderMarca: function(value,record){
             console.log(value);  < show value
             console.log(record.get('nombre')); < error 
             return value; < don't show value on the column

    }    
});

Thanks

Answer

Kevin Vaughan picture Kevin Vaughan · Jun 8, 2012

The record is not logging correctly there because the renderer function has different parameters than those you are trying to use. From http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.column.Column-cfg-renderer:

renderer: function (value, metaData, record, row, col, store, gridView) {

You are also not returning the value from inside your renderer. This fixes those two problems:

{ 
  text: _('Marca'), 
  flex: 1, 
  dataIndex: 'codigo', 
  renderer: function(value, metaData, record, row, col, store, gridView){
    return this.renderMarca(value, record);
  }
}