Hybrid View

  1. #1
    Sencha User
    Join Date
    Jun 2012
    Location
    Virginia, USA
    Posts
    40
    Vote Rating
    1
    rtirbany is on a distinguished road

      0  

    Default Answered: Issue with panel with accordion layout displaying a scrollbar

    Answered: Issue with panel with accordion layout displaying a scrollbar


    hi,
    I've a parent panel with an accordion layout, confined to a (vertically) restricted area of my viewport.
    This parent panel is dynamically populated to contain multiple child panels based off data in a store (using a dataview to generate div/html based).
    I have the parent's accordion behavior/rendering working fine. My issue is that since I can have many child panels, I am in need of a vertical scrollbar in the parent to be able to display/scroll them (remember, parent is in a vertically restricted area) since often my list of collapsed panel headers requires more space than what's used by the parent.

    Is there a way to have this work?

    I've tried pnl.setOverflowXY, overflowX, autoScroll (just to test - I don't want horizontal scrollbars at all) doLayout, etc to the parent (before as well as after adding each child item, etc)...to no avail. (I have seen this all work with non-dynamically added panels I believe)

    Any thoughts/ideas on how to have an accordion with a scrollbar in the parent?
    thanks in advance!


    thanks

  2. Does this looks right?

  3. #2
    Sencha - Support Team
    Join Date
    Feb 2013
    Location
    California
    Posts
    3,826
    Answers
    155
    Vote Rating
    72
    Gary Schlosberg is a jewel in the rough Gary Schlosberg is a jewel in the rough Gary Schlosberg is a jewel in the rough Gary Schlosberg is a jewel in the rough

      0  

    Default


    I'm having a bit of trouble visualizing your display. Can you provide a code sample or perhaps just an image displaying your interface and let us know where you were hoping for a scrollbar? Thanks.

  4. #3
    Sencha User
    Join Date
    Jun 2012
    Location
    Virginia, USA
    Posts
    40
    Vote Rating
    1
    rtirbany is on a distinguished road

      0  

    Default


    Hi thanks for responding...and hopefully this helps clear it up. I should have done this earlier, sorry...

    As I mentioned there's a parent panel w/ layout of accordion who's area is vertically restricted. This parent panel will have many child panels (the icon for expanding each child panel header wasn't copied over but is actually working fine, sorry for any confusion). As of now, as I read in an array/store, I create a (child) panel for each item with and this new child panel's content is generated via an xtemplate applied against the info in the array/store element.

    I'd simply like for there to be a scrollbar in the parent panel (my Filters tab) for when I have many child panels or when I expand one of the child panels and a scrollbar (bringing even more need for a scrollbar in the parent panel). Let's say for instance I have 20 child panels instead of the 8 or so shown below. Or if I expand on a child and need more vertical area to display it. In either case I'd like a scrollbar to appear as part of the Filters tab.

    I currently have a work around where the 'Filter Options' area (which contains components/space immediately below) collapses up...this gives me limited amount of extra height...but doesn't solve the issue.

    accordionIssue.png

  5. #4
    Sencha User
    Join Date
    Jun 2012
    Location
    Virginia, USA
    Posts
    40
    Vote Rating
    1
    rtirbany is on a distinguished road

      0  

    Default


    Bueller?

  6. #5
    Sencha User
    Join Date
    Jun 2012
    Location
    Virginia, USA
    Posts
    40
    Vote Rating
    1
    rtirbany is on a distinguished road

      0  

    Default help!! Behind, but almost there...

    help!! Behind, but almost there...


    ok, here's an almost-working example:

    The main panel (DetailsContainer) below extends a Panel and has a limited vertical area.
    This main panel will have a couple children panel (which will get rendered as tabs).

    One of these child tabs (let's call it Tab-A) needs to have it's own children - multiple panels, laid out as an accordion. These children get loaded into Tab-A via xtemplate/dataview. Tab-A needs employ a scrollbar to display it's contents if there are too many children and this height extends behind the vertical contraint of the main tab. Sounds pretty simple, right?

    I can't get it to work for a tabpanel, however I do have it working fine for a regular panel which I have below. I need the same behavior/etc for a tabpanel as the DetailsContainer.

    Code:
    Ext.define('DP.view.DetailsContainer', {
        extend: 'Ext.Panel', //needs to be a tabpanel here
        alias: 'widget.DetailsContainer',
        title: 'Details Container (contains more panels - varying height, all derived via xtemplate',
        // margins:'5 0 5 5', 
        height: 150,
        autoScroll: true, 
        items: [
            {
                items:[
                {
                    xtype: 'container',
                    layout: 'accordion', 
                    items: [{ 
                        title: 'first',
                        flex: 1,
                        html: 'this is first<br>more content'
                    },
                    { 
                        title: 'second',
                        flex: 1,
                        html: 'this is a 2nd panel<br>more content<br>and more content'
                    },
                    { 
                        title: 'third',
                        flex: 2,
                        html: 'this is a 3rd panel'
                    },
                    { 
                        title: 'fourth',
                        flex: 1,
                        html: 'this is a 4th panel<br>more content again'
                    },
                    { 
                        title: 'fifth',
                        flex: 2,
                        html: 'this is a 5th panel'
                    },
                    { 
                        title: 'sixth',
                        flex: 1,
                        html: 'this is a 6th panel'
                    },
                    { 
                        title: 'seventh',
                        flex: 2,
                        html: 'this is a 7th panel'
                    }
                    ]
                }
                ]
            }
        ] 
    });
     
    Ext.create('DP.view.DetailsContainer', {
        renderTo: Ext.getBody()
    });

  7. #6
    Sencha User
    Join Date
    Sep 2011
    Posts
    573
    Answers
    58
    Vote Rating
    70
    ettavolt is just really nice ettavolt is just really nice ettavolt is just really nice ettavolt is just really nice

      1  

    Default


    Does this looks right?