Threaded View

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    Jul 2011
    Vote Rating
    garretmb is on a distinguished road


    Default Incorrect sizing of collapsed child panel when external panels are collapsed


    Ext version tested:
    • Ext 4.0.1 rev
    Browser versions tested against:
    • FF 3.6.13
    • IE 7.0.5730.13
    • It appears that child panels, when collapsed, lose the ability to resize properly given a collapse event of a panel outside the parent's control. The parent will resize but when the child panel is collapsed it will ignore any calls for it to resize. This makes the header appear either too short or too long for a particular view. The child panels never return the to proper size, meaning they are always either too long or short regardless of collapse or uncollapse status.
    Steps to reproduce the problem:
    • Collapse one or both of the Top child panels in the center panel
    • Collapse the East panel
    • Notice the big gap between the eastern edge of the top panels and the eastern edge of the screen. The converse can be proven as well
    • Collapse the East panel
    • Collapse the top panels
    • Uncollapse the East panel You will see that when the East panel is uncollapsed the headers for the Top panels are too long.
    The result that was expected:
    • The headers expand or shrink accordingly as the accordion event of an outside panel is triggered
    The result that occurs instead:
    • The collapsed panel's width does not match that of its parent panel
    Test Case:
    Ext.onReady(function() {
              var cw;
              Ext.create('Ext.Viewport', {
                 layout: {
                     type: 'border',
                     padding: 5
                 defaults: {
                     split: true
                 items: [{
                     region: 'center',
                     layout: 'border',
                     border: false,
                     items: [{
                         region: 'center',
                         html: 'center center',
                         title: 'Center',
                         dockedItems: [{
                             dock: 'top',
                             items: [{
                                 collapsible: true,
                                 title: 'Top 1',
                                 split: true,
                                 html: 'Collapse me and collapse the East panel to see my issue'                         },{
                                 collapsible: true,
                                 title: 'Top 2',
                                 split: true, 
                                html: 'Collapse me and collapse the East panel to see my issue'                         }]
                     region: 'east',
                     collapsible: true,
                     floatable: true,
                     split: true,
                     width: 200,
                     title: 'East',
                     layout: {
                         type: 'vbox',
                         padding: 5,
                         align: 'stretch'

    Screenshot or Video:

    See this URL for live test case:

    Debugging already done:

    Possible fix:

    Additional CSS used:
    • only default ext-all.css
    Operating System:
    • WinXP Pro
    Last edited by garretmb; 21 Jul 2011 at 11:26 AM. Reason: formatting issues

Thread Participants: 1