[SOLVED] Scrolling tree inside of accordion panel

8. January 2009 edit

  • I'm hoping someone can solve this for me. I'm familiar with Ext 1.1 but am having some problems with 2.0 and scrolling. I know this has been answered before but I am having a hard time wrapping my head around the different types of panels I should use.

    In my viewport, I have a west panel with a layout of 'accordion'. So, I add panels to my west panel to create new accordion panels that can expand and contract. What I need to happen is that each new accordion panel sets it's height to 100% of the available height and then shows a scroll bar if the content of the panel exceeds it's height. Here is my code...



    //viewport construction...
    ...
    {
    region:'west',
    id:'west-panel',
    title:'Home',
    split:true,
    collapsible: true,
    layout: 'accordion',
    margins:'0 0 0 5',
    layoutConfig:{
    animate:true
    }
    }

    mcp.layout.westPanel = Ext.getCmp('west-panel');
    ...

    //new panel to hold a new tree panel
    ...
    mcp.toc.tocPanel = new Ext.Panel(
    {
    title: 'Table Of Contents',
    iconCls: 'toc',
    border: false
    }
    );
    mcp.layout.westPanel.add(mcp.toc.tocPanel);
    ...

    //create the tree panel
    ...

    var Tree = Ext.tree;

    var tree = new Tree.TreePanel({
    useArrows:true,
    animate:true,
    enableDD:true,
    border: false,
    bodyStyle: 'margin: 5px 0 0 0',
    loader: new Tree.TreeLoader({
    dataUrl: sUrl
    })
    });

    // set the root node
    var root = new Tree.AsyncTreeNode({
    text: sRootText,
    draggable:false,
    id:sRootID
    });
    tree.setRootNode(root);

    mcp.toc.tocPanel.add(tree);
    ...



    I just can't seem to get any of the accordion panels to scroll..?


  • Yep, that was it! Thanks. I think that's the biggest stumbling block for me and EXT 2.0 It's the combination of some properties that you have to use in order to get the expected results. I change one property at a time trying to get something to work when it was really a combination of things that I needed to do.


  • Add autoScroll:true and layout:'fit' to your accordion items. That should fix it.


  • Well, it is not about knowing some "magic" combinations, it is about understanding of each config option individually instead. Trial and error approach can sometimes lead to results but understanding is much more effective - you learn only once.







    • #If you have any other info about this subject , Please add it free.#
    Your name:
    E-mail:
    Telphone:

    Your comments:


    If you have any other info about [SOLVED] Scrolling tree inside of accordion panel , Please add it free.

    ImageJuice Raising Funding to Turn Web Sites Into Moving Pictures
    Plan to Counterattack Hackers Draws More Fire