Results 1 to 9 of 9

Thread: How to load local data from array to store with paging

  1. #1
    Sencha User
    Join Date
    Mar 2010
    Posts
    249
    Answers
    2

    Default How to load local data from array to store with paging

    Code:
    Ext.onReady(function() {
        Ext.define("TestModel", {
            extend: "Ext.data.Model",
            idProperty: "id",
            fields: [
                { name: "id", type: "int" },
                { name: "name", type: "string"  }
            ]
        });
    
        var
            maxRecordsCount = 10000,
            createDataArray = function(max) {
                var
                    data = [];
    
                for(var i=0; i<max; ++i)
                    data.push( [ i, "Record# "+i ] );
    
                return data;
            },
            store = Ext.create("Ext.data.Store", {
                model: "TestModel",
                proxy: {
                    type: "pagingmemory",
                    reader: {
                        type: "array"
                    }
                }
            }),
            grid = Ext.create("Ext.grid.Panel", {
                store: store,
                columns: [
                    { dataIndex: "id", header: "id" },
                    { dataIndex: "name", header: "name" }
                ]
                dockedItems: [{
                    xtype: "pagingtoolbar",
                    dock: "bottom",
                    store: store,
                    displayInfo: true
                }]
            }),
            w = Ext.create("Ext.window.Window", {
                layout: "fit",
                height: 200,
                width: 700,
                items: [grid]
            }),
            data = createDataArray(maxRecordsCount);
    
        store.loadData(data);
    
        w.show();
    });
    Paging doesn't work properly

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409
    Answers
    716

    Default

    You do not have pageSize set in your store.

    Scott.

  3. #3
    Sencha User
    Join Date
    Mar 2010
    Posts
    249
    Answers
    2

    Default

    Code:
    Ext.onReady(function() {
        Ext.define("TestModel", {
            extend: "Ext.data.Model",
            idProperty: "id",
            fields: [
                { name: "id", type: "int" },
                { name: "name", type: "string"  }
            ]
        });
    
        var
            maxRecordsCount = 10000,
            createDataArray = function(max) {
                var
                    data = [];
    
                for(var i=0; i<max; ++i)
                    data.push( [ i, "Record# "+i ] );
    
                return data;
            },
            store = Ext.create("Ext.data.Store", {
                model: "TestModel",
                pageSize: 10,
                proxy: {
                    type: "pagingmemory",
                    reader: {
                        type: "array"
                    }
                }
            }),
            grid = Ext.create("Ext.grid.Panel", {
                store: store,
                columns: [
                    { dataIndex: "id", header: "id" },
                    { dataIndex: "name", header: "name" }
                ],
                dockedItems: [{
                    xtype: "pagingtoolbar",
                    dock: "bottom",
                    store: store,
                    pageSize: 10,
                    displayInfo: true
                }]
            }),
            w = Ext.create("Ext.window.Window", {
                layout: "fit",
                height: 200,
                width: 700,
                items: [grid]
            }),
            data = createDataArray(maxRecordsCount);
    
        store.loadData(data);
    
        w.show();
    });
    doesn't work...

  4. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409
    Answers
    716

    Default

    See if this works ..

    Code:
    Ext.Loader.setConfig({
      enabled: true
    });
    
    Ext.Loader.setPath('Ext.ux', '../../extjs4/examples/ux');
    Ext.require('Ext.ux.data.PagingMemoryProxy');
    
    Ext.onReady(function() {
    
        var store = Ext.create('Ext.data.ArrayStore', {
            autoSync: true,
            fields:['name', 'email', 'change'],
            data:[
                { name : 'Lisa',  email : '[email protected]',  change :100  },
                { name : 'Bart',  email : '[email protected]',  change :-20  },
                { name : 'Homer', email : '[email protected]',  change :23   },
                { name : 'Marge', email : '[email protected]', change :-11  }
            ],
            proxy: {
                type: 'pagingmemory'
            },
            pageSize: 2
    
        });
    
        Ext.create('Ext.grid.Panel', {
            title: 'Simpsons',
            store: store,
            columns: [
                { header: 'Name',  dataIndex: 'name' },
                { header: 'Email', dataIndex: 'email', flex: 1 },
                { header: 'Change', dataIndex: 'change' }
            ],
            dockedItems: [{
              xtype: 'pagingtoolbar',
              store: store,
              dock: 'bottom',
              displayInfo: true
            }],
            height: 200,
            width: 400,
            renderTo: Ext.getBody()
        });
    
    });
    Scott.

  5. #5
    Sencha User mberrie's Avatar
    Join Date
    Feb 2011
    Location
    Bangkok, Thailand
    Posts
    506
    Answers
    26

    Default

    Quote Originally Posted by Ex_Soft View Post
    Paging doesn't work properly
    Quote Originally Posted by Ex_Soft View Post
    doesn't work...
    Do you mind investing maybe 2 minutes of your precious time to provide more details about what exactly does not work?

    Does the page load?
    Is the behavior not what you expect?
    Is there a JavaScript error message?

  6. #6
    Sencha User
    Join Date
    Mar 2010
    Posts
    249
    Answers
    2

    Default

    Quote Originally Posted by scottmartin View Post
    See if this works ..
    Code:
    ...
        var store = Ext.create('Ext.data.ArrayStore', {
    ...
            data:[
                { name : 'Lisa',  email : '[email protected]',  change :100  },
                { name : 'Bart',  email : '[email protected]',  change :-20  },
                { name : 'Homer', email : '[email protected]',  change :23   },
                { name : 'Marge', email : '[email protected]', change :-11  }
            ],
    ...
        });
    ...
    Yes. This works. But in this case we have a static definition of data in definition of a store. I need to load data after a store has been defined. I may use
    Code:
    store.getProxy().data = data;
    store.load();
    But I don't sure that this is right way.

    Quote Originally Posted by mberrie View Post
    Does the page load?
    Data is loaded in the first page. store.data.length = 10000. store.totalCount isn't defined.

    Quote Originally Posted by mberrie View Post
    Is the behavior not what you expect?
    I want to load in a store only the first page. I understand that I should to pass start, limit and totalCount to a function. But I don't know how to do this.

    Quote Originally Posted by mberrie View Post
    Is there a JavaScript error message?
    There aren't any JS messages or errors.

  7. #7
    Sencha User mberrie's Avatar
    Join Date
    Feb 2011
    Location
    Bangkok, Thailand
    Posts
    506
    Answers
    26

    Default

    Quote Originally Posted by Ex_Soft View Post
    Yes. This works. But in this case we have a static definition of data in definition of a store. I need to load data after a store has been defined. I may use
    Code:
    store.getProxy().data = data;
    store.load();
    But I don't sure that this is right way.
    Looks good to me!
    You could also load a specific page using store.loadPage() instead of load() but both methods basically do the same thing.

    You might be tempted to call Store#loadData or Store#loadRawData, however, these methods load data directly into the store bypassing the paging support and hence won't serve you well.

    What we want in this specific situation is the Store to trigger a load operation for a specific page (with page, start, limit configured) and let the 'pagingmemory' proxy provide the corresponding subset of data.

  8. #8
    Sencha User
    Join Date
    Mar 2012
    Posts
    18

    Default

    If I insert a record to the grid, how will this local paging gets updated. Please help me

  9. #9
    Sencha User
    Join Date
    Feb 2017
    Posts
    2

    Default

    Amazing another dead-end thread on the sencha forums..

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •