Ext JS 4.1: renderer parameter in grid's columns doesn't work

Question

I'm looking for a tip to solve a problem with an extjs grid panel. The situation I'm facing is the following:

I have a grid panel composed by a number of columns, such grid is populated by a date store. Below I report grid's data store and its related data model:

Ext.define('branch', {
    extend: 'Ext.data.Model',
    fields: [{
        type: 'int',
        name: 'id'
    }, {
        type: 'int',
        name: 'customer_id'
    }, {
        type: 'int',
        name: 'city_id'
    }, {
        type: 'string',
        name: 'address'
    }, {
        type: 'string',
        name: 'phone'
    }, {
        type: 'string',
        name: 'fax'
    }, {
        type: 'string',
        name: 'email'
    }]
});

var branch_store = Ext.create('Ext.data.Store', {
    autoDestroy: true,
    model: 'branch',
    autoLoad: true,
    proxy: {
        type: 'ajax',
        url: 'controller/loader.php?item=branch',
        reader: {
            type: 'json',
            successProperty: 'success',
            root: 'data'
        }
    }
});

Here's the definition of the gridpanel with the list of its columns:

rowHeight: 0.15,
xtype: 'gridpanel',
id: 'branch_grid',
store: branch_store,
height: 400,
title:'Branch list',
columns: [{
    text   : 'id',
width    : 30,
sortable : true,
dataIndex: 'id'
},{
    text   : 'Company',
width  :   200,
sortable : true,
dataIndex: 'customer_id',
renderer: get_company
},{
    text   : 'City',
width    : 100,
sortable : true,
dataIndex: 'city_id'
//renderer: city_from_id
},{
    text   : 'Address',
width    : 100,
sortable : true,
dataIndex: 'address'
},{
text   : 'Phone',
width    : 100,
sortable : true,
dataIndex: 'phone'
},{
text   : 'Fax',
width    : 100,
sortable : true,
dataIndex: 'fax'
},{
text   : 'Email',
width    : 100,
sortable : true,
dataIndex: 'email'
}

Well, if I didn't use a renderer for 'Company' column extjs would display a column containing an integer, which is customer's id. I don't like that, so I wrote a simple renderer named get_company which gets customer name by knowing customer id. To do that it scans customers' data store looking for the record having the passed id, when it finds that record it returns record's field called 'company' which contains customer's name. Here's the code for the renderer:

function get_company(val) {
    if(customer_store.count()>0) {
    console.log('Val: '+ val + ', Stuff: ' + customer_store.count());
    company = ' ' + customer_store.getById(val).get('company');
    console.log(typeof company);
    return company;
}
else{
    console.log('customer store is empty');
    return 'test name';
}
}

Finally here's the code for customer_store and its related data model:

Ext.define('customer', {
    extend: 'Ext.data.Model',
    fields: [{
        type: 'int',
        name: 'id'
    }, {
        type: 'string',
        name: 'company'
    }, {
        type: 'string',
        name: 'vat'
    }, {
        type: 'string',
        name: 'ssn'
    }, {
        type: 'int',
        name: 'ref_id'
    }]
});

var customer_store = Ext.create('Ext.data.Store', {
    autoDestroy: true,
    model: 'customer',
    autoLoad: true,
    proxy: {
        type: 'ajax',
        url: 'controller/loader.php?item=customer',
        reader: {
            type: 'json',
            successProperty: 'success',
            root: 'data'
        }
    }
});

Well, every time I test this code I obtain a gridpanel in which Company column contains 'test name' on each row, I believe the cause of this problem is that the renderer function acts BEFORE the customer_store has been fully loaded. Does anyone know how to fix this problem ?

I found a trick to solve my problem, but I don't like it and I'd like something more smart..Anyway, an ugly way to fix my code is the statement: customer_store.load() before gridpanel's rendering. — Enrico Massone

sha sha · Accepted Answer · 2012-06-18T10:32:43

The only way to fix your problem is to ensure that customer_store will be loaded before branch_store.

So, don't load branch_store automatically. Instead catch afterrender event for the grid panel, load store customer_store like this:

customer_store.on('load', function() {
   branch_store.load();
}, this, { single: true });
customer_store.load();

Ext JS 4.1: renderer parameter in grid's columns doesn't work

1 Answers