[SOLVED] ExtJS store display issue with grid

ExtJS store display issue with grid

I have an issue where I am trying to display the entire contents of a store in a scrollable grid on a single page, but regardless of what I do, I only get 25 records in the store returned when I load it to the grid.

Here is my store:

Ext.define('cardioCatalogQT.store.Results', {
    extend: 'Ext.data.Store',
    alias: 'store.Results',

    config:{
        idProperty: 'id',
        fields: [
            {name: 'attribue', type: 'string'},
            {name: 'sid', type: 'string'},
            {name: 'value', type: 'string'},
            {name: 'n', type: 'string'}
        ],

        storeId: 'Results',
        autoLoad: true,

        proxy: {
            type: 'localstorage',
            id: 'results'
        }
    }
});

and here is my container with the grid component:

Ext.define('cardioCatalogQT.view.grid.Results', {
    extend: 'Ext.container.Container',

    alias: 'widget.resultsGrid',
    itemId: 'test',
    title: 'Test',
    requires: [
        'cardioCatalogQT.view.main.MainController',
        'Ext.ux.exporter.Exporter'
    ],
    items: [{
        xtype: 'exporterbutton',
        component: '#gridTest',
        region: 'north'
    },{
        xtype: 'tbspacer',
        height: 10
    }, {
        xtype: 'gridpanel',
        store: 'Results',
        itemId:'gridTest',
        autoScroll:true,
        autoHeight: true,
        maxHeight: 250,
        columns: [{
            text: 'sid',
            dataIndex: 'sid'
        }]
    }]
});

I the load the data from the store into the grid panel AFTER I get a successful Ajax response from the server using the command:

 button.up().up().up().down('#gridTest').getStore().load();

This refreshes the store and loads the data into the grid, but it is only grabbing the top 25 records from the store, as per output from this command shows:

[Log] Object (MainController.js, line 124)
autoFilter: true
autoLoad: true
autoSort: true
blockLoadCounter: 0
byInternalId: Object
complete: true
config: Object
data: Object[25]
_extraKeys: Object
_filters: Object[0]
_rootProperty: "data"
_sortFn: null
_sorters: Object[0]
byInternalId: Object
config: Object
events: Object
generation: 5
hasListeners: Object
indexRebuilds: 1
indices: Object
initConfig: function () {}
initialConfig: Object
items: Array[25]
0: Object
1: Object
2: Object
3: Object
4: Object
5: Object
6: Object
7: Object
8: Object
9: Object
10: Object
11: Object
12: Object
13: Object
14: Object
15: Object
16: Object
17: Object
18: Object
19: Object
20: Object
21: Object
22: Object
23: Object
24: Object
length: 25
__proto__: Array[0]
length: 25
managedListeners: Array[2]
map: Object
observerMap: Object
observers: Array[2]
updating: 0
__proto__: Object
events: Object
filters: Object[0]
getId: function () {
getUniqueId: function () {
hasListeners: Object
id: "cardiocatalogqt-store-results-1"
ignoreCollectionAdd: false
ignoreCollectionRemove: false
implicitModel: true
initConfig: function () {}
initialConfig: Object
isFirstInstance: true
isInitializing: false
lastOptions: Object
loadCount: 3
loadTask: null
loading: false
loadsWhileBlocked: 0
managedListeners: Array[4]
model: function constructor() {
proxy: Object
remoteFilter: false
remoteSort: false
removed: Array[0]
sorters: Object[0]
totalCount: 25
trackRemoved: true
trackStateChanges: true
updating: 0
__proto__: Object

However, if I print out the contents of the store itself, there are 72-records.

I assume this is some kind of paging issue, but everything I have found refers to use of ajax/rest proxies. I tried adding

pageParam: undefined

to the store's proxy, but that did nothing to help. Note: I do NOT want to use a paging toolbar, I just want to print the entire record set on a single, scrollable page so that I can export it to CSV.

Solution