1. #1
    Sencha User
    Join Date
    Mar 2008
    Location
    Marietta, GA
    Posts
    93
    Vote Rating
    0
    jasondeegan is on a distinguished road

      0  

    Default CLOSED: Accordion panel not growing to match parent panel

    CLOSED: Accordion panel not growing to match parent panel


    How can I make the accordion panel (of id = dailyCharts-id) grow to fit the whole panel that sits inside the viewport. As shown in the attached screenshot, the Viewport part is working just fine. The accordion isn't growing to match, I've tried autoHeight in various places.

    Unfortunately, I don't know the height, so I can't just hard code it.

    Thanks!
    J

    [attached screenshot]

    Code:
    var contactsPanel = {
       id:'contacts-panel',
       layout:'border',
       bodyBorder: false,
       bodyStyle : 'background:#DFE8F6;',
       defaults: {
          bodyStyle : 'background:#DFE8F6;',
          split: true,
          animFloat: false,
          autoHide: false,
          useSplitTips: true
       },
       items: [{
          layout:'border',
          region:'center',
          margins: '0 0 0 0',
          collapsible: false,
          ctCls: 'teledini',
          items: [{
             region: 'south',
             height: 350,
             bodyStyle: 'background:#DFE8F6; border-bottom:solid #777777 1px;',
             items:[{
                layout: 'accordion',
                layoutConfig: {
                   //animate: true,
                   fill:false
                },
                defaults:{
                   bodyStyle: 'padding:15px; height:247px; border-left:solid #777777 1px; border-right:solid #777777 1px;',
                   autoScroll:true
                },
                items:[{
                   title: 'Panel 1',
                   id: 'Panel 1',
                   hideCollapseTool: true,
                   html: 'Content1<br><br>aaa'
                },{
                   title: 'Panel 2',
                   id: 'panel2',
                   html: 'Content 2<br><br><br><br><br><br><br><br><br><br><br><br><br>test<br><br><br><br>test<br><br><br><br>test<br><br><br><br>test2'
                },{
                   title: 'Panel 3',
                   id: 'panel3',
                   html: 'Content 3<br><br><br><br><br><br><br><br><br><br><br><br><br>test'
                }]
             }]
          },{
             title: 'Contact Detail',
             region:'center',
             margins: '0 0 5 0',
             bodyStyle: 'border:solid #777777 1px; border-top:0; padding:2px;',
             html:'Contact Detail'
          }]
       },{
          layout:'border',
          region:'east',
          floatable: false,
          collapsible: false,
          ctCls: 'teledini',
          width:'300',
          margins: '0 0 0 0',
          items: [{
             title: 'Today\'s Reservations',
             height:200,
             region: 'south',
             bodyStyle: 'border:solid #777777 1px; border-top:0; padding:2px;',
             html: '4'
          },{
             id:'dailyCharts-id',
             title: 'Daily Charts',
             region:'center',
             margins: '0 0 5 0',
             //autoHeight:true,
             items:[{
                layout: 'accordion',
                layoutConfig: {
                   //animate: true,
                   autoHeight:true,
                   fill:true
                },
                defaults:{
                   bodyStyle: 'padding:15px; border-left:solid #777777 1px; border-right:solid #777777 1px;',
                   autoScroll:true
                },
                items:[{
                   title: 'Panel 1',
                   id: 'contactsSidePanel1',
                   hideCollapseTool: true,
                   html: 'Content1<br><br>aaa'
                },{
                   title: 'Panel 2',
                   id: 'contactsSidePanel2',
                   html: 'Content 2<br><br><br><br><br><br><br><br><br><br><br><br><br>test<br><br><br><br>test<br><br><br><br>test<br><br><br><br>test2'
                },{
                   title: 'Panel 3',
                   id: 'contactsSidePanel3',
                   html: 'Content 3<br><br><br><br><br><br><br><br><br><br><br><br><br>test'
                },{
                   title: 'Panel 4',
                   id: 'contactsSidePanel4',
                   html: 'Content 4<br><br><br><br><br><br><br><br><br><br><br><br><br>test'
                }]
             }]
          }]
       }]
    };
    Attached Images
    Don't measure excellence against others, but rather against the best implementation of yourself.

  2. #2
    Sencha User
    Join Date
    Mar 2008
    Location
    Marietta, GA
    Posts
    93
    Vote Rating
    0
    jasondeegan is on a distinguished road

      0  

    Default


    I havne't tested it yet, but I read elsewhere (moved on to another project), the answer here is too much nesting. The accordion needs to be the child, not a child of a child.

    J
    Don't measure excellence against others, but rather against the best implementation of yourself.

  3. #3
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    57
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Overnest.

    You are putting an accordoin layout Panel inside the center Panel.

    Use the accordion layout Panel as the center.

Thread Participants: 1