Ext.JsonStore accesing custom property returned by the server in json

I have a EXtJS web application that returns data in json format. The results are presented paged in ExtJS Grid and are handled by pagingToolbar. I'm using slidingPager plugin to select the pages. What i need w开发者_StackOverflow中文版hen the user selects the page with the slider is to show additionaly to the page number the title of the first result of that page.

So in the jason data the server returns additionaly to count and records data etc. i'm adding a property called headers that is actualy an array of the titles of the first result of each page.

What i dont know is how i can access and handle this new property so i can grab for e.g the 10th page the 10th item of the header property in the json data.

Thanks in advance Andreas

There is a property of the JsonReader called jsonData, which is the raw JSON returned in the response:

http://dev.sencha.com/deploy/dev/docs/?class=Ext.data.JsonReader

You can access it like yourGridObject.getStore().reader.jsonData

Thanks! it worked. I got the source of Ext.ux.SlidingPager and changed to this

Ext.ux.SlidingPagerWithHeaders = Ext.extend(Object, {

    init : function(pbar){
        var idx = pbar.items.indexOf(pbar.inputItem);
        Ext.each(pbar.items.getRange(idx - 2, idx + 2), function(c){
            c.hide();
        });
        var slider = new Ext.Slider({
            width: 114,
            minValue: 1,
            maxValue: 1,
            plugins: new Ext.slider.Tip({
                getText : function(thumb) {
                    var header = pbar.store.reader.jsonData.headers[thumb.value-1];
                    return String.format('Page <b>{0}</b> of <b>{1}</b><br><br>', thumb.value, thumb.slider.maxValue)+header;
                }
            }),
            listeners: {
                changecomplete: function(s, v){
                    pbar.changePage(v);
                }
            }
        });
        pbar.insert(idx + 1, slider);
        //pb.store.getHeaders = pb.store.createAccessor("headers");
        pbar.on({
            change: function(pb, data){
                slider.setMaxValue(data.pages);
                slider.setValue(data.activePage);
            }
        });
    }
}); 

I'm returning the Json data like this

{ "count": 100,
  "records" : [{record 1 ...},{ record 2 ...}, ...],
  "headers" : ["Header1", "Header2"]
}

Say that pagesize is 50 so i send two headers.