Results 1 to 4 of 4

Thread: Panel with BorderLayout and Toolbar moves by itself

  1. #1

    Default Panel with BorderLayout and Toolbar moves by itself

    Ext3.0 / FireFox / Ubuntu

    I noticed a problem with BorderLayout and tbar. Hope this is the appropriate place for reporting it.

    When the tbar is set on a panel with borderLayout and north, center and south regions, then the regions start moving by themselves, like their height is being changed...

    Pasted below if a simple example that reproduces the problem. It basically shows a ViewPort containing a Panel, the latter with a BorderLayout and north, center and south regions. The regions are all filled with panels containing a button.

    The code :

    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="js/ext-3.0.0/resources/css/ext-all.css" />
    <script type="text/javascript" src="js/ext-3.0.0/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="js/ext-3.0.0/ext-all-debug.js"></script>
    <title id="page-title">Title</title>
    <script type="text/javascript">
            Ext.BLANK_IMAGE_URL = 'js/ext-3.0.0/resources/images/default/s.gif';
            Ext.onReady(function() {
                Ext.QuickTips.init();
    
                var north = new Ext.Panel({
                    title: 'north panel',
                    region: 'north',
                    layout: 'fit',
                    items: [new Ext.Button({text:'north btn'})]
                });
    
                var center = new Ext.Panel({
                    title: 'center panel',
                    region: 'center',
                    layout: 'fit',
                    items: [new Ext.Button({text:'center btn'})]
                });
    
                var south = new Ext.Panel({
                    title:'south panel',
                    region: 'south',
                    layout: 'fit',
                    items: [new Ext.Button({text:'south btn'})]
                });
    
                var panel = new Ext.Panel({
                    layout:'border',
                    // comment next line it'll be okay !
                    tbar: new Ext.Toolbar({items: [{text:'btn1'},{text:'btn2'}]}),
                    items: [north, center, south]
                });
    
                var viewPort = new Ext.Viewport({
                    layout: 'fit',
                    items: [panel]
                });
    
                viewPort.render(Ext.getBody());
    
            });
        </script>
    </head>
    <body>
    </body>
    </html>
    I'm quite a noob with ExtJS, so I might have missed something (all apoligies in this case)... but it looks like a bug to me.

  2. #2
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    That's just freakish code.

    What are you wanting to achieve? Describe it and we'll help you get there.

    You have to size north and south regions with a height. fit layout applies its own height to its children. And you have configured no height, so no toolbar visible.

    Fit layout in the center with a toolbar? You noticed the one HUUUGE button?!

    Why overnest a border layout in a fit layout Viewport? Just create a border layout Viewport??

    Just start slower and simpler.

  3. #3

    Default

    Thanks for the reply.

    What I need basically is a Panel with north/center/south regions and a toolbar at the top of it. Nothing really "freakish". People will integrate this Panel inside their own ViewPort in the end (or anywhere else).

    Stuff like :
    Panel
    - tbar
    - north -> Panel
    - center -> Panel
    - south -> Panel

    In the real app (which I won't post here for obvious reasons), of course, I have much more complicated content in north/center/south regions. I narrowed my proplem down to the code sample I've posted, thinking it would allow extjs devs to understand my issue (code speaks). The buttons are there only to put something in the panels, I could have put anything else in them (labels, whatever)...

    The layout works fine without the tbar, and without setting any size. I have my north, center and south btns layed out fine, on top of the other. for north and south regions, the button has a default height. The center one gets stretched.

    Now I'm setting the tbar on my main wrapping panel (the one with borderLayout), and the UI starts moving by itself.

    Is this behavior expected ???

    *That* would be "freakish" IMHO... :P

    Now I've added height to my north and south panels as you've suggested (see pasted code below), and the bug is still there. Any idea ?

    Thanks

    Remi

    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="js/ext-3.0.0/resources/css/ext-all.css" />
    <script type="text/javascript" src="js/ext-3.0.0/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="js/ext-3.0.0/ext-all-debug.js"></script>
    <title id="page-title">Title</title>
    <script type="text/javascript">
            Ext.BLANK_IMAGE_URL = 'js/ext-3.0.0/resources/images/default/s.gif';
            Ext.onReady(function() {
                Ext.QuickTips.init();
    
                var north = new Ext.Panel({
                    title: 'north panel',
                    region: 'north',
                    layout: 'fit',
                    height: 100,
                    items: [new Ext.Button({text:'north btn'})]
                });
    
                var center = new Ext.Panel({
                    title: 'center panel',
                    region: 'center',
                    layout: 'fit',
                    items: [new Ext.Button({text:'center btn'})]
                });
    
                var south = new Ext.Panel({
                    title:'south panel',
                    region: 'south',
                    layout: 'fit',
                    height: 100,
                    items: [new Ext.Button({text:'south btn'})]
                });
    
                var panel = new Ext.Panel({
                    layout:'border',
                    tbar: new Ext.Toolbar({items: [{text:'btn1'},{text:'btn2'}]}),                
                    items: [north, center, south]
                });
    
                var viewPort = new Ext.Viewport({
                    layout: 'fit',
                    items: [panel]
                });
    
                viewPort.render(Ext.getBody());
    
            });
        </script>
    </head>
    <body>
    </body>
    </html>

  4. #4

    Default

    Hi there,

    I thought I had workarounded this bug, but it came back to haunt me...

    The code I have posted reproduces the problem on my side on both linux/FF and XP/IE8, under certain conditions : it depends on the browser's font size setting...
    I discovered the bug was still there by testing on another browser which has a smaller font settings than mine. The layout started to animate itself (and eventually push some components out of the screen), and it stopped when I ctrl/mouse-wheeled to change the font size !

    Again, all apologies if my post doesn't follow the usual bug submission process.

    Cheers

    Remi

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •