Incorrect sizing of collapsed child panel when external panels are collapsed

[garretmb]

REQUIRED INFORMATION

Ext version tested:

• Ext 4.0.1 rev

Browser versions tested against:

• FF 3.6.13
• IE 7.0.5730.13

Description:

• 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.require(['*']);     
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'
                 }
           }]
       });
    });

HELPFUL INFORMATION

Screenshot or Video:

See this URL for live test case: http://

Debugging already done:

Possible fix:

Additional CSS used:

• only default ext-all.css

Operating System:

• WinXP Pro