Results 1 to 9 of 9

Thread: How to align items inside an fbar in ext 3.0?

  1. #1
    Sencha User
    Join Date
    Jan 2008
    Location
    Toronto, Canada
    Posts
    481

    Default How to align items inside an fbar in ext 3.0?

    I remember one of the presenters at the conference showed a way to use the new fbar panel configuration option and split items inside of it. When I assign fbar option an array of items, they all are aligned to the right and I can't split them. '->' doesn't work. Does anyone remember or know how to do it?

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

    Default

    I think this is the buttonAlign config of Panel.

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

    Default

    Oh, I see, you want to split the alignment. You'll have to poke in there with Firebug to see what's there, and then postprocess it with DomQuery.

  4. #4
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996

    Default

    Can you post your code what you're trying to do?

  5. #5
    Sencha User
    Join Date
    Mar 2009
    Posts
    356

    Default

    Code:
      }, '->',
     '-',{
    my ext js site
    http://www.itoto4.com/

  6. #6
    Sencha User
    Join Date
    Jan 2008
    Location
    Toronto, Canada
    Posts
    481

    Default

    Quote Originally Posted by mjlecomte View Post
    Can you post your code what you're trying to do?
    Absolutely.

    Code:
    var win = new Ext.Window({
        title: 'Sample Window',
        width: 500,
        height: 300,
        fbar: [{
            xtype: 'checkbox',
            boxLabel: 'Check to do something useful'
        }, {
            text: 'Update'
        }, {
            text: 'Cancel'
        }]
    });
                
    win.show();
    I'm trying to split the checkbox and the buttons in the footer, so that the checkbox is aligned to the left and the buttons are to the right. I should be very straightforward, from what I remember seeing at the conference.

  7. #7
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996

    Default

    Edit: I wasn't at the conference, so this may be completely off base.

    Yeesh. I wrote an override only to figure this out afterwards.

    Code:
        var p = new Ext.Window({
            height:250,
            width: 500,
            buttonAlign: 'left', // anything but 'center' or 'right' and you can
                                     // use "-", and "->" to control alignment
            bbar: new Ext.Toolbar({
                items: [{
                    text: 'bbar Left'
                },'->',{
                    text: 'bbar Right'
                }]
            }),
            fbar: [{
                text: 'fbar Left'
            },'->',{
                text: 'fbar Right'
            }]
        });
        p.show();

  8. #8
    Sencha User
    Join Date
    Jan 2008
    Location
    Toronto, Canada
    Posts
    481

    Default

    Ha-ha... that was so easy! I can't believe I didn't think about it. Thanks buddy
    Consider this topic closed.

  9. #9
    Sencha User mschwartz's Avatar
    Join Date
    Nov 2008
    Location
    San Diego, Peoples' Republic of California
    Posts
    2,061

    Default

    It's be nice if you can use '->' twice in a config, too.

    Something like:

    Code:
    tbar = new Ext.Toolbar({
        items: [
            { text: 'button all the way left' },
            '->',
            { text: 'button centered' },
            '->',
            { text: 'button all the way right' }
        ]
    })

Posting Permissions

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