View Full Version : TreePanel errors - 'RangeError:Maximum call stack size exceeded'

25 Nov 2013, 3:29 PM

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:


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:

Ext.define('MyApp.itemView.store.ParentItemsStore', {
extend: 'Ext.data.TreeStore',

requires: [

storeId: 'parentItemsTreeStore',

model: 'MyApp.itemView.model.ParentItemsTreeModel',

autoLoad: false,

rootId: null,

constructor: function () {


var ReaderClass = Ext.extend(Ext.data.JsonReader, {
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;

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:

Ext.define('MyApp.itemView.view.createItem.ParentItemsTreePanel', {
extend: 'Ext.tree.Panel',

requires: [

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

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.

26 Nov 2013, 10:23 AM
RangeError:Maximum call stack size exceeded

Usually means you are in a dead loop .. you have recursive calls

26 Nov 2013, 10:37 AM
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:


...referenced on ext-all.js, line 18.

26 Nov 2013, 10:48 AM
If you change your data to just 1 level, do you still get this?

3 Dec 2013, 3:04 PM
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.

3 Dec 2013, 3:10 PM
Looks like it is time for a working example:

4 Dec 2013, 10:35 AM
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:

"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.

4 Dec 2013, 3:35 PM
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.

5 Dec 2013, 11:10 AM
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.

5 Dec 2013, 11:35 AM
Glad you got it working.. thanks for the update.