[SOLVED] Buffered Store Missing Data from Items Array

[melvig]

Hi Guys,

Hope you can help us out ... we have only just found this issue in final testing :(

Basically we have a buffered store that feeds a grid (snippet below);

autoLoad : false,
buffered: true,
pageSize: 500,

I have attached a screenshot of the store feeding the grid and as you can see it contains 487 records, however the items array only contains 41 elements. This causes an issue when you are trying to update a grid row (say grid index > 41) as it cannot be found in the store.

How does this happen that you can have more rows on the grid than elements in the store ?

This is a major issue for us as we are using grids with right click menus that update the underlying grid store as well as giving feed back to the user on a row by row basis.

We have come across a config viewSize which you can set using method setViewSize but we are not sure what its purpose is and the documentation appears to be thin.

Appreciate any help or guidance you can give us.

Many Thanks

[eweiler]

Can you share some of the relevant code in your app?

[eweiler]

The data property in buffered store may represent a collection of buffered groups instead of records. But I would expect you could still access each record with getAt?

[melvig]

This is a shared app so to keep it simple I have attached the controller and grid source code.

Changed extensions from .js to .txt as the upload window would not accept them.

Thanks Eric

[eweiler]

Where is the action?

[melvig]

Eric, can you explain a little more what you are asking ?

[eweiler]

Where in your code are you trying to access a specific record?

[melvig]

Hi Eric,


I have attached a screenshot of the app that the sahred instruction controller uses.


Basically when the user right clicks a grid row they get the context menu you can see - lets say they choose the 'Hold' option.


InstructionGrid.js


Function buildRightClickMenu builds the context menu you can see in the example screenshot.




InstructionController.js


Function onGridRightClick processes the right click on a grid row and determines which options are enabled / disbaled based on the data atrributes held in the grid row selected.


By selecting the 'Hold' option this would end up running function onClickMenuHold which the instantiates a shared window to request how long to hold (hours/minutes/seconds) the item selected.


On return from the shared windows (which fires event holdwork), function onHoldWork will be fired to process the back end RPG call. We pass the key of the grid row selected along with the rows gridindex so that we can feedback row specific messages to the user. On successful return from the ajax call we run function renderHeldOnGrid to update each row selected with the back end results.


Function renderHeldOnGrid processes each response and using the gridindex from the response (that was originally sent with the back end ajax call) attempts to update the store using the gridindex dependent on whether a positive (reply = '1') or negative (reply <> '1') result for each response. If the reply is '1' we remove the store entry, otherwise we update with the message from the backend showing a warning triangle in the first column (see second screenshot).


If you look at the original post screenshot you can see that I have 487 records (totalCount) but store.data.items only has 41 array items - as soon as we have a gridindex > 41 the app bombs, so the original question is how do I have a grid with 487 grid rows but the store connected to the grid only has 41 elements ???

We used buffer stores out of the back of Sean's visit last March and it is integral to our app development, what I need is guidance as to whether or not we should be using a different tack because the impact seems it could be quite major.


Hope this clarifies.

[eweiler]

Can you try setting either of these below properties to make the store buffer all the records? leadingBufferZone should tell the store how many records to buffer and the purgePageCount can tell the store to not purge pages. From the store.pageMap property, you should be able to access all the records that are buffered on the client side.

http://docs.sencha.com/extjs/4.1.3/#...dingBufferZone

http://docs.sencha.com/extjs/4.1.3/#...purgePageCount

[melvig]

Eric,

Thanks for the pointer, these buffered stores are not well documented.

We have solved our problem by using the pagemap, we created a base store extending the Ext store as below.

Ext.define('WMS.base.Store',{
    extend: 'Ext.data.Store',

    constructor: function(){

        this.callParent(arguments);

    },

    getPageMapAt: function(index){

        var mapIndex = Math.floor(parseInt(index) / parseInt(this.pageSize)) + 1;
        var remainder = parseInt(index) - ((mapIndex - 1) * parseInt(this.pageSize));

        return this.pageMap.map[mapIndex].value[remainder];

    },

    removePageMapAt: function(index){

        this.remove(this.getPageMapAt(index));

    }

});

The two new methods allow us to get / remove the correct record based on the pagesize and index.

Thanks for the help!