Support for Buffered Tree?

[Dumbledore]

My Store looks like that:

Ext.define('Master.store.NavItems', {
    extend  : 'Ext.data.TreeStore',
    model   : 'Master.model.NavItem',

    autoLoad: false,

    root    : {
        expanded: true,
        id      : 'root'
    },

    folderSort  : true,

    sorters : [{
        property    : 'leaf',
        direction   : 'ASC'
    }, {
        property    : 'text',
        direction   : 'ASC'
    }],
	
    buffered        : false,
    pageSize        : null,


    fillNode : function (node, records) {
        [...]
    }
});

Any my tree:

Ext.define('Master.view.masterController.NavTree', {
	extend  : 'Ext.tree.Panel',
    alias   : ['widget.navtree'],

    title	: 'Navigation',

    cls     : 'nav',

    iconCls	: 'silk-package',

    tools	: [{
        type    : 'refresh'
    }],


    /**
      * Init Component
      */
    initComponent : function(){
        var me  = this;


        Ext.apply(this, {
            stateful    : true,
            stateId     : this.id + '-state',
            stateEvents : ['itemcollapse','itemexpand'],
            autoScroll  : true,
            columns : [{
                xtype       : 'treecolumn',
                flex        : 1,
                sortable    : true,
                dataIndex   : 'text'
            },{
                xtype       : 'templatecolumn',
                align       : 'right',
                style       : 'margin-right:2px;',
                hidden      : this.hideCounterColumn,
                tpl         : '<span class="{[(values.count_infos_unreaded > 0) ? " treecounter" : ""]}">' +
                                  '{[(values.count_infos_unreaded > 0) ? values.count_infos_unreaded : ""]}' +
                              '</span>',
                width       : 40
            }],
            dockedItems: [{
                xtype: 'toolbar',
                items: [{
                    xtype       : 'textfield',
                    fieldLabel  : 'Search',
                    labelWidth  : 40
                }]
            }],
            verticalScroller    : {
                xtype               : 'schpagingscroller',
                activePrefetch      : false
            },
            viewConfig : {
                storeConfig : {
                    buffered        : true,
                    pageSize        : me.store.pageSize || 50,

                    // never purge any data, we prefetch all up front
                    purgePageCount  : 0,

                    refreshFromTree : function () {
                        var eventsWereSuspended = this.eventsSuspended;

                        this.suspendEvents();

                        this.removeAll();

                        var root            = me.store.getRootNode(),
                            linearNodes     = [];

                        var cascadeBy       = function (node, func) {
                            func(node);

                            if (node.isExpanded()) {
                                var childNodes  = node.childNodes,
                                    length      = childNodes.length;

                                for (var k = 0; k < length; k++) {
                                    cascadeBy(childNodes[ k ], func);
                                }
                            }
                        };

                        cascadeBy(root, function (node) {
                            if (node != root) {
                                linearNodes.push(node);
                            }
                        });

                        this.cacheRecords(linearNodes);

                        if (!eventsWereSuspended) {
                            this.resumeEvents();
                        }
                    }
                }
            }
        });

        // Calling superclass
        this.callParent(arguments);
    },

    afterRender : function(){
        var me = this;

        // Calling superclass
        this.callParent(arguments);

// for testing here

        var oldRootNode;
        var fillingRoot;
        var normalView = me.getView();
        var nodeStore  = normalView.store;
        var treeStore  = me.store;
        var isBuffered = nodeStore.buffered;


        treeStore.on('root-fill-start', function () {
            fillingRoot = true;

            nodeStore.suspendEvents();

            if (isBuffered) {
                oldRootNode = nodeStore.node;

                // setting the root node of NodeStore to null - so we are now should update the NodeStore manually for all CRUD operations in tree
                // with `refreshFromTree` call
                nodeStore.setNode();
            }
        });

        treeStore.on('root-fill-end', function () {
            fillingRoot = false;

            if (isBuffered) {
                nodeStore.refreshFromTree();
                nodeStore.resumeEvents();

                nodeStore.guaranteeRange(0, (treeStore.pageSize || 50) - 1);

                normalView.refresh();
            } else {
                nodeStore.resumeEvents();

                normalView.refresh();
            }
        });

        if (isBuffered) {
            nodeStore.on('bufferchange', function () {normalView.refresh(); });

            var updateNodeStore = function () {
                if (fillingRoot) return;

                nodeStore.refreshFromTree();

                var rangeStart  = nodeStore.guaranteedStart,
                    rangeEnd    = nodeStore.guaranteedEnd;

                delete nodeStore.guaranteedStart;
                delete nodeStore.guaranteedEnd;

                nodeStore.guaranteeRange(rangeStart, rangeEnd);

            };

            treeStore.on({
                append      : updateNodeStore,
                insert      : updateNodeStore,
                remove      : updateNodeStore,
                move        : updateNodeStore,
                expand      : updateNodeStore,
                collapse    : updateNodeStore,
                sort        : updateNodeStore,

                buffer      : 1
            });
        }

    }

it runs without any errors- but the initial load will rendered and when i reload the tree the view is empty.
I look inside the refreshFromTree function and look into the nodeStore. nodeStore.data is always empty but nodeStore.prefetchData holds the records. What i am missing to implement?

The store data has 9 nodes and one of them have more than 800 childs. I hope your overwrite solves my performance problem if i found my fault...

[Dumbledore]

the initial load runs fine. When i expand a node with 800 childs all childs will be rendered and firebug tolds me an error here:

        // If the Store is *locally* filtered, use the filtered count from getCount.
        height = store[(!store.remoteFilter && store.isFiltered()) ? 'getCount' : 'getTotalCount']() * this.rowHeight;

store[!store.remoteFilter && store.isFiltered() ? "getCount" : "getTotalCount"] is not a function
[Bei diesem Fehler anhalten] height = store[(!store.remoteF...'getTotalCount']() * this.rowHeight; 

the scollbar is missing and all child are rendered? Where is my fault?


[EDIT]

hmm... it seems that this is never fired:

        ds.on('guaranteedrange', this.onGuaranteedRange, this);

[Dumbledore]

this is a example. The Sch.scroller.Paging and the Ext.tree.View.override is not included.

Perhaps you can see whats wrong...

            Ext.onReady(function(){

                function createFakeData(count) {
                    var childs = [];
                    for (var i = 1; i < (count || 25); i++) {
                        childs.push({
                            id      : i,
                            text    : 'Treenode ' + i,
                            children: [],
                            leaf : true
                        });
                    }
                    var parent = [{
                        id      : 0,
                        text    : 'ParentNode 0',
                        children: childs,
                        leaf    : false
                    }];
                    return parent;
                }




                var treeStore = Ext.create('Ext.data.TreeStore', {
                    autoLoad: false,
                    root    : {
                        expanded: true,
                        id      : 'root'
                    },
                    folderSort  : true,
                    sorters : [{
                        property    : 'leaf',
                        direction   : 'ASC'
                    }, {
                        property    : 'text',
                        direction   : 'ASC'
                    }],
                    fields : [
                        {name: 'id',   type: 'string'},
                        {name: 'text', type: 'string'},
                        {name: 'iconCls', type: 'string'},
                        {name: 'qtip', type: 'string'},
                        {name: 'qtitle', type: 'string'},
                        {name: 'children', type: 'string'},
                        {name: 'leaf', type: 'boolean'}
                    ],
                    proxy: {
                        type: 'memory',
                        data : createFakeData(1000)
                    },
                    // much faster implementation of `fillNode` method for buffered case which uses `node.appendChild` with `suppressEvent` option
                    // and bypasses all the events fireing/bubbling machinery, calling the `onNodeAdded` directly
                    fillNode : function (node, records) {

                        if (node.isRoot()) {
                            this.fireEvent('root-fill-start', this, node, records);
                        }

                        var me = this,
                            ln = records ? records.length : 0,
                            i = 0, sortCollection;

                        if (ln && me.sortOnLoad && !me.remoteSort && me.sorters && me.sorters.items) {
                            sortCollection = Ext.create('Ext.util.MixedCollection');
                            sortCollection.addAll(records);
                            sortCollection.sort(me.sorters.items);
                            records = sortCollection.items;
                        }

                        node.set('loaded', true);

                        if (this.buffered) {

                            for (; i < ln; i++) {
                                // suppress the events -------|
                                //                           \/
                                node.appendChild(records[i], true, true);

                                // directly call 'onNodeAdded'
                                this.onNodeAdded(null, records[i]);

                                // register the node in tree (for `getNodeById` to work properly)
                                this.tree.registerNode(records[i]);
                            }
                        } else {
                            for (; i < ln; i++) {
                                node.appendChild(records[i], false, true);
                            }
                        }

                        if (node.isRoot()) {
                            this.fireEvent('root-fill-end', this, node, records);
                        }

                        return records;
                    }
                });



                var me = Ext.create('Ext.tree.Panel', {
                    title: 'Simple Tree',
                    width: 200,
                    height: 300,
                    store: treeStore,
                    rootVisible: false,
                    renderTo: Ext.getBody(),
                    verticalScroller    : {
                        xtype           : 'schpagingscroller',
                        activePrefetch  : false
                    },
                    viewConfig : {
                        storeConfig : {
                            buffered        : true,
                            pageSize        : 50,

                            // never purge any data, we prefetch all up front
                            purgePageCount  : 0,

                            refreshFromTree : function () {
                                var eventsWereSuspended     = this.eventsSuspended;

                                this.suspendEvents();

                                this.removeAll();

                                var root            = me.store.getRootNode(),
                                    linearNodes     = [];

                                var cascadeBy       = function (node, func) {
                                    func(node);

                                    if (node.isExpanded()) {
                                        var childNodes  = node.childNodes,
                                            length      = childNodes.length;

                                        for (var k = 0; k < length; k++) {
                                            cascadeBy(childNodes[ k ], func);
                                        }
                                    }
                                };

                                cascadeBy(root, function (node) {
                                    if (node != root) {
                                        linearNodes.push(node);
                                    }
                                });

                                this.cacheRecords(linearNodes);

                                if (!eventsWereSuspended) {
                                    this.resumeEvents();
                                }
                            }
                        }
                    }
                });





                var oldRootNode;
                var fillingRoot;

                var treeView = me.getView();
                var nodeStore  = treeView.store;
                var treeStore  = me.store;
                var isBuffered = nodeStore.buffered;

                treeStore.on('root-fill-start', function () {
                    fillingRoot = true;

                    nodeStore.suspendEvents();

                    if (isBuffered) {
                        oldRootNode = nodeStore.node;

                        // setting the root node of NodeStore to null - so we are now should update the NodeStore manually for all CRUD operations in tree
                        // with `refreshFromTree` call
                        nodeStore.setNode();
                    }
                });

                treeStore.on('root-fill-end', function () {
                    fillingRoot = false;

                    if (isBuffered) {
                        nodeStore.refreshFromTree();

                        nodeStore.resumeEvents();

                        nodeStore.guaranteeRange(0, (treeStore.pageSize || 50) - 1);

                        treeView.refresh();

                    } else {
                        nodeStore.resumeEvents();

                        treeView.refresh();

                    }
                });

                if (isBuffered) {
                    nodeStore.on('bufferchange', function () { treeView.refresh(); });

                    var updateNodeStore = function () {
                        if (fillingRoot) return;

                        nodeStore.refreshFromTree();

                        var rangeStart  = nodeStore.guaranteedStart,
                            rangeEnd    = nodeStore.guaranteedEnd;

                        delete nodeStore.guaranteedStart;
                        delete nodeStore.guaranteedEnd;

                        nodeStore.guaranteeRange(rangeStart, rangeEnd);
                    };

                    treeStore.on({
                        append      : updateNodeStore,
                        insert      : updateNodeStore,
                        remove      : updateNodeStore,
                        move        : updateNodeStore,
                        expand      : updateNodeStore,
                        collapse    : updateNodeStore,
                        sort        : updateNodeStore,

                        buffer      : 1
                    });
                }

            })

[SamuraiJack1]

@Dumbledore - You need to include the override for Ext.tree.View - otherwise it will ignore the "storeConfig" option. Let me know if that helped

[Dumbledore]

I have included this in my source but not in this example code. Is it working in your tests?

[SamuraiJack1]

It works in our codebase www.bryntum.com/examples/gantt-latest/examples/buffered/buffered.html, but our code is optimized for treegrid with locking feature.

You will need to include this line:

me.verticalScroller.store = nodeStore;

but it still won't work after that - the "nodeStore.guaranteedStart" and "nodeStore.guaranteedEnd" properties are null in "updateNodeStore" function. And because of that grid never finish the loading (node expanding). Leaving the further debugging for you.

[Dumbledore]

ok, so i must found similar event for guaranteedrange, right? I will try...

[Susanta_bmc]

Thanks a lot did few more changes and it solved my issue.

[lager]

Is it possible to get this working with infinite scrolling / paging? Or will you run in to other problems?

[panpur]

Thanks a lot did few more changes and it solved my issue.

Hi, could you please share what changes you made to make it work?

Thanks