1
votes

I have a problem with a collapsible panel that is an item of a panel with border layout in ExtJS 4.2.2. Basiclly it is the following structure:

Ext.onReady(function() {

var panel = Ext.create('Ext.panel.Panel', {
    height: 400,
    width: 600,
    title: 'TestPanel',
    renderTo: Ext.getBody(),
  items: [
    { xtype: 'toolbar', items: [{xtype: 'button', text: 'test1'}, {xtype: 'button', text: 'test2'}, {xtype: 'button', text: 'test3'}]},
    {
        xtype: 'panel',
      items: [
             { xtype: 'toolbar', items: [{xtype: 'button', text: 'another1'}, {xtype: 'button', text: 'another2'}, {xtype: 'button', text: 'another3'}]},
        {
          xtype: 'panel',
          layout: 'border',
          height: 600,
          width: 200,
          items: [
            {xtype: 'panel', title: 'options', html: 'lalalalalalalalalala', region: 'west', width: 100, height: 100, collapsible: true, collapsed: true},
            {xtype: 'panel', html: 'lalalalalalalalalala', region: 'center', width: 100, height: 100}
            ]
        }

        ]
    }
    ]
});  
});

Here is the corresponding fiddle: http://jsfiddle.net/jLugR/

When you uncollapse the option panel everything works fine. When you collapse it again, it breaks the layout. Do you have any idea what the problem is and how I can handle it?

1
I would recommend opening a bug report in the Sencha forum: sencha.com/forum/forumdisplay.php?80-Ext-Bugs - Alex Tokarev
Newmount provided a solution how to avoid this bug, but I have reported it in the Sencha forum. I hope they will fix it soon :) - David Bulczak

1 Answers

2
votes

Looks like child panel's(border layout) height is more than the parent panel's height.. Make sure that the height of all child elements together not exceeds parents height. Check the fiddle by changing the height of the panel with border layout to 250, it works..