在extjs4中使用可折叠

Question

I am trying to make one of my panels in ExtJS4 collapsible. When I use "collapsible: true" the panel is collapsible when my application is running. But if I collapse the panel it disappears so I can't uncollapse it.

I am not sure what needs to surround my panel or be directly above it. I have tried using sample code:

{
region: 'north',
collapsible: false,
title: 'North',
split: true,
height: 100,
minHeight: 60,
html: 'north'
},

That works when I add it to my viewport to be at the top of the webpage. But when I position it to be in the location I want it on the page I can collapse it but it then dissappears. Can anyone let me know whatwould cause it to dissappear when collapsed?

Answer 1

Expanding on Geronimo's answer, it is sometimes not enough to set the layout on the panel itself. In that case try wrapping your panel in another one with layout fit . Instead of

{
  xtype: 'mypanel',
  title: 'my little panel',
  collapsible: true,
  ...
}

do this:

{
  xtype: 'panel',
  title: 'my little panel', // Pull certain configs up to the wrapper panel,
  collapsible: true,        // like title and collapsible
  layout: 'fit',
  items: [
    {
      xtype: 'mypanel',
      title: undefined,     // Make sure there is not another title bar
      border: false,        // We don't want another border
      ...
    } 
  ]
}

Not nice but so far, I couldn't find a better solution and it did work in two different situations for me already.

Answer 2

I had a similar problem and solved it based off of this . Basically, make sure you have the rightt layout config specified on the panel your having trouble with, something like layout: 'fit' .