Hybrid View

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    Feb 2008
    Posts
    6
    Vote Rating
    0
    japanick is on a distinguished road

      0  

    Default Ext 3.4 Toolbar in Panel does not resize when container div is resized

    Ext 3.4 Toolbar in Panel does not resize when container div is resized


    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

  2. #2
    Sencha Premium Member
    Join Date
    Jun 2007
    Posts
    31
    Vote Rating
    0
    pianoroy is on a distinguished road

      0  

    Default I'm having the same problem

    I'm having the same problem


    ...with a slightly different setup.

    I have a panel with a toolbar, and I'm calling doLayout on a parent panel when the window is resized (essentially, I'm re-implementing monitorResize because I have some other things I'm working with).

    When doLayout is called on a panel that has been resized, any toolbars inside the panel will not be resized.

    I'm also running Ext 3.4.

    ------------------------------------------
    EDIT: Toolbar resizing works just fine when the tbar's panel is contained within an Ext.Window/Ext.Viewport. It seems that it only breaks if the parent is an Ext.Panel that is being resized (either manually or via monitorResize).

    As an aside, I wasn't able to find any resizable/resizing panels with toolbars in the official Examples that aren't inside a Ext.Window/Ext.Viewport.

    --------------------------------------------
    Update: the bug appears to be somewhere within the panel.tbar.setWidth and panel.topToolbar.setSize functions. Once an integer is passed to these, it seems that passing another integer later has no effect. The Ext.Panel.onResize function calls these on each toolbar, but it seems that only the first call to these has any effect (so subsequent resizes fail to resize the panel).

  3. #3
    Sencha Premium Member
    Join Date
    Jun 2007
    Posts
    31
    Vote Rating
    0
    pianoroy is on a distinguished road

      0  

    Default Bump - can someone take a look at this?

    Bump - can someone take a look at this?


    I'd appreciate a reply, even if it is a [rejected] tag

    Thanks
    Roy

  4. #4
    Sencha User
    Join Date
    May 2012
    Posts
    5
    Vote Rating
    0
    jsundquist2 is on a distinguished road

      0  

    Default


    We appear to be having a similar issue with Mac OS X 10.6 using both Safari and Chrome. Is there any official response from Sencha in regards to this bug? Is there a suggested work around?

Thread Participants: 2