Results 1 to 5 of 5

Thread: how to use layout or other metaphors to horizontally arrange buttons.

  1. #1
    Ext JS Premium Member
    Join Date
    Jul 2009
    Location
    Seattle, Washington USA
    Posts
    200

    Default how to use layout or other metaphors to horizontally arrange buttons.

    I have tried to look at the example where layouts were used to align items, but they use a button to apply them indirectly so it isn't clear at all how you implement this without the button.

    I have a textbox with label and buttons. The textbox should be on the left and the buttons right justified, or just all three to the left.
    The current arrangement just stacks them. Everything I've tried with layout prevents them from rendering at all, so I am showing the raw items.

    Code:
    var ButtonLayout = new Ext.Container
    (
        {
    
            items: 
            [
                {
                    html: '<div class="SD_lblA">Post Title</div><div><input type="text" id="tbPostTitle" style="width: 600px"></div>',
                    width: 620
                },{
                    text: 'Save Post',
                    xtype: 'button',
                    handler: SavePost
                },{
                    text: 'Cancel',
                    xtype: 'button',
                    handler: CancelPost
                }
            ]
        }
    );

  2. #2
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,258

    Default

    Look at the hbox layout example.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  3. #3
    Ext JS Premium Member
    Join Date
    Jul 2009
    Location
    Seattle, Washington USA
    Posts
    200

    Default

    I did, but as I said, it applies the layout using a script that runs when you click the buttons.

    I would rather do this directly.

    There isn't anything anywhere on the vast document page that lists the layout types in one place and shows you an actual example of using each. It would take someone about an hour or two to do this, and then you wouldn't have to put up with questions like this.

    Merely listing properties and methods of the code only goes so far.

  4. #4
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    Something like:
    Code:
    var ButtonLayout = new Ext.Container({
        layout: 'column',
        items: [{
            xtype: 'box',
            autoEl: {tag: 'div', children: [
            	{tag: 'div', cls: 'SD_lblA', cn: 'Post Title'},
            	{tag: 'input', type: 'text', id: 'tbPostTitle', style:'width: 600px'}
            ]},
            width: 620
        },{
            text: 'Save Post',
            xtype: 'button',
            handler: SavePost,
            width: 75
        },{
            text: 'Cancel',
            xtype: 'button',
            handler: CancelPost,
            width: 75
        }]
    });

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

    Default

    Quote Originally Posted by geewhizbang View Post
    I did, but as I said, it applies the layout using a script that runs when you click the buttons.
    No it doesn't.

Posting Permissions

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