Need to expand tree nodes by default

[vayumahesh]

Here is my tree panel code and code for generating JSON format data for the tree. I would like to show "COURSES" and "ASSIGNMENTS" nodes expanded by default. I set the json:property, expanded to true but it is not working. I have attached the screenshot of the tree too.

 
var Tree = Ext.tree;
/* create a treePanel object. Note that the region:'west' is what tells Ext which panel to display the tree in */
var tree = new Tree.TreePanel({
 region:'west',
 /* since we will be attaching this to a panel, we dont need to attach it to a div on the page */ 
 // these are the config options that we need to define on the treePanel 
 // attach to Panel Layout (you may attach to viewport too)
 id:'west-panel',
 title:'Courses/Assignments',
 split:true,
 width:500,
 collapsible: true,
 margins:'0 0 0 0',
 cmargins:'0 0 0 0',
 
 // these are the config options for the tree itself    
 autoScroll:true,
 animate:true,
 enableDD:false, // Allow tree nodes to be moved (dragged and dropped)
 containerScroll: true, 
 loader: new Tree.TreeLoader({
 dataUrl:'extJs/desktop/classTree.jsp'  
 }),
 
 // this adds a root node to the tree and tells it to expand when it is rendered
 root: new Tree.AsyncTreeNode({
  text: 'Courses/Assignments',
  draggable:false,
  expanded:true,
  id:'0001'
  })  
});
// Add a listener to the tree to do something when a node is clicked.  
tree.addListener('click', function (node, event){
 alert(node.attributes.id+'='+node.attributes.text+';tr.Class='+node.attributes.trClass);
});
 
JSON code from classTree.jsp ...
 
<json:array name="coursesAssignments">
     <json:object>
            <json:property name="id" value="01"/>
            <json:property name="text" value="COURSES"/>
            <json:property name="expanded" value="true"/>
            <json:property name="cls" value="folder"/>
            <json:array name="children">
                <%-- Loop over courses --%> 
                <c:forEach items="${courseQry.rows}" var="courseQryRows">       
                    <json:object>
                        <json:property name="id" value="c${courseQryRows.courseId}"/>
                        <json:property name="courseId" value="${courseQryRows.courseId}"/>
                        <json:property name="text" value="${courseQryRows.courseName}"/>
                        <json:property name="expanded" value="true"/>
 
                        <sql:query var="classQry" dataSource="jdbc/ccrwCrossFunctionalTraining">
                        select classDetails.classId, classDetails.classDesc
                        from classDetails
                        where classDetails.active = 1 and classDetails.courseId = '${courseQryRows.courseId}'
                        order by classDetails.classOrder
                        </sql:query>
 
                        <%-- If classes present for course, else --%>
                        <c:choose>
                        <c:when test="${classQry.rowCount gt 0}">
                            <json:property name="cls" value="folder"/>
                            <json:array name="children">
                                <%-- Loop over classes for course --%>
                                <c:forEach items="${classQry.rows}" var="classQryRows">        
                                    <json:object>
                                        <json:property name="id" value="${classQryRows.classId}"/>
                                        <json:property name="classId" value="${classQryRows.classId}"/>
                                        <json:property name="text" value="${classQryRows.classDesc}"/>
                                        <json:property name="trClass" value="${courseQryRows.trClass}"/>
                                        <json:property name="leaf" value="true"/>
                                        <json:property name="cls" value="file"/>
                                    </json:object>   
                                </c:forEach>
                            </json:array>
                        </c:when>
                        <c:otherwise>
                            <json:property name="leaf" value="true"/>
                            <json:property name="cls" value="file"/>            
                        </c:otherwise>
                        </c:choose>
                    </json:object>
                </c:forEach>
  </json:array>
 </json:object>
     <json:object>
            <json:property name="id" value="00"/>
            <json:property name="text" value="ASSIGNMENTS"/>
            <json:property name="expanded" value="true"/>
            <json:property name="cls" value="folder"/>
            <json:array name="children">
                <%-- Loop over assignments --%>
                <c:forEach items="${assignmentQry.rows}" var="assignmentQryRows">
                    <json:object>
                        <json:property name="id" value="a${assignmentQryRows.courseId}"/>
                        <json:property name="courseId" value="${assignmentQryRows.courseId}"/>
                        <json:property name="text" value="${assignmentQryRows.courseName}"/>
                        <json:property name="trClass" value="${assignmentQryRows.trClass}"/>
                        <json:property name="leaf" value="false"/>
                        <json:property name="cls" value="folder"/>
                    </json:object>
                </c:forEach> 
  </json:array>
 </json:object>
</json:array>

Thanks
vmrao

[vayumahesh]

Can anyone please suggest a solution for the above issue.

Thanks
vmrao

[MattD]

In your Tree.TreeLoader definition, try setting preloadChildren: true.

[vayumahesh]

Thanks. But I want to preload children upto 2 levels only. How do I do that ? There are 3 levels in the tree.

[Condor]

1. You are setting expanded to 'true' instead of true (String instead of boolean!)
2. If you don't want to preload the third level then your server shouldn't include a children array for nodes on the second level!

[vayumahesh]

I tried setting preloadChildren: true in Tree.TreeLoader definition but it does not do anything.

 loader: new caTree.TreeLoader({
 preloadChildren: true,
 dataUrl:'extJs/desktop/classTree.jsp'  
 })

Condor,

How do I set 'expanded' to boolean 'true' ? My JSON code is as follows.

<json:property name="expanded" value="true"/>

I tried values like "TRUE" and "1" but it does not work. If I try value=true, obviously it is giving error as it considers true as a variable.

[Condor]

How do I set 'expanded' to boolean 'true' ?

I assume that you are using json-taglib? In that case it should be:

<json:property name="expanded" value="${true}"/>

[vayumahesh]

Thanks, that Worked. I remember trying that but I may have tried it at wrong spot in the code.

[ankuravlani]

Hey,

I am also trying to same stuff, but for me the tree never gets loaded. Can some one please guide, where am i going wrong:


function showTree(treeData){
var tree = new Ext.tree.TreePanel({
useArrows: true,
autoScroll: true,
animate: true,
enableDD: true,
containerScroll: true,
border: false,
// auto create TreeLoader
loader: new Ext.tree.TreeLoader({
dataUrl:'treeView.json'
}),


// this adds a root node to the tree and tells it to expand when it is rendered
root: new Ext.tree.AsyncTreeNode({
text: 'Courses/Assignments',
draggable:false,
expanded:true,
id:'0001'
})
});

// render the tree
tree.render('panelContentFolder');
tree.getRootNode().expand();


}

and my json jsp looks like this
<json:object>
<json:array name="files">
<c:forEach items="${treeView}" var="file">
<json:object>
<json:property name="expanded" value="true"/>
<json:property name="text" value="${file[0]}"/>
<json:property name="cls" value="${file[1]}"/>
<json:property name="hasChildren" value="false"/>
</json:object>
</c:forEach>
</json:array>
</json:object>

but me tree never gets loaded.

Here's what i see in firebug :

{"files":[{"expanded":"true","text":"To Do","cls":"folder","hasChildren":"false"},{"expanded":"true","text":"To Do1","cls":"folder1","hasChildren":"false"}]}

-Ankur