Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext User
    Join Date
    Dec 2008
    Posts
    11
    Vote Rating
    0
    xstegner is on a distinguished road

      0  

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

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


    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"
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    })

  2. #2
    Ext User
    Join Date
    Dec 2008
    Posts
    11
    Vote Rating
    0
    xstegner is on a distinguished road

      0  

    Default Bug?

    Bug?


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

  3. #3
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,561
    Vote Rating
    384
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    It looks like overnested - remove the unnecessary containers and try again.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  4. #4
    Ext User
    Join Date
    Dec 2008
    Posts
    11
    Vote Rating
    0
    xstegner is on a distinguished road

      0  

    Default


    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.

  5. #5
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,561
    Vote Rating
    384
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    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>
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  6. #6
    Ext User
    Join Date
    Dec 2008
    Posts
    11
    Vote Rating
    0
    xstegner is on a distinguished road

      0  

    Default


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

  7. #7
    Sencha User
    Join Date
    Nov 2007
    Posts
    294
    Vote Rating
    0
    Sesshomurai is on a distinguished road

      0  

    Default


    Trying using forceLayout: true.

  8. #8
    Ext User
    Join Date
    Dec 2008
    Posts
    11
    Vote Rating
    0
    xstegner is on a distinguished road

      0  

    Default


    That doesn't work either.

  9. #9
    Sencha User
    Join Date
    Aug 2008
    Posts
    4
    Vote Rating
    0
    michbak is on a distinguished road

      0  

    Default


    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(doAnimanimArg)
        {
        var 
    cel this[this.collapseEl];
        if ((
    cel.getHeight() === 0) || (cel.getWidth() === 0))
          {
          var 
    this.height this.getFrameHeight(),
              
    this.width this.getFrameWidth();
          if (
    h)
            
    cel.dom.style.height 'px';
          if (
    w)
            
    cel.dom.style.width 'px';
          (function()
            {
            if (
    && h)
              
    this.body.setSize(wh);
            else if (
    w)
              
    this.body.setWidth(w);
            else if (
    h)
              
    this.body.setHeight(h);
            
    this.doLayout(falsetrue);
            }).
    defer(1this);
          }

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

Similar Threads

  1. Panel content not rendered on slide out when Panel rendered collapsed
    By Eitschman in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 24 Feb 2010, 1:51 AM
  2. why the panel can't expand after it collapsed
    By Rooock in forum Ext 3.x: Help & Discussion
    Replies: 6
    Last Post: 7 Sep 2009, 8:33 AM
  3. [SOLVED] ComboBox width in collapsed rendered panel
    By bramvano in forum Ext 3.x: Help & Discussion
    Replies: 5
    Last Post: 18 Aug 2009, 5:20 AM
  4. How to expand a collapsed panel temporarily?
    By danielking in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 12 Apr 2008, 5:34 AM
  5. Replies: 2
    Last Post: 14 Nov 2007, 7:11 AM

Thread Participants: 3

Tags for this Thread