Edit in JSFiddle

var empData = [{
    'emp_no': '1001',
        'last_name': 'Doe',
        'first_name': 'John',
        'age': '23',
        'doj': '08/06/2009',
        'address': '52nd Cross Street'
}, {
    'emp_no': '1002',
        'last_name': 'Sparrow',
        'first_name': 'Jack',
        'age': '26',
        'doj': '08/12/2010',
        'address': '23rd Street'
}, {
    'emp_no': '1003',
        'last_name': 'Spacey',
        'first_name': 'Kevin',
        'age': '26',
        'doj': '01/23/2011',
        'address': 'Central Park'
}, {
    'emp_no': '1004',
        'last_name': 'Gates',
        'first_name': 'Bill',
        'age': '35',
        'doj': '10/10/2006',
        'address': 'Kings Cross'
}];

/*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'
    }, {
        name: 'address'
    }],
    data: empData
});*/
var empReader = new Ext.data.JsonReader({}, [{
    name: 'emp_no'
}, {
    name: 'last_name'
}, {
    name: 'first_name'
}, {
    name: 'age',
    type: 'int'
}, {
    name: 'doj',
    type: 'date',
    dateFormat: 'm/d/Y'
}, {
    name: 'address'
}]);

var empStore = new Ext.data.GroupingStore({
    reader: empReader,
    data: empData,
    sortInfo: {
        field: 'emp_no',
        direction: "ASC"
    },
    groupField: 'age'
});


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: 100,
        sortable: true,
        dataIndex: 'emp_no',
        align: 'center',
        renderer: showEmpDetails,
        locked: true
    }, {
        header: 'Last Name',
        width: 100,
        sortable: true,
        dataIndex: 'last_name',
        locked: true
    }, {
        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'
    }, {
        header: 'Address',
        width: 200,
        dataIndex: 'address'
    }],
    view: new Ext.grid.GroupingView({
        groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
    }),
    stripeRows: true,
    height: 300,
    width: 440,
    title: 'Employee Details ',
    renderTo: Ext.getBody()
});