Page 1 of 3 123 LastLast
Results 1 to 10 of 25

Thread: How to align two buttons in two different side?

  1. #1

    Default How to align two buttons in two different side?

    Hi All,

    I have a requirement that, one button would display in the lef side and the other will in the right side. Like..
    --------------------------------------------------------------------
    |[Save] ---------------------------------------------------[Cancel]|
    --------------------------------------------------------------------

    I now that there is one properties named "buttonAllign" can be set value as "left"/"center" or "right" for all the buttons. But I want to display the buttons with two different alignment.

    Can someone help me please, how to do that?

    Thanks,
    AllPUser

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

    Default

    You'll have to manually insert a filler, e.g.

    Code:
    new Ext.Window({
    	title: 'Test',
    	width: 400,
    	height: 200,
    	buttonAlign: 'left',
    	buttons: [{
    		text: 'First button'
    	},{
    		text: 'Second button'
    	}],
    	listeners: {
    		render: function(c) {
    			var tr = c.footer.child('.x-panel-btns tr:first');
    			Ext.DomHelper.insertAfter(tr.dom.childNodes[0], {tag: 'td', style: 'width: 100%;'});
    		}
    	}
    }).show();

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

    Default

    Do it with CSS. Give each position:absolute, and use the right and left style to position them left and right.

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

    Default

    Quote Originally Posted by Animal View Post
    Do it with CSS. Give each position:absolute, and use the right and left style to position them left and right.
    Wouldn't that fail when moving or resizing the container?

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

    Default

    Floating works:

    Code:
    new Ext.Window({
            cls: 'left-right-buttons',
    	title: 'Test',
    	width: 400,
    	height: 200,
    	buttons: [{
    		text: 'First button',
                    cls: 'x-btn-left'
    	},{
    		text: 'Second button'
    	}]
    }).show();
    Plus

    Code:
    .left-right-buttons .x-panel-btns {
        text-align: 'center'
    }
    
    .left-right-buttons .x-panel-btns table {
        width: 100%;
    }
    
    .left-right-buttons .x-panel-btns .x-btn-left {
        float: left;
    }

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

    Default

    But positioning absolute withing a DOM element that has position:relative positions within that container.

    And only specifying left:0px on the element you want pinned left and and right:0px on the element you want pinned right keeps them in place.

    That's used in several places in Ext.

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

    Default

    See the tab scroller buttons in TabPanels. They are positioned absolute within the tab strip scroller element. Each has either left:0px or right:0px. The top:0px on both is redundant - you can kill that style attribute with Firebug and they will still be correct, all you need to nudge is the left/right position.

  8. #8

    Default

    Thanks Animal for your reply. I tried to do the same. This working fine for two buttons. If three buttons are present then buttons spreading like the following attached image...



    or

    --------------------------------------------------------------------
    |[First] [Second]---------------------------------------------[Third]|
    --------------------------------------------------------------------


    Please help me to do that.

    Thanks

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

    Default

    Perhaps you should be using a Toolbar rather than default Panel Buttons.

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

    Default

    Although it can be done like this:

    Code:
    new Ext.Window({
            cls: 'left-right-buttons',
    	title: 'Test',
    	width: 400,
    	height: 200,
    	buttons: [{
    		text: 'First button',
                    cls: 'x-btn-left'
    	},{
    		text: 'Second button',
                    cls: 'x-btn-left',
                    ctCls: 'width_100'
    	},{
    		text: 'Second button'
    	}]
    }).show();
    Plus

    Code:
    .width_100 {
        width: 100%;
    }

Page 1 of 3 123 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
  •