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,094
    Answers
    129
    Vote Rating
    59
    Gary Schlosberg has a spectacular aura about Gary Schlosberg has a spectacular aura about Gary Schlosberg has a spectacular aura about

      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
    568
    Answers
    58
    Vote Rating
    68
    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?

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

      0  

    Default


    thanks for the response - this is really, really close but I can't view the contents of any of the subpanels.
    I've been trying to play with your example but still no luck...

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

      1  

    Default


    wow....dude, this is great - I think I have it now...not sure why but it had funny behavior about the first subpanel. Thanks ettavolt and everyone else!



    Code:
      Ext.define('DP.view.DetailsContainer', {
         extend: 'Ext.TabPanel',
         alias: 'widget.DetailsContainer',
         title: 'Details Container (contains more panels - varying height, all derived via xtemplate',
         // margins:'5 0 5 5', 
         //height: 500,
         //width: '100%',
         items: [{
             title: 'filters',
             xtype: 'container',
             layout: 'accordion',
             overflowY: 'auto',
             
             items: [{
                 hidden:true
             },
                 
                     {
                 title: 'first',
                 titleCollapse:true,
                 flex: 1,
                 html: 'this is first<br>more content'
             }, {
                 title: 'second',
                 autoHeight: true,
                 flex: 1,
                 html: 'this is a 2nd panel<br>more content<br>and more content'
             }, {
                 title: 'third',
                 autoHeight: true,
                 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<br>more content<br>and more content'
              }, {
                 title: 'fifth',
                 flex: 2,
                 html: 'this is a 5th panel'
              }, {
                 title: 'fifth',
                 flex: 2,
                 html: 'this is a 5th panel'
             }, {
                 title: 'sixth',
                 flex: 1,
                 html: 'this is a 6th 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()
     });

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

      0  

    Default


    Argh...it seems I can't get the scrollbar AND panel contents to both work concurrently. Anyone ever try doing this?

    Nevermind...going to just use a 1 column gridpanel with grouping. I wanted something more lightweight, but it's hard to argue that the grouping features and everything built-in has already been tested and will suit my needs. Will reload the grid store with a member of the JSON object....
    Last edited by rtirbany; 20 Sep 2013 at 10:09 AM. Reason: update

  11. #10
    Sencha User
    Join Date
    Sep 2011
    Posts
    568
    Answers
    58
    Vote Rating
    68
    ettavolt is just really nice ettavolt is just really nice ettavolt is just really nice ettavolt is just really nice

      0  

    Default


    Right choice! I advise to always use DataView (or its descendant tree/table view) for variable content.