[EXTJSIV-3034][4.0.2a] Accordion: Child panel's docked items with wrong borders

[willydee]

See screenshot below. Items docked on top have a wrong additional top border, and the borders separating docks from content are not rendered.

Ext.onReady(function() {
  var p = new Ext.Panel({
    renderTo: Ext.getBody(), height: 200, width: 300, padding: 20,
    layout: 'accordion',
    items: [
      { title: 'Panel 1', html: 'Some content', dockedItems: [
          { xtype: 'toolbar', dock: 'top', items: [ 'Top:', { text: 'Button 1' }] },
          { xtype: 'toolbar', dock: 'bottom', items: [ 'Bottom:', { text: 'Button 2' }] }
      ] },
      { title: 'Panel 2', html: 'Some content' }
    ]
  });
}) 

This also applies to grid panel headers, which are effectively docked containers.
A similar unwanted behaviour is also visible in the Accordion layout example, where header and bottom scrollbar have additional borders.

Please note that there are some more rendering issues with docked items in accordion children:

• When the first panel has docked items, and the number of panels is 2, there's an additional border at the bottom of the second one, which disappears when expanding/collapsing. When 2 or more panels are following the one with docked items, the border does not appear.
• When the index of the panel with docked items is 2 (starting from zero) or higher, docked items are not rendered at all when expanded.

All these issues are reproducible in FF 4 and Google Chrome 12.

[mike.estes]

Thank you for reporting this and supplying a test case, filed as EXTJSIV-3034

[willydee]

Almost a year since the initial report. Let's bump it a bit, so a fix might still make it into 4.1 GA.

*bump*

[mattia.pagliasso]

this is still affecting the modern toolkit in sencha 6.5.2