1. #11
    Ext JS Premium Member
    Join Date
    Mar 2007
    Location
    Germany
    Posts
    673
    Vote Rating
    10
    Dumbledore will become famous soon enough

      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
    673
    Vote Rating
    10
    Dumbledore will become famous soon enough

      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
    673
    Vote Rating
    10
    Dumbledore will become famous soon enough

      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
    554
    Vote Rating
    3
    SamuraiJack1 will become famous soon enough

      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
    673
    Vote Rating
    10
    Dumbledore will become famous soon enough

      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
    554
    Vote Rating
    3
    SamuraiJack1 will become famous soon enough

      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
    673
    Vote Rating
    10
    Dumbledore will become famous soon enough

      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
    Susanta_bmc is on a distinguished road

      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
    lager is on a distinguished road

      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
    panpur is on a distinguished road

      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

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

Thread Participants: 12