1. #1
    Sencha User
    Join Date
    Jul 2013
    Posts
    9
    Answers
    1
    Vote Rating
    0
    ksonger is on a distinguished road

      0  

    Default Answered: TreePanel errors - 'RangeError:Maximum call stack size exceeded'

    Answered: TreePanel errors - 'RangeError:Maximum call stack size exceeded'


    Hi,

    I'm working with treepanel component backed with a treestore, and I'm running into an endless loop when I expand several directories into the tree's structure, looping these method calls in the browser console until it finally throws the RangeError:

    Code:
    Ext.define.onLastFocusChanged
    Ext.define.setLastFocused
    Ext.define.focusRow
    Ext.define.onRowFocus
    The result is that nothing below the selected node works, and the selected node index above it is off by anywhere between 1 and 10 rows. In other words, selecting an item further up the tree selects something 1-10 item further down the tree. In less common occurances, the range call never happens but the breakage is the same. The scrolling in the treepanel hops downward in a very awkward way when the tree breaks as well, if that's helpful to mention. I've seen a scrollbar jump and cause issues in a grid, but not a treepanel. The service call sometimes fires, but not always. Perhaps due to the incorrect selection being a leaf node, I'm guessing.

    My store looks like this:

    Code:
    Ext.define('MyApp.itemView.store.ParentItemsStore', {
        extend: 'Ext.data.TreeStore',
    
    
        requires: [
            'MyApp.proxy.Cors',
            'MyApp.itemView.model.ParentItemsTreeModel'
        ],
    
    
        storeId: 'parentItemsTreeStore',
    
    
        model: 'MyApp.itemView.model.ParentItemsTreeModel',
    
    
        autoLoad: false,
    
    
        rootId: null,
    
    
        constructor: function () {
    
    
            this.callParent(arguments);
    
    
            var ReaderClass = Ext.extend(Ext.data.JsonReader, {
                type:'json',
                root: 'results',
    
    
                readRecords: function(data) {
                    var i = 0, records = data.results, l = records.length;
                    for (i; i < l; i++){
                        records[i].leaf = !records[i].hasChildren;
                    }
                    return this.callParent([data]);
                }
    
    
            }),
                me = this;
    
    
            this.setProxy({
                type: 'myapp-cors',
                url: SavannaConfig.itemViewPerspective + me.rootId,
                noCache: false,
                startParam: undefined,
                limitParam: undefined,
                pageParam: undefined,
                reader: new ReaderClass(),
                writer: {
                    type: 'json'
                }
            });
        }
    });
    The treepanel component looks like this:

    Code:
    Ext.define('MyApp.itemView.view.createItem.ParentItemsTreePanel', {
        extend: 'Ext.tree.Panel',
    
    
        requires: [
            'Ext.tree.*',
            'Ext.data.*',
            'MyApp.itemView.store.ParentItemsStore',
            'MyApp.itemView.model.ParentItemsTreeModel'
        ],
    
    
        alias: 'widget.itemview_treepanel',
    
    
        useArrows: true,
        titleCollapse: true,
        rootVisible: false,
        width: '100%',
        height: '100%',
        frame: true,
        displayField: 'label',
    
    
        config: {
            rootId: null
        },
    
    
        listeners: {
    
    
            beforeitemclick: function (view, record, item, index, e, eOpts) {
    
                // creates a URL something like 'http://server/rest/services/items/123456
                // which is the call to return the child items for the selected node to expand
    
    
                this.store.getProxy().url = AppConfig.itemViewPerspective + record.data.id;
            }
        },
    
    
        initComponent: function () {
            var me = this;
    
    
            Ext.apply(this, {
                store: new MyApp.itemView.store.ParentItemsStore({
                    rootId: me.rootId
                })
            });
            this.callParent();
        }
    });
    Nothing odd in the model - it's just a flat set of 7 fields. Any clues about what's going wrong would be greatly appreciated.

  2. I've finally figured it out! It's a problem with duplicate record ID's in the treestore, which is coming back from our rest service. Scott - thanks for the responses, really appreciate it.

  3. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,882
    Answers
    653
    Vote Rating
    439
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    RangeError:Maximum call stack size exceeded
    Usually means you are in a dead loop .. you have recursive calls

  4. #3
    Sencha User
    Join Date
    Jul 2013
    Posts
    9
    Answers
    1
    Vote Rating
    0
    ksonger is on a distinguished road

      0  

    Default


    Absolutely... but it appears to be coming from something internal to the component, unless I'm missing something somehow... I don't see anything in the treepanel or the treestore that might cause it, and I don't see anything odd in network traffic. The recursive loop is:

    Code:
    Ext.define.onLastFocusChanged
    Ext.define.setLastFocused
    Ext.define.focusRow
    Ext.define.onRowFocus
    ...referenced on ext-all.js, line 18.

  5. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,882
    Answers
    653
    Vote Rating
    439
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    If you change your data to just 1 level, do you still get this?

  6. #5
    Sencha User
    Join Date
    Jul 2013
    Posts
    9
    Answers
    1
    Vote Rating
    0
    ksonger is on a distinguished road

      0  

    Default


    Hi Scott,

    Sorry for the delayed reply. I can expand all top seven directories without any issue, however in expanding the first set of children underneath the top level directories the problem does occur.

    Adding more info to the issue, the problem only appears for the 6th and 7th directories. I have looked at the dom and I don't see anything obviously strange - a series of table row elements, each with:

    - and ID based on the parent treepanel ID and a unique record ID
    - a data-boundview value of the parent treepanel ID
    - a data-recordid which seems to be unique, no dupes
    - a data-recordindex, correctly incremented numbers
    - class attributes, nothing special
    - a tabindex value of -1

    It is not uncommon that the child items of the selected directory are erroneously added to the children of a different node - again, I am sure because the selected index seems to break somehow.

  7. #6
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,882
    Answers
    653
    Vote Rating
    439
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Looks like it is time for a working example:
    https://fiddle.sencha.com/#home

  8. #7
    Sencha User
    Join Date
    Jul 2013
    Posts
    9
    Answers
    1
    Vote Rating
    0
    ksonger is on a distinguished road

      0  

    Default


    Hey Scott,

    I wish I could do just that, but sadly the service sits behind a login and requires a jsessionid... and, the bizarre behavior never seems to occur with static data, regardless of how many nodes or how deeply nested they are. But you know... the data is pretty basic and it looks fine to me - this is an example:

    Code:
    {
      "size" : 2,
      "results" : [ {
        "label" : "serpentine asbestos",
        "id" : 208433,
        "uri" : "lib%2Eobo%3ACHEBI_46680%2FModelItemXML",
        "hasChildren" : true,
        "description" : null
      }, {
        "label" : "amphibole asbestos",
        "id" : 529697,
        "uri" : "lib%2Eobo%3ACHEBI_46677%2FModelItemXML",
        "hasChildren" : true,
        "description" : null
      } ],
      "time" : 106
    }
    If it isn't anything obvious, or a known issue with the component that other Ext-JS users have reported running into, I may just have to turn to a different approach... maybe horizontally arranged panels.

  9. #8
    Sencha User
    Join Date
    Jul 2013
    Posts
    9
    Answers
    1
    Vote Rating
    0
    ksonger is on a distinguished road

      0  

    Default


    Okay - I've started looking through the source code, and I'm hopeful that my findings are useful to solving the problem. I've bolded method and variable names. I'm working with ext-all-dev.js, and here's what seems to go wrong:

    1) on any mouse event (mouseover is where I begin to see trouble), the method indexInStore on line 147947 is called twice, first by processUIEvent on line 135216 and again by processItemEvent on line 148728.

    2) When the tree is still working correctly, indexInStore shows the same value for it's local variable recordIndex both times the method is called, derived from the node attribute 'data-recordIndex'. In my latest troubleshooting with a node that breaks, that happens to be a value of 36 when called by both processUIEvent and processItemEvent.

    3) When I then expand that node and then mouse back over it, recordIndex is no longer consistent. When called from processUIEvent, recordIndex now has a value of 37, and when called immediately after from processItemEvent it still has a value of 36, which I assume is still the correct value. Sure enough, selection from that node downward is off by one, and as incorrectly selected nodes are expanded below it, the number of items recordIndex is off grows by the number of children added to the tree.

    I have no idea how to further chase down the root cause - it sounds like it's something going wrong with the treestore backing the treepanel, but of course that's just my best guess.

  10. #9
    Sencha User
    Join Date
    Jul 2013
    Posts
    9
    Answers
    1
    Vote Rating
    0
    ksonger is on a distinguished road

      0  

    Default


    I've finally figured it out! It's a problem with duplicate record ID's in the treestore, which is coming back from our rest service. Scott - thanks for the responses, really appreciate it.

  11. #10
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,882
    Answers
    653
    Vote Rating
    439
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Glad you got it working.. thanks for the update.

Thread Participants: 1

Tags for this Thread