Page 2 of 4 FirstFirst 1234 LastLast
Results 11 to 20 of 32

Thread: Support for Buffered Tree?

  1. #11
    Ext JS Premium Member
    Join Date
    Mar 2007
    Location
    Germany
    Posts
    720
    Vote Rating
    36
      0  

    Default

    My Store looks like that:

    Code:
    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:

    Code:
    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...

  2. #12
    Ext JS Premium Member
    Join Date
    Mar 2007
    Location
    Germany
    Posts
    720
    Vote Rating
    36
      0  

    Default

    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:

    Code:
            // If the Store is *locally* filtered, use the filtered count from getCount.
            height = store[(!store.remoteFilter && store.isFiltered()) ? 'getCount' : 'getTotalCount']() * this.rowHeight;
    PHP Code:
    store[!store.remoteFilter && store.isFiltered() ? "getCount" "getTotalCount"is not a function
    [
    Bei diesem Fehler anhaltenheight 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:

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

  3. #13
    Ext JS Premium Member
    Join Date
    Mar 2007
    Location
    Germany
    Posts
    720
    Vote Rating
    36
      0  

    Default

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

    Perhaps you can see whats wrong...


    Code:
                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
                        });
                    }
    
                })

  4. #14
    Sencha - Community Support Team SamuraiJack1's Avatar
    Join Date
    May 2008
    Posts
    567
    Vote Rating
    5
      0  

    Default

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

  5. #15
    Ext JS Premium Member
    Join Date
    Mar 2007
    Location
    Germany
    Posts
    720
    Vote Rating
    36
      0  

    Default

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

  6. #16
    Sencha - Community Support Team SamuraiJack1's Avatar
    Join Date
    May 2008
    Posts
    567
    Vote Rating
    5
      0  

    Default

    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:

    Code:
    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.

  7. #17
    Ext JS Premium Member
    Join Date
    Mar 2007
    Location
    Germany
    Posts
    720
    Vote Rating
    36
      0  

    Default

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

  8. #18
    Ext JS Premium Member
    Join Date
    Sep 2011
    Posts
    64
    Vote Rating
    0
      0  

    Default

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

  9. #19
    Sencha User
    Join Date
    Feb 2010
    Posts
    22
    Vote Rating
    1
      0  

    Default

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

  10. #20
    Sencha User
    Join Date
    Sep 2011
    Posts
    27
    Vote Rating
    0
      0  

    Default

    Quote Originally Posted by Susanta_bmc View Post
    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

Page 2 of 4 FirstFirst 1234 LastLast

Similar Threads

  1. Need to support Groupping view and Buffered View together Help
    By vasa in forum Ext 3.x: Help & Discussion
    Replies: 29
    Last Post: 26 Sep 2013, 5:53 AM
  2. Radio support to tree probleam
    By VincentChen in forum Ext 2.x: Help & Discussion
    Replies: 12
    Last Post: 12 Jan 2010, 6:37 AM
  3. Does ext support tree nodes paging?
    By deb in forum Ext 1.x: Help & Discussion
    Replies: 0
    Last Post: 2 Aug 2007, 10:52 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •