1. #1
    Ext User
    Join Date
    Jul 2008
    Posts
    30
    Vote Rating
    0
    allpuser is on a distinguished road

      0  

    Default How to align two buttons in two different side?

    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 - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    92
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    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 - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,506
    Vote Rating
    54
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    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 - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    92
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    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 - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,506
    Vote Rating
    54
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    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 - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,506
    Vote Rating
    54
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    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 - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,506
    Vote Rating
    54
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    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
    Ext User
    Join Date
    Jul 2008
    Posts
    30
    Vote Rating
    0
    allpuser is on a distinguished road

      0  

    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 - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,506
    Vote Rating
    54
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


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

  10. #10
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,506
    Vote Rating
    54
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    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%;
    }