Ext.ux.data.PagingStore [v0.5]

[genio]

ooh yes, found it!

I guess the limitation can make it confusing for the user... I will investigate how it looks.

Now, on the paging front, is it actually possible to make the page size configurable for the user? I guess that would be more of a paging Tool bar issue, but I have not found any references on this in the forum...

[saadkhan]

Hello Condor,
I downloaded you extension of paging for local data but unfortunately it did not work for me.
I am doing things like this, please do correct me...

My store:

var megaStore = new Ext.data.ArrayStore({
    fields:
    [
        'VehicleId',
        'VehicleNumber',
        'CustomerName',
        'DeviceType',
        'CustomerId',
        'CustomerFatherName',
        'CustomerMotherMaidenName',
        'CustomerCNIC',
        'CustomerAddress',
        'CustomerOfficeAddress',
        'CustomerWebtrackUsername'
    ],
    lastOptions: {params: {start: 0, limit: 5}},
    remoteSort:true
});

Filling data in store:

//  A .NET extension which calls server-side method and returns with data
Autotrack.Remote.getAllInformation({
        success: function(basicFrom, action)
        {
            // action.result.data has the returned data
            Ext.iterate(action.result.data, function(prop, value)
            {
                newDataRow = {
                              VehicleId: prop,
                              VehicleNumber: value['VehicleNumber'],
                              CustomerName: value['CustomerName'],                              
                              DeviceType: value['DeviceType'],
                              DeviceId: value['DeviceId'],
                              CustomerId: value['CustomerId'],
                              CustomerFatherName: value['CustomerFatherName'],
                              CustomerCNIC: value['CustomerCNIC'],
                              CustomerMotherMaidenName: value['CustomerMotherMaidenName'],
                              CustomerAddress: value['CustomerAddress'],
                              CustomerOfficeAddress: value['CustomerOfficeAddress'],
                              CustomerWebtrackUsername: value['CustomerWebtrackUsername']
                            };
                newRecord = new megaStore.recordType(newDataRow);
                megaStore.add(newRecord);                
            });
        }
    });

My grid:

var manageCustomerWindowGrid = new Ext.grid.GridPanel({
            store: megaStore,
            hideHeaders: true,
            layoutConfig:
            {
                autoExpandColumn: 'customerName', autoExpandMin: 550, autoHeight: true
            },
            autoExpandColumn: 'customerName', autoExpandMin: 550, autoHeight: true,
            cm: new Ext.grid.ColumnModel({                
                columns: 
                [
                    { id:'customerName', header: "CustomerName", dataIndex: 'CustomerName', renderer: function(value,p,r){ return String.format("<b>{0}</b><br />{1} {2} {3}<br />", value, r.data['VehicleNumber'], r.data['DeviceType'], r.data['VehicleName']); }}
                ]
            }),            
            trackMouseOver: false,
            bbar: new Ext.PagingToolbar({
                pageSize: 5,
                store: megaStore,
                displayInfo: true,
                displayMsg: 'Displaying Customers {0} - {1} Of {2}',
                emptyMsg: "No Customers To Display"
            })
        });

Still my grid shows all the data at once and no paging thing works. Please guide me what should I do now. I am stuck in it!

[Condor]

Ext.data.ArrayStore -> Ext.ux.data.PagingArrayStore

[saadkhan]

Ext.data.ArrayStore -> Ext.ux.data.PagingArrayStore

Didnt work!
I replaced Ext.data.ArrayStore with Ext.ux.data.PagingArrayStore...is that all I needed to do?

[Condor]

remoteSort:true? You are using local data!

Also, you are not loading the store. Instead, you are adding the records one by one. If you do that you need to call applyPaging() after you are done.

ps. I woujld recommend loading the store, because it's faster.

[george4rotech]

Trying to use your plugin, below are the "before"/"after" versions of my store. When I convert to using your PagingArrayStore, I get the error "recordType is undefined" from line 23540 of ext-3.2.1/ext-all-debug.js.

Could it be because the "RecordType" parameter being pass to "new Ext.data.ArrayReader" is not "a Record constructor created from Ext.data.Record.create." but rather the other permissible parameter, "an Array of Field definition objects"?

Or maybe could it be because I initially define the data as []? I do this to begin with as the grid will be empty, but depending on an event, then the data gets populated through a call to loadData

By the way, the before code for the store is largely based on what was generated by Ext Designer, all I added are the mappings. Thanks in advance.

Before:

        this.store = new Ext.data.Store({
            autoDestroy : true,
            reader : new Ext.data.ArrayReader({}, [{
                name : 'locId', mapping: 'locId'
                }, {
                name : 'locName', mapping: 'locName'
                }, {
                name : 'locCity', mapping: 'locCity'
                }, {
                name : 'locState', mapping: 'locState'
                }, {
                name : 'hasAccess', mapping: 'hasAccess'
            }]),
            data : []
        });

After:

        this.store = new Ext.ux.data.PagingArrayStore({
            autoDestroy : true,
            reader : new Ext.data.ArrayReader({}, [{
                name : 'locId', mapping: 'locId'
                }, {
                name : 'locName', mapping: 'locName'
                }, {
                name : 'locCity', mapping: 'locCity'
                }, {
                name : 'locState', mapping: 'locState'
                }, {
                name : 'hasAccess', mapping: 'hasAccess'
            }]),
            data : [],
            lastOptions: {params: {start: 0, limit: 25}}
        });

[Condor]

You can't specify a reader in a PagingArrayStore (or an ArrayStore for that matter).
For that you need a normal PagingStore.

[george4rotech]

Switching to your PagingStore did the trick, thanks. What's particularly impressive is that it all works along with our own extension to PagingToolbar.

[Boing]

Hello,
I was able to get the paging to load the data I got from a remote function that returns a proper json object,
In this case it's "data:FnQueryQCTracker()" that queries an access database (yeah I know lame). Yay, Woohoo, kudos to your add-on, it's great!
However, I have not been able to get the function to run again when you click on the refresh button.

I've searched for hours for anything that would help, but I could not find anything.

I tried adding the override mentioned in the first message, however, it didn't work.
Where exactly do you place the override functions/statements?
Or is something else wrong?

Here is my code, if you happen to find anything wrong with it.

var store = new Ext.ux.data.PagingArrayStore({
     fields: [
          {name:"submissionNumber"},
          {name: "submitDate",
               type: 'date',
               dateFormat: 'D m/d/Y H:i:s'
          },
          {name: 'submitProc'},
          {name: 'submitName'},
          {name: 'locationOne'},
          {name: 'locationTwo'},
          {name: 'qcStatus'},
          {name: 'qcMember',type:'string'},
          {name: 'completeDate',
               type: 'date',
               dateFormat: 'D m/d/Y H:i:s'
           },
           {name:'qcComments'},
           {name: 'emailHTML'}
     ],
     data: FnQueryQCTracker(),
     lastOptions: {params: {start: 0, limit: 25}}
}); 

var ObjGrid = new Ext.grid.GridPanel({
     autoExpandColumn: "submitName",
     autoScroll: true,
     clicksToEdit: 1,
     columnLines: false,
     cm: ObjColModel,
     enableColumnMove: false,
     enableHdMenu: false,
     header: false,
     height: 700,
     hideBorders: false,
     id: 'qc-t-grid',
     //layout: 'fit',
     plugins: [editor],
     region: 'west',
     sm:new Ext.grid.RowSelectionModel({
          singleSelect:true,
          listeners: {
               selectionchange: function(sel){
                    var rec = sel.getSelected();
                    if(rec){
                         Ext.getCmp('qcPreview').body.update(rec.get('emailHTML'));
                    }
               }
          }
     }),
     split: 'true',
     stateful: true,
     stateId: 'grid',
     store: store,
     stripeRows: true,
     title: 'QC Tracker',
     viewConfig: {
          forceFit:true
     },
     width: 600,
     // paging bar on the bottom
     bbar: new Ext.PagingToolbar({
          pageSize: 25,
          store: store,
          displayInfo: true,
          displayMsg: 'Displaying topics {0} - {1} of {2}',
          emptyMsg: "No topics to display"
     })
}); 

Just as a side note, would this work ok with a task mgr to auto update the store?

Thank you very much for your time and help. Sorry to bother.

[Condor]

Did you use the override mentioned in the first post?

Ext.override(Ext.PagingToolbar, {
    refresh: function(){
        delete this.store.lastParams;
        this.doLoad(this.cursor);
    }
});

If the number of records you are loading is substantial (>100) and the number of modified records is relatively low (<10%) I would recommend doing a separate Ajax request to only get the changed records and update the records currently in the store.