Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: (NEWBIE) Absolute Layout not positioning components

  1. #1

    Default (NEWBIE) Absolute Layout not positioning components

    Hello,

    I'm trying to do something really simple, render a panel with two buttons positioned one over the other, with some blank space between. Here's the code:
    Code:
    var panelBotones = new Ext.Panel({
        layout: 'absolute',
        frame: true,
        width: 88,
        height: 350,
        items:[
            {
                xtype: 'button',
                x: 15,
                y: 10,            
                text: 'Agregar ->'            
            },{
                xtype: 'button',
                x: 15,
                y: 200,        
                text: '<- Eliminar'            
            }
        ]
        
    });
    Attached you'll see how it si rendered in Firefox and, even worse, in IE6. No Firebug errors are thrown.

    I think this must be reaaaally simple, but i've looked through all the examples and can't see anything wrong with my code!

    Any hint?

    Thanks a lot!
    Attached Images Attached Images

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

    Default

    In Ext 2.1, a Button is not a BoxComponent, and so cannot participate in a layout.

    In Ext 3, Buttons are BoxComponents.

  3. #3

    Default

    ok! so i guess i have to put the each button into a panel and then add them to the main panel.


    Thanks a lot!!

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

    Default

    Obviously not as a child element of a Panel, but as a footer Button using the buttons config. Might work.

  5. #5

    Default

    Quote Originally Posted by Animal View Post
    Obviously not as a child element of a Panel, but as a footer Button using the buttons config. Might work.

    Why 'obviously'? Actually it looks better when i add the buttons as child elements; as footer buttons, there's some automatic left padding added...

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

    Default

    Yes, you're right, you'll be OK with that.

    ContainerLayout (The default layout Manager) does not attempt to perform any sizing operations, so it actually doesn't matter whether what it renders is a BoxComponent. It can just be a Component.

    Just use a Container rather than a Panel though:

    Code:
    {
        xtype: 'container',
        autoEl: {},
        items: {
            xtype: 'button',
            x: 15,
            y: 10,            
            text: 'Agregar ->'
        }
    }

  7. #7

    Default

    I'm afraid that using a container is not working:

    Code:
    var panelBotones = new Ext.Container({
        layout: 'absolute',
        //frame: false,
        width: 85,
        height: 350,
        autoEl: {},    
        items:[
            {            
                x: 2,
                y: 100,            
                xtype: 'button',
                width: 83,
                text: 'Agregar ->'    
                                                    
            },{            
                x: 2,
                y: 280,                                
                xtype: 'button',
                width: 83,
                text: '<- Eliminar'                
            }
        ]    
    });
    because the buttons, again, overlap. But don't worry, using panels, and buttons as children of them, is more than ok for me. Thanks again!!



    Quote Originally Posted by Animal View Post
    Yes, you're right, you'll be OK with that.

    ContainerLayout (The default layout Manager) does not attempt to perform any sizing operations, so it actually doesn't matter whether what it renders is a BoxComponent. It can just be a Component.

    Just use a Container rather than a Panel though:

    Code:
    {
        xtype: 'container',
        autoEl: {},
        items: {
            xtype: 'button',
            x: 15,
            y: 10,            
            text: 'Agregar ->'
        }
    }

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

    Default

    NO.

    You ignored what I said.

    Read it again.

    Put EACH BUTTON IN A CONTAINER.

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

    Default

    Code:
    var panelBotones = new Ext.Container({
        layout: 'absolute',
        //frame: false,
        width: 85,
        height: 350,
        autoEl: {},    
        items:[{
            xtype: 'container',
            autoEl: {},
            items: {       
               x: 2,
               y: 100,            
               xtype: 'button',
               width: 83,
               text: 'Agregar ->'    
            }                            
        },{
            xtype: 'container',
            autoEl: {},
            items: {
                x: 2,
                y: 280,                                
                xtype: 'button',
                width: 83,
                text: '<- Eliminar'                
            }
        }]
    });

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

    Default

    On another note, are you really sure you need to use AbsoluteLayout?

    Why not table layout?

Page 1 of 2 12 LastLast

Posting Permissions

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