[OPEN-1006] Panel does not expand to defined height when rendered collapsed

**xstegner** · 28 May 2010 5:40 AM

In the below example, the panel does not expand to the defined height of 200, but rather the content's defined 50. If the anchor layout is removed from the parent panel, it seems to work fine.

Code:

App = new Ext.Viewport({
  layout: "border",
  items: [
    {
      region: "center",
      border: false,
      layout: 'fit',
      items: [
        {
          border: false,
          layout: 'anchor',
          items: [
            {
              anchor: '100%',
              height: 200,
              collapsible: true,
              collapsed: true,
              title: 'Expand me!',
              items: [
                {
                  height: 50,
                  border: false,
                  html: "Content"
                }
              ]
            }
          ]
        }
      ]
    }
  ]
})

**xstegner** · 28 May 2010 6:58 AM

Should this be posted to the bugs forum? I wanted to post here to make sure it wasn't a user error first.

**jsakalos** · 28 May 2010 11:18 AM

It looks like overnested - remove the unnecessary containers and try again.

**xstegner** · 28 May 2010 11:38 AM

This is the simplest example I can come up with. The panel will not expand at all since there are no items in the child, even though it says it should have a body height of 200. If it had a child that had a height of 50, it would only expand to the 50, not the 200 specified.

Code:

new Ext.Panel({
  border: false,
  layout: 'anchor',
  renderTo: 'main',
  items: [
    {
      anchor: '100%',
      height: 200,
      collapsible: true,
      collapsed: true,
      title: 'Expand me!'
    }
  ]
});

This is obviously an issue being caused by the anchor layout, though I'm assuming anchor layouts and collapsed panels should work together fine.

**jsakalos** · 28 May 2010 12:39 PM

Yes, it looks like a bug. If collapsed is true, the height is ignored. If collapsed is false, it works as expected. I'm moving this thread to bugs. Complete showcase follows:

HTML Code:

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css" href="ext-3.2.1/resources/css/ext-all.css">
  <script type="text/javascript" src="ext-3.2.1/adapter/ext/ext-base.js"></script>
  <script type="text/javascript" src="ext-3.2.1/ext-all-debug.js"></script>
  <title id="page-title">Title</title>
  <script type="text/javascript">
  Ext.BLANK_IMAGE_URL = 'ext-3.2.1/resources/images/default/s.gif';
    Ext.onReady(function() {
    new Ext.Panel({
      border: true,
      width:300,
      height:500,
      layout: 'anchor',
      renderTo: Ext.getBody(),
      items: [
        {
          anchor: '100%',
          height: 200,
          collapsible: true,
          collapsed: true,
          title: 'Expand me!',
          html:'content'
        }
      ]
    });

    });
  </script>
</head>
<body>
</body>
</html>

**xstegner** · 1 Jun 2010 6:32 AM

If anyone could provide a patch for this, I would be eternally grateful. Need to get this working or find another way.

**Sesshomurai** · 8 Jun 2010 8:16 AM

Trying using forceLayout: true.

**xstegner** · 8 Jun 2010 8:26 AM

That doesn't work either.

**michbak** · 15 Feb 2011 7:26 AM

A very quick and very dirty fix. Tested on FF 3.6, Chrome 9 and IE 8.

PHP Code:


Ext.override(Ext.Panel,
  {
  onExpand: function(doAnim, animArg)
    {
    var cel = this[this.collapseEl];
    if ((cel.getHeight() === 0) || (cel.getWidth() === 0))
      {
      var h = this.height - this.getFrameHeight(),
          w = this.width - this.getFrameWidth();
      if (h)
        cel.dom.style.height = h + 'px';
      if (w)
        cel.dom.style.width = w + 'px';
      (function()
        {
        if (w && h)
          this.body.setSize(w, h);
        else if (w)
          this.body.setWidth(w);
        else if (h)
          this.body.setHeight(h);
        this.doLayout(false, true);
        }).defer(1, this);
      }

    if (doAnim)
      {
      this[this.collapseEl].slideIn(this.slideAnchor,
        Ext.apply(this.createEffect(animArg||true, this.afterExpand, this),
          this.expandDefaults));
      }
    else
      {
      this[this.collapseEl].show(this.hideMode);
      this.afterExpand(false);
      }
    }
  });

[OPEN-1006] Panel does not expand to defined height when rendered collapsed

Thread Tools

Search Thread

Display

[OPEN-1006] Panel does not expand to defined height when rendered collapsed

[OPEN-1006] Panel does not expand to defined height when rendered collapsed

Bug?

Bug?

Similar Threads

Panel content not rendered on slide out when Panel rendered collapsed

why the panel can't expand after it collapsed

[SOLVED] ComboBox width in collapsed rendered panel

How to expand a collapsed panel temporarily?

[2.0rc1] checkboxes not rendered in panel within collapsed fieldset

Tags for this Thread