1. #1
    Sencha Premium Member
    Join Date
    Oct 2013
    Posts
    4
    Vote Rating
    2
    mphillips is on a distinguished road

      0  

    Default Grid with buffered store, NotFoundError DOMException

    Grid with buffered store, NotFoundError DOMException


    I started out asking for help with this issue over in the Bryntum forums, after running into this problem getting their ext grid based scheduling control working with a buffered data store. They suggested I try to reproduce my problem with just the ext grid, and I was able to... so this now seems the appropriate place to continue my search.

    In short, I have a REST endpoint feeding a buffered datastore, that is hooked up to an ext grid. From what I am told, this should automatically pull data from my rest service as the grid is scrolled. My rest service supports the page, start, and limit parameters that are being passed to it, to support paging/buffering.

    Using Chrome, the grid does not finish initially loading and I receive a dom exception stating: "An attempt was made to reference a Node in a context where it does not exist.", and the "Loading..." indicator never goes away (though there is data rendered behind it). If I turn off buffering of the store, everything works fine. The exception is being thrown in the scroll function of Ext.view.NodeCache, on this line:
    Code:
    frag.appendChild(newNodes[i]);
    Using IE 10, I do not receive the dom exception; however, the grid does not attempt to load pages of data as it is scrolled. Again, with buffering turned off for the store, all data is loaded and displayed correctly.

    I am new to Ext JS so I think it must be that I'm doing something wrong. Here is my sandbox example, hopefully somebody can point me in the right direction.

    Here is the code I have to instantiate the store, configure/instantiate the grid, then render the grid:
    Code:
    Ext.Loader.setConfig({
        enabled: true,
        disableCaching: false
    });
    Ext.Loader.setPath('schedules', 'js');
    Ext.onReady(function () {
        Ext.QuickTips.init();
        var resourceStore = Ext.create("schedules.store.equipment");
        resourceStore.on("beforeLoad", function (store, operation, eOpts) {
            operation.addRecords = true;
            store.proxy.extraParams = {
                scheduleID: "c111a61a-f5e1-4652-9052-a25300c98b11" //scheduleViewModel.scheduleID,
            };
        });
        var grid = Ext.create("Ext.grid.Panel", {
            title: undefined,
            frame: false,
            store: resourceStore,
            rowHeight: 32,
            columns: [{
                header: "Resource",
                xtype: "templatecolumn",
                tpl: "[{ResourceID}] {Name}",
                width: 200,
                sortable: true,
                field: new Ext.form.TextField()
            }],
            viewConfig: {
                trackOver: false
            },
            tbar: []
        });
        new Ext.Viewport({
            items: {
                layout: 'fit',
                region: 'center',
                border: false,
                split: false,
                margins: '164 0 0 0',
                items: grid
            },
            layout: 'border',
            renderTo: Ext.get("GridView")
        });
    });
    Here is my store definition:
    Code:
    Ext.define('schedules.store.equipment', {
        extend: "Ext.data.Store",
        model: 'schedules.model.equipment',
        sorters: 'Description',
        autoSync: false,
        buffered: true,
        leadingBufferZone: 75,
        pageSize: 50,
        autoLoad: true,
        batch: false
    });
    Here is my model definition:
    Code:
    Ext.define('schedules.model.equipment', {
        extend: 'Ext.data.Model',
        fields: [{
            name: "ResourceID",
            type: "string"
        }, {
            name: "Name",
            type: "string"
        }],
        proxy: {
            type: "rest",
            url: "../api/odata/ScheduleViewCalendarResources"
        }
    });
    I apologize for the formatting of my code, the post editor here is removing my newlines for some reason.

    EDIT: I have already seen and worked with the example here: http://dev.sencha.com/deploy/ext-4.0...ffer-grid.html and so far have not been able to find the reason why that works and my scenario doesn't.
    Last edited by Gary Schlosberg; 12 Oct 2013 at 4:16 AM. Reason: formatted code

  2. #2
    Sencha - Support Team
    Join Date
    Feb 2013
    Location
    California
    Posts
    3,845
    Vote Rating
    68
    Gary Schlosberg is a jewel in the rough Gary Schlosberg is a jewel in the rough Gary Schlosberg is a jewel in the rough

      0  

    Default


    I ran your code pieces through http://jsbeautifier.org/ which handles any newline issues as well. As far as that example, are you running Ext 4.0.0 also? If not, what version are you running? To clarify, the only thing you are changing is the 'buffered' config on your store?
    Get on the Fast Track with Sencha Training http://sencha.com/training

  3. #3
    Sencha Premium Member
    Join Date
    Oct 2013
    Posts
    4
    Vote Rating
    2
    mphillips is on a distinguished road

      0  

    Default


    Thanks for that edit Gary, it is much appreciated!

    I am running Ext JS 4.2.1.883, and in this example here the only thing I'm changing is the "buffered" config option on the store. I have also experimented with some other options on the grid itself, there was a buffered vertical scrolling configuration option that didn't seem to make any difference, as well as a plugin that seemed to be related to buffering, and that didn't help either.

    At this point I'm completely unclear on how this functionality is supposed to be implemented so that makes it quite difficult to know what I'm doing wrong. What I have been told by the Bryntum guys (only set the buffered option on the store) doesn't seem to jive with any of the examples I find elsewhere (where I typically see buffered vertical scrolling configurations and/or buffering plugins).

    -Max

  4. #4
    Sencha Premium Member
    Join Date
    Oct 2013
    Posts
    4
    Vote Rating
    2
    mphillips is on a distinguished road

      0  

    Default


    Wait a minute, I just came across this: http://www.sencha.com/blog/first-look-at-ext-js-4-2-grid

    T
    hat states that
    Ext JS 4.2 solves this issue by introducing the Ext.grid.plugin.BufferedRenderer plugin. This plugin allows the store to remain ignorant of its display — the Grid component is now solely responsible for buffering the display of its associated data.
    So on one hand, the Bryntum guys are telling me that using a buffered store is all that's required but on the other hand I see the above, stating that the Grid is solely responsible for buffering. To further add to my confusion, the infinite scrolling example that applies specifically to 4.2 (which I had not come across, until today) here: http://docs.sencha.com/extjs/4.2.2/e...te-scroll.html does not seem to actually configure the grid for buffered rendering at all. Finally, I am unclear on whether this 4.2.2 example also applies to 4.2.1.882 that I am currently using.

    My employer finally purchased support this past weekend - prior to that I did not have access to 4.2.2. From the sound of things, it would be in my best interest to start using 4.2.2... but my confusion about how this is "supposed" to work, still remains.

  5. #5
    Sencha Premium Member
    Join Date
    Oct 2013
    Posts
    4
    Vote Rating
    2
    mphillips is on a distinguished road

      2  

    Default


    Ok I have finally figured it out. Updating to 4.2.2 did take care of my DOM exception... but I still could not get the buffered behavior to function. Only the first page was being loaded.

    The core of my problem was that my rest service was not sending back anything to indicate the "total". I happened to notice the "totalProperty" being configured in one of the examples and that caused me to start looking in the documentation at what it is used for. With my service modified to send the correct total count, everything is working nicely. I re-tested my scenario with 4.2.1, and it also functioned correctly with this change in place (no DOM exception, and correct paging/buffering behavior).

    Also, for the record, it appears that the bufferedrenderer plugin is not needed at all for this behavior. So the advice I was given by the Bryntum guys that no configuration is needed on the UI control, only the store, does seem to be quite correct.

    Hopefully this will help someone else out there who is new to this.

  6. #6
    Sencha User filippo.ferrari's Avatar
    Join Date
    Apr 2010
    Location
    Sanremo - Italy
    Posts
    126
    Vote Rating
    1
    filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute

      0  

    Default


    Same problem. now solved, for me. I haven't find in documentation and examples any about server correct response for buffered store or infinite grid.