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

Thread: Hbox overflow

  1. #1
    Sencha User
    Join Date
    Aug 2009
    Posts
    63

    Default Hbox overflow

    Have a way for I put the component below when the width overflows on hbox layout?

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

    Default

    Sounds like you need my FloatLayout layout manager.

  3. #3
    Sencha User
    Join Date
    Aug 2009
    Posts
    63

    Default

    Yes, this is exactly what I need.

    Thank you for helping me.

  4. #4
    Sencha User
    Join Date
    Aug 2009
    Posts
    63

    Default

    When I set the horizontalAlign to right, the layout only moves the component to the right side. That is correct? I think that the right behavior is do that and reverse the component sequence too.

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

    Default

    "right"? According to what?

  6. #6
    Sencha User
    Join Date
    Aug 2009
    Posts
    63

    Default

    The following code should generate the sequence Panel 2, Panel 1 on the right side, right? The float property does that. But The code generates Panel 1, Panel 2 on the right side and don't makes the inversion.

    Code:
    var window = new Ext.Window({
            layout : "float",
            layoutConfig : {
                horizontalAlign : "right"
            },
            height : 300,
            width : 300,
            defaults : {
                frame : true,
            },
            items : [{
                title : 'Panel 1',
                height : 100,
                width : 120
            },{
                title : 'Panel 2',
                height : 75,
                width : 100
            }]
        });
        window.show();
    Is something I'm doing wrong? Maybe horizontalAlign isn't the right property. The documentation says the layout is similar to float property, so the behavior that I'm expecting is correct.

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

    Default

    Yes, it should work. There's a bug somewhere.

    adjustRow should bump all items in the row "spareWidth" pixels to the right which should right justify the row.

    Code:
        adjustRow: function(boxes, rowStart, rowEnd, rowHeight, rowWidth, availWidth) {
            var i, c, h, j = 0, spareWidth = availWidth - rowWidth, gaps = rowEnd - rowStart, alignmentIncrement = 0;
    
            switch (this.horizontalAlign) {
                case 'middle':
                case 'center':
                    alignmentIncrement = Math.max(spareWidth / 2, 0);
                    break;
                case 'right':
                    alignmentIncrement = Math.max(spareWidth, 0);
                    break;
                case 'justify':
                    if (gaps) {
                        j = Math.max(spareWidth / gaps, 0);
                    }
            }
    See if you can figure it out.

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

    Default

    Oh, you mean RTL flow?

    No, it doesn't do that yet.

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

    Default

    Change this fn

    Code:
        updateChildBoxes: function(b) {
            var a = {},
                i = 0,
                l = b.length;
            for (; i < l; i++) {
                if (this.animate) {
                    a = {
                        top: {
                            to: b[i].top
                        }
                    };
                    if (this.rtl) {
                        a.right = {
                            to: b[i].left
                        };
                    } else {
                        a.left = {
                            to: b[i].left
                        };
                    }
                    Ext.lib.Anim.motion(b[i].component.getPositionEl().dom, a).animate();
                } else {
                    b[i].component.setPosition([b[i].left, b[i].top]);
                }
            }
        },
    Then Add the extra CSS rule so that the positioning using the "right" style works.

    Code:
    .x-box-item {
        left: auto;
    }
    There you go. The "rtl" config option.

  10. #10
    Sencha User
    Join Date
    Aug 2009
    Posts
    63

    Default

    It works, thank you.

    I've changed the "animate if" to down, now it also works without animate. But... after the changes, the property horizontalAlign : "right" is ignored by the layout. I'll try to fix it, I'll post the results as soon as I can.

Page 1 of 2 12 LastLast

Similar Threads

  1. hbox layout
    By nick saint in forum Ext 3.x: Help & Discussion
    Replies: 8
    Last Post: 21 Apr 2010, 2:52 AM
  2. sliderfield in hbox
    By enpasos in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 2 Apr 2010, 2:51 AM
  3. styling hbox
    By Stephan123 in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 19 Nov 2009, 6:42 AM
  4. Using HBox with Form
    By AndyDavey in forum Ext 3.x: Help & Discussion
    Replies: 3
    Last Post: 4 Sep 2009, 4:08 AM

Posting Permissions

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