ExtJS grids with cell & row renderers

In this post I will focus on cell and row renderers. It is often desired to provide external references to the data present on the grid. One simple way is to present the user with a hyperlink on selected columns. This is made possible using a cell renderer.

Here’s the modified columns array definition.

columns: [

{header: 'Emp No.', width: 100, sortable: true, dataIndex: 'emp_no', align:'center', renderer:  showEmpDetails},

{header: 'Last Name', width: 100, sortable: true, dataIndex: 'last_name'},

{header: 'First Name', width: 100, sortable: true, dataIndex: 'first_name'},

{header: 'Age', width: 75, sortable: true, dataIndex: 'age'},

{header: 'Date of Joining', width: 100, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'doj'}

]

The renderer function is defined as,

function showEmpDetails(val, meta, rec, rIndex, cIndex, store) {

return "<a href='#'>" + val + "</a>";

//or apply any css class of your choice using

//meta.css = ‘awesome-header-style’

//return val;

}

Here's the JSFiddle -> JSFiddle Row renderer

NOTE: The renderer function should return only ‘html’ content.

Similarly, Rows on the grid can be made to appear in colors other than white/grey.

Consider the employee grid. We could indicate senior employees (age >=27) with a yellow background.

Here’s the modified grid definition,

var grid = new Ext.grid.GridPanel({

store: empStore,

            columns: [

                                {header: 'Emp No.', width: 100, sortable: true, dataIndex: 'emp_no', align:'center', renderer: showEmpDetails},

                                {header: 'Last Name', width: 100, sortable: true, dataIndex: 'last_name'},

                                {header: 'First Name', width: 100, sortable: true, dataIndex: 'first_name'},

                                {header: 'Age', width: 75, sortable: true, dataIndex: 'age'},

                                {header: 'Date of Joining', width: 100, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'doj'}

                ],

                viewConfig: {

                                //Return CSS class to apply to rows depending upon data values

                                getRowClass: function(record, index) {

                                                var c = record.get('age');

                                                if (c >= 27) {

                                                                return 'senior';

                                                }

                                }

                },

                stripeRows: true,

                height: 350,

                width: 530,

                title: 'Employee Details',

                renderTo: Ext.getBody()

});

The CSS class ‘senior’ is defined as,

<style>

        .senior {

               background-color: #FFFF00

        }

</style> 

Here's the fiddle -> JSFiddle Row renderer