Extjs 4 - Combining two grid columns

Question

I have a datastore and a grid. I am trying to declare a new column called FullName that would combine the two dataindexes. After spending some time researching this issue, I understand it could either be a renderer (grid level) or it could be a custom column in the datastore (mapping?).

Can someone provide a code sample that implements such a column?

// XML
<person>
    <first_name>John</first_name>
    <last_name>Smith</last_name>
</person> 

// Store
Ext.create('Ext.data.Store', {
    autoLoad: true,
    storeId: 'TestStore',
    fields: ['first_name', 'last_name'],
    data: parsed_xml_object,
    proxy: {
        type: 'memory',
        reader: {
            type: 'xml',
            record: 'person'
        }
    }
});

// Grid
TestGrid = Ext.create('Ext.grid.Panel', {
    title: 'Test',
    store: Ext.data.StoreManager.lookup('TestStore'),
    columns: [
        { header: 'First Name', dataIndex: 'first_name' },
        { header: 'Last Name Name', dataIndex: 'last_name' },
     ],
    height: 200,
    autowidth: true
});

Answer 1

Use a custom renderer:

{
   header: "Name",
   dataIndex: 'last_name',
   renderer: function(value, element, record) {
       return record.data['last_name'] + ', ' + record.data['first_name'];
   }
}

Answer 2

you can use templeteColumn for it which is a Column definition class which renders a value by processing a Model's data using a configured XTemplate

http://docs.sencha.com/ext-js/4-0/#/api/Ext.grid.column.Template