Ext version tested:
  • Ext 3.4.0

Adapter used:
  • ext

css used:
  • only default ext-all.css

Browser versions tested against:
  • Chrome 13
  • FF5

Operating System:
  • Mac OS X 10.6

Description:
  • A toolbar inside a panel that is rendered to a div does not automatically resize itself when the browser window is resized. This worked perfectly in 3.0.3 (I did not test intermediate versions to find out where it stopped working). Perhaps I am doing something wrong, but it was working fine in 3.0.3 so it seems like a bug. I can not use a viewport in my case, the Panel must be rendered to a div within other HTML on the page.

    I tried adding "monitorResize" to the Toolbar config itself and that did not help.

Test Case:

Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  
  <title>Ext 3.4 toolbar resize issue</title>

<link href="../../resources/css/ext-all.css" media="screen" rel="stylesheet" type="text/css" />

<script src="../../adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="../../ext-all-debug.js" type="text/javascript"></script>

  <style type="text/css">
      #content {
        width: 95%;
      }
  </style>

    <script type="text/javascript">
      Ext.onReady(function()
      {
          new Ext.Panel(
          {
            autoWidth: true,
            monitorResize: true,
            tbar:
                [
                    {
                      text: 'Text in far left',
                      xtype: 'tbtext'
                    },
                    {
                      xtype: 'tbfill'
                    },
                    {
                      text: 'Text in far right',
                      xtype: 'tbtext'
                    }
                ],
            items:
            [
               {
                 html: "1. HTML property of a panel HTML property of a panel HTML property of a panel HTML property of a panel HTML property of a panel HTML property of a panel HTML property of a panel",
                 xtype: "panel",
                 title: 'tab1'
               }
            ],
            renderTo: 'ext_panel'
          } );

      } );
    </script>
</head>

  <body>
     <div id="content">
        <div id="ext_panel"></div>
     </div>
  </body>
</html>

Steps to reproduce the problem:
  • Load page with a container div set to a percentage width
  • Resize browser window
  • Notice the panel and its contents resize, but the toolbar does not (gets clipped if window is sized smaller, or leaves a white gap if window is sized larger)

The result that was expected:
  • Toolbar to be resized along with the panel contents and panel border

The result that occurs instead:
  • Toolbar width stayed the same when window was resized

Screenshot or Video:
3.4_toolbar_resize_bug.jpg

Debugging already done:
  • Running this code against 3.0.3 works as expected.

Possible fix:
  • not provided