var empData = [{ 'emp_no': '1001', 'last_name': 'Doe', 'first_name': 'John', 'age': '23', 'doj': '08/06/2009' }, { 'emp_no': '1002', 'last_name': 'Sparrow', 'first_name': 'Jack', 'age': '26', 'doj': '08/12/2010' }, { 'emp_no': '1003', 'last_name': 'Spacey', 'first_name': 'Kevin', 'age': '27', 'doj': '01/23/2011' }, { 'emp_no': '1004', 'last_name': 'Gates', 'first_name': 'Bill', 'age': '35', 'doj': '10/10/2006' }]; var empStore = new Ext.data.JsonStore({ fields: [{ name: 'emp_no' }, { name: 'last_name' }, { name: 'first_name' }, { name: 'age', type: 'int' }, { name: 'doj', type: 'date', dateFormat: 'm/d/Y' }], data: empData }); 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-font-style’ //return val; } var grid = new Ext.grid.GridPanel({ store: empStore, columns: [{ header: 'Emp No.', width: 75, sortable: true, dataIndex: 'emp_no', 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: 300, width: 440, title: 'Employee Details ', renderTo: Ext.getBody() });