Grid Column Sort not working in 4.1 but does in 4.2

Hello,

I am new to EXT JS.

I have a Grid that when using 4.2 the columns sort by clicking on the header or by clicking in the options from clicking on the arrow.

Now for my code to go into production I have to use 4.1 but in 4.1 the columns don't sort the options are greyed out.

I have tried adding sortableColumns : true to the grid which made no difference and I have even tried adding sortable : true to each column which also made no difference.

Here is the code for the grid.

Code:

var eduGrid = Ext.create("Ext.grid.Panel",{        title: 'EDU Status',
        id: 'grid',
        store:  EDU_Report_store,
        verticalScroller : {
                numFromEdge : 5,
                trailingBufferZone : 10,
                leadingBufferZone : 20
        },
        columns: [
            { text: 'Store Number', dataIndex: 'store_number', width: 150,align: 'center', sortable : true},
            { text: 'Store Name', dataIndex: 'store_name', width: 250, sortable : true},
            { text: 'IP Address', dataIndex: 'edu_ip', width: 100,align: 'center', sortable : true},
            { text: 'Data Requested', dataIndex : 'data_requested', width: 100, align: 'center', sortable : true,
                renderer : function(value) {
                        if (value === '1'){
                        return Ext.String.format('<img src="images/accept.png" />');
                    }
                    else {
                        return Ext.String.format('<img src="images/cross.png" /> ');
                    }
                },
                align : 'center'
            },
            { text: 'Pingable', dataIndex: 'edu_online', width: 55, sortable : true,
                renderer: function(value){
                    if (value === '1'){
                        return Ext.String.format('<img src="images/accept.png" />');
                    }
                    else {
                        return Ext.String.format('<img src="images/cross.png" /> ');
                    }
                },
                align: 'center'
            },
            {
                text: 'More Info...',
                width: 75,
                sortable : false,
                renderer: function(value) {
                    return Ext.String.format("<img src='images/information.png' /> ");
                },
                align: 'center'
            }
        ],
        listeners: {
            cellClick: function(grid,el,columnIndex,record,tr,rowIndex,event) {
                var columns = this.getView().getHeaderCt().getGridColumns();
                if (columnIndex === columns.length -1){
                    var storeId = Ext.getCmp('grid').getStore().getAt(rowIndex);
                    loadMoreInfo(storeId.get('store_number'), record);
                }


            }
        }
    });

Have I missed anything?

Any help would be appreciated.