View Full Version : Loading a tree initially with some nodes

11 Feb 2010, 10:08 PM
We have an application where the tree panel's state (i.e. which nodes are expanded/collapsed etc.) is persisted server side.

Currently we use a tree loader, so if a page navigation occurs, it may take some time to asynchronously request each expanded node's children, childrens children etc. based on this stored state.

Because the state is server side, we decided to implement some functionality so that we can include all the visible nodes as json declared in the body of the page ... To this end we've now got the following code:

var tree = new Tree.TreePanel({
id: id,
el: 'tree',
title: title,
useArrows: true,
autoScroll: true,
width: 200,
animate: true,
enableDD: true,
containerScroll: true,
loader: treeLoader,
rootVisible: false,
tbar: topToolbar,
stateful: true,
border: true,
frame: true,
stateEvents: ['bodyresize', 'collapse', 'collapsenode', 'expand', 'expandnode', 'resize'],
root: {
id: id + '-root-node',
text: 'Root',
draggable: false,
etId: '{00000000-0000-0000-0000-000000000000}',
etUid: 'Root',
etNodeType: 'Root',
editable: false,
expanded: false,
children: children

where children is a json configuration array with all the nodes i.e.

[{"text":"Business Inc","expanded":false,"url":"/Application/api/tree/Explorer/Organisation/e7513e93-affd-4e55-86dd-9bc000ca613e","leaf":false,"editUrl":"/Application/Dashboard/ViewOrganisationUserDashboard.rails?id=e7513e93-affd-4e55-86dd-9bc000ca613e","iconCls":"organisation-icon","slug":null,"editable":false,"draggable":true,"childrenUrl":"/EnterpriseTester/api/tree/Explorer/Organisation/e7513e93-affd-4e55-86dd-9bc000ca613e/children","qtip":null,"children":null,"path":"/Root/Organisatione7513e93-affd-4e55-86dd-9bc000ca613e"}]

But instead of the nodes displaying, we're getting an exception reported, details below:

ext-all-debug.js line 175, in the method insertHtml()

el is undefined, line 175

if (el.insertAdjacentHTML) { <--- this code

Call stack is here:

el is undefined
insertHtml()ext-all-debug.js (line 175)
renderElements()ext-all-debug.js (line 31550)
render()ext-all-debug.js (line 31500)
render()ext-all-debug.js (line 31005)
renderChildren()ext-all-debug.js (line 30987)
expand()ext-all-debug.js (line 30844)
expand()ext-all-debug.js (line 31089)
loadComplete()ext-all-debug.js (line 31102)
createDelegate()ext-jq...ebug.js (line 896)
runCallback()ext-all-debug.js (line 31841)
load()ext-all-debug.js (line 31755)
expand()ext-all-debug.js (line 31085)
reload()ext-all-debug.js (line 31129)
(?)()Enterp...Tree.js (line 687)
fire()ext-all-debug.js (line 1565)
fireEvent()ext-all-debug.js (line 1324)
render()ext-all-debug.js (line 9404)
renderItem()ext-all-debug.js (line 11759)
renderAll()ext-all-debug.js (line 11951)
onLayout()ext-all-debug.js (line 11737)
onLayout()ext-all-debug.js (line 11896)
layout()ext-all-debug.js (line 11730)
setActiveItem()ext-all-debug.js (line 11940)
setActiveTab()ext-all-debug.js (line 26445)
afterRender()ext-all-debug.js (line 26083)
render()ext-all-debug.js (line 9428)
onLayout()ext-all-debug.js (line 12155)
layout()ext-all-debug.js (line 11730)
doLayout()ext-all-debug.js (line 11558)
onResize()ext-all-debug.js (line 11820)
onResize()ext-all-debug.js (line 11588)
setSize()ext-all-debug.js (line 10756)
afterRender()ext-all-debug.js (line 10891)
afterRender()ext-all-debug.js (line 11328)
render()ext-all-debug.js (line 9428)
Component()ext-all-debug.js (line 9274)
constructor()ext-jq...ebug.js (line 229)
constructor()ext-jq...ebug.js (line 229)
constructor()ext-jq...ebug.js (line 229)
initialize()Enterp...tion.js (line 249)

This only occurs when I specify a root node for my tree that has children... if I comment out the children: [...] value in root node config, everything works as expected. Can anyone shed some light on what might be happening? or suggest an alternative approach?

BTW: this is for ExtJS 3.1.0, I haven't had a chance to upgrade 3.1.1 yet. Though looking at the release notes for 3.1.1, it doesn't appear an upgrade would help the situation.


- Alex