In extjs in grid cell i have to display list of values from an string array which is part of a record

Question

In extjs in gird cell i have to display data like this:

FirstName  LastName   Department   UserId

Jhon       Peter      Finance      8345    
                      Facilities
                      Social


I am going to get data like this

<FirstName>Jhon</FirstName>
<LastName>Peter</LastName>
<Department>
<string>Finance</string>
<string>Facilities</string>
<string>Social</string>
</Department>
<UserId>8345</UserId>

Department array is a part of the data record from a service. I have to display department array value in grid cell one after the other. This department array values varies from user to user.

Can any share an example how to do it in extjs.

Answer 1

You can use Ext.grid.column.Template class.

// I took example from Sencha Doc
Ext.create('Ext.data.Store', {
    storeId:'employeeStore',
    fields:['firstname', 'lastname', 'seniority', 'department'],
    groupField: 'department',
    data:[
        { firstname: "Michael", lastname: "Scott",   seniority: 7, department: "Management" },
        { firstname: "Dwight",  lastname: "Schrute", seniority: 2, department: "Sales" },
        { firstname: "Jim",     lastname: "Halpert", seniority: 3, department: "Sales" },
        { firstname: "Kevin",   lastname: "Malone",  seniority: 4, department: "Accounting" },
        { firstname: "Angela",  lastname: "Martin",  seniority: 5, department: "Accounting" }
    ]
});

Ext.create('Ext.grid.Panel', {
    title: 'Column Template Demo',
    store: Ext.data.StoreManager.lookup('employeeStore'),
    /**
     * here, you can define your template by 'tpl' property.
     * 'firstname' and 'lastname' comes from store definition
     */
    columns: [
        { text: 'Full Name',       xtype: 'templatecolumn', tpl: '{firstname} {lastname}', flex:1 },
        { text: 'Department (Yrs)', xtype: 'templatecolumn', tpl: '{department} ({seniority})' }
    ],
    height: 200,
    width: 300,
    renderTo: Ext.getBody()
});