Results 1 to 9 of 9

Thread: Need to expand tree nodes by default

  1. #1
    Sencha Premium Member
    Join Date
    Aug 2008
    Posts
    142
    Vote Rating
    0
      0  

    Default Need to expand tree nodes by default

    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.

    Code:
     
    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
    Attached Images Attached Images
    Last edited by vayumahesh; 7 Aug 2008 at 4:41 AM. Reason: extra info

  2. #2
    Sencha Premium Member
    Join Date
    Aug 2008
    Posts
    142
    Vote Rating
    0
      0  

    Default

    Can anyone please suggest a solution for the above issue.

    Thanks
    vmrao

  3. #3
    Ext User
    Join Date
    Jul 2008
    Posts
    1
    Vote Rating
    0
      0  

    Default Use preloadChildren

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

  4. #4
    Sencha Premium Member
    Join Date
    Aug 2008
    Posts
    142
    Vote Rating
    0
      0  

    Default

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

  5. #5
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    119
      0  

    Default

    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!

  6. #6
    Sencha Premium Member
    Join Date
    Aug 2008
    Posts
    142
    Vote Rating
    0
      0  

    Default

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

    Code:
     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.

  7. #7
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    119
      0  

    Default

    Quote Originally Posted by vayumahesh View Post
    How do I set 'expanded' to boolean 'true' ?
    I assume that you are using json-taglib? In that case it should be:

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

  8. #8
    Sencha Premium Member
    Join Date
    Aug 2008
    Posts
    142
    Vote Rating
    0
      0  

    Default

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

  9. #9
    Ext User
    Join Date
    Nov 2008
    Posts
    42
    Vote Rating
    0
      0  

    Question Need to expand tree nodes by default

    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •