CODEWITHSUNDEEP
javascriptextjsextjs4
Gihan Lasita
Gihan Lasita

Reputation: 3053

How to add paging to extjs 4 grid?

I have a store like this which i used for a extjs grid

Ext.create('Ext.data.Store', {
    autoLoad : true,
    fields   : [
        {name: 'item_code', mapping: 'item_code', type: 'string'},
        {name: 'quantity', mapping: 'quantity', type: 'string'},
        {name: 'description', mapping: 'description', type: 'string'},
        {name: 'selling_price', mapping: 'selling_price', type: 'string'},
        {name: 'discount', mapping: 'discount', type: 'string'}
    ],
    storeId  : 'available_products',
    proxy    : {
        type            : 'ajax',
        actionMethods   : 'POST',
        url             : 'http://192.168.1.6/transactions/distribution_store',
        reader: {
            type: 'json',
            root: 'data'
        }
    }
});

I want to add a paging to grid but i want it like this

first load all the data with json and paging those results at client side without sending server requests.

is it possible? how to do this?

Regards

Upvotes: 3

Views: 4597

Answers (1)

Molecular Man
Molecular Man

Reputation: 22386

For loading all data use

var myData = [];
Ext.Ajax.request({
    url: 'http://192.168.1.6/transactions/distribution_store',
    method: 'POST',
    success: function(response){
        myData = Ext.decode(response.responseText);
    }
});

When all data is loaded you can utilize directFn config for emulating paging functionality. Check out my answer here for more info. And check out this demo too.

UPDATE

the solution doesn't work for ext js 4.1.1 . Can u provide an example for this version?

Doesn't work for ExtJS 4.2 either.

directFn solution always seemed like a hack to me. Since 4.0.7 there is no need to use directFn. Instead use Ext.ux.data.PagingMemoryProxy. The demo is here

Upvotes: 4

Related Questions