Results 1 to 2 of 2

Thread: Ext AccordionLayout

  1. #1
    Ext User
    Join Date
    Nov 2007
    Location
    US
    Posts
    55

    Question Ext AccordionLayout

    I am having border layout and on west section I have placed AccordionLayout which contains multiple tree panel.

    Problem I am facing is when I collapse One pane in AccordionLayout tree under that vanishes.

    It doesn't show up.


    I am working on it for couple of days but could not able to solve it.



    Code:
    var root1 = new Ext.tree.AsyncTreeNode({
            allowDrag:true,
           allowDrop:true,
            id:'root1',
            text:'Root1',
            loader:new Ext.tree.TreeLoader({dataUrl:'/home/tree.json'})
        }); 
        var root2 = new Ext.tree.AsyncTreeNode({
            allowDrag:true,
           allowDrop:true,
            id:'root2',
            text:'Root1',
            loader:new Ext.tree.TreeLoader({dataUrl:'/home/tree.json'})
        }); 
        
         var root3 = new Ext.tree.AsyncTreeNode({
            allowDrag:true,
           allowDrop:true,
            id:'root3',
            text:'Root3',
            loader:new Ext.tree.TreeLoader({dataUrl:'/home/tree.json'})
        }); 
        
       
        // Tree panel
        var tree1 = new Ext.tree.TreePanel({
            id:'tree1',
             border:false,
             width:150,
             //autoWidth:true,
             height: (document.documentElement.clientHeight-60),
            //animate:true,
            enableDD:true,
            autoScroll:true,
            lines:false,
            rootVisible:true,
            loader: new Ext.tree.TreeLoader(),
            root: root1,
            //renderTo::this.divClass2,  
            title:'Class Room1'
            });    
       var tree2 = new Ext.tree.TreePanel({
            id:'tree2',
             border:false,
             hideMode:'offsets',
             width:150,
             autoWidth:true,
             height: (document.documentElement.clientHeight-60),
            animate:true,
            enableDD:true,
            autoScroll:true,
            lines:false,
            rootVisible:true,
            loader: new Ext.tree.TreeLoader(),
            root: root2,
            split: true, 
            //renderTo:this.divClass1,
            collapsible: true, 
            collapseMode:'mini',
            title:'Class room 2'
            });         
                   
          var tree3 = new Ext.tree.TreePanel({
            id:'tree3',
             border:false,
             width:150,
             hideMode:'offsets',
             autoWidth:true,
             height: (document.documentElement.clientHeight-60),
            animate:true,
            enableDD:true,
            autoScroll:true,
            lines:false,
            rootVisible:true,
            loader: new Ext.tree.TreeLoader(),
            root: root3,
            split: true, 
            collapsible: true, 
            collapseMode:'mini',
            title:'Class3"
            });   
            
        
        var accordion = new Ext.Panel({
                    margins:'5 0 5 5',
                    split:true,
                    width: 140,
                    layout:'accordion',
                    border:false,
                    layoutConfig: {
                        animate:false
                    },
                    renderTo:this.parentdiv,
                    items: [tree1,tree2,tree3],
                    id:'treePanel'
                });

    Code:
    Div for my rendering are which I am loading using velocity template  at run time 
    
    
    <div id ="shellContentRegion">
    
    <div id ="icon1">
            <div id="aboutMsg"><a class="profile" href="javascript:void(0)" id="about"> About</a></div>    
            <div id="helpMsg"><a class="profile" href="javascript:void(0)" id="help"> Help</a></div>
            <div id="logoutMsg"><a class="profile" href="javascript:void(0)" id="logout"> Logout</a></div>
            <div id="welcomeMsg">Welcome, ${currentUser}</div>
     </div>
    <div id="treeRegion"  >
    </div>
    
    <div id="bodyRegion"></div>
    <div id="statusRegion" ></div>
        
    
    </div>


    Thanks in Advance
    Take a long breathe ..

  2. #2
    Ext User
    Join Date
    Nov 2007
    Location
    US
    Posts
    55

    Default

    Hi Guys ,
    i figured out what is problem. Problem is actually height of treePanel.
    If we keep autoHeight: true for treepanels accorion layout works fine.

    But when we do initialize some height to hardCode value it fails to render.
    Take a long breathe ..

Posting Permissions

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