Sorting is not working when we click on Header of the Grid

[abhijeetljoshi]

Sorry friends. I got the issue. the dataindex was not matching with the field values.

Hi friends I am new to ExtJs I am facing problem to sort the grid when I click on the grid header.
I have refered this thread but no getting the solution:
http://www.sencha.com/forum/showthre...-column-header

I am using the renderer and my Json response is similar to:

{"totalCount":16,"data":[{"accountId":"00190000008plSYAAY","accountName":"XP2","amount":"9999.0","crmOpportunityId":"006900000058gx5AAA","opportunityName":"Foo-Opp9","sourceData":"","sourceName":"NULL_HOST","sourceType":"Referrer","stageName":"Closed Lost","visitorId":"34a1aa16-9a01-434c-a231-fd9c98c3c587"},{"accountId":"00190000008plSYAAY","accountName":"XP2","amount":"8888.0","crmOpportunityId":"006900000058h1UAAQ","opportunityName":"Foo-Opp8","sourceData":"","sourceName":"NULL_HOST","sourceType":"Referrer","stageName":"Closed Won","visitorId":"34a1aa16-9a01-434c-a231-fd9c98c3c587"},{"accountId":"00190000008plSYAAY","accountName":"XP2","amount":"2555.0","crmOpportunityId":"006900000058Cf4AAE","opportunityName":"oct-Test1","sourceData":"","sourceName":"NULL_HOST","sourceType":"Referrer","stageName":"Prospecting","visitorId":"c9652989-3e08-4ef3-92df-5a8e0bf77b61"}],"success":true} 

//Store:
var opportunityStore = new Ext.data.JsonStore ( {
        url : '/jsonopp',
        method : 'POST',
        autoLoad : true,
        loadMask : randomMaskMessage(),
        remoteSort: true,
        baseParams : {
            s : 6002,
            start:0,
            limit:20,
            //stg:test,
            tr : oppReportDateSelect.getValue(),
            referrer:referrerValue,
            email:emailValue,
            search:searchValue,
            direct:directValue
        },
        root : 'data',
        
        fields : [ 'opportunityName', 'accountName', 'stageName', 'amount', 'sourceType', 'sourceName', 'sourceData', 'crmOpportunityId' ]
    });
    opportunityStore.setDefaultSort ('amount', 'DESC');

    //Paging toolbar
    var opportunityPagingBar = new Ext.PagingToolbar ( {
        id : 'opportunityPagingBar',        
        displayInfo : true,
        displayMsg : '',
        pageSize : 20,
        height : 39,
        html : '<div class="ribbon-left">Displaying Data</div>',
        prependButtons : false,
        store : opportunityStore,
        buttonAlign : 'right'
    });

    // This grid is used to display the data
    var opportunityGridPanel = new Ext.grid.GridPanel ( {
        id : 'opportunityGridPanel',
        cls: 'opportunityGridPanel',        
        store : opportunityStore,
        tbar : opportunityPagingBar,
        height:500,
        autoScroll : false,
        stripeRows : true,
        collapsible : false,
        closable : false,
        columnLines : true,
        autoExpandColumn : 'opportunityName',
        loadMask : randomMaskMessage (),
        border : false,
        columns : [{
                id : 'opportunityName',
                header : '<b>Opportunity Name</b>',
                sortable : true,
                dataIndex : 'oppName',
                renderer : function(value, p, record)
                          {
                              return '<a href="javascript:void(0);" onClick="getOpportunityDetails(\''+
                              record.data.crmOpportunityId +'\')">'+
                              record.data.opportunityName+'</a>';
                          }
            }, {
                id : 'accountName',
                header : '<b>Account Name</b>',
                sortable: true,
                dataIndex : 'accName',
                renderer : function(value, p, record)
                          {
                              return record.data.accountName;
                          }
            }, {
                id : 'stageName',
                header : '<b>Stage</b>',
                sortable: true,
                dataIndex : 'stage',
                renderer : function(value, p, record)
                          {
                              return record.data.stageName;
                          }
            }, {
                id : 'amount',
                header : '<b>Amount</b>',
                sortable: true, 
                renderer : function(value, p, record)
                          {
                              return record.data.amount;
                          }
            }, {
                id : 'sourceType',
                header : '<b>Name</b>',
                sortable : true,
                dataIndex : 'name',
                renderer : function(value, p, record)
                          {
                              return record.data.sourceName;
                          }
            }, {
                id : 'sourceName',
                header : '<b>Type</b>',
                sortable: true,
                dataIndex : 'type',
                renderer : function(value, p, record)
                          {
                              return record.data.sourceType;
                          }
            }, {
                id : 'sourceData',
                header : '<b>Data</b>',
                sortable: true,
                dataIndex : 'data',
                renderer : function(value, p, record)
                          {
                              return record.data.sourceData;
                          }
            } ]
        }); 

Could you let me know what approach I should follow to get server side sorting. Thanks for your time and help

Sorry friends. I got the issue. the dataindex was not matching with the field values.