1. #1
    Sencha Premium Member
    Join Date
    Aug 2008
    Posts
    142
    Vote Rating
    0
    vayumahesh is on a distinguished road

      0  

    Default Need to expand tree nodes by 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
    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
    vayumahesh is on a distinguished road

      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
    MattD is on a distinguished road

      0  

    Default Use preloadChildren

    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
    vayumahesh is on a distinguished road

      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
    92
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      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
    vayumahesh is on a distinguished road

      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
    92
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      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
    vayumahesh is on a distinguished road

      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
    ankuravlani is on a distinguished road

      0  

    Question Need to expand tree nodes by default

    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