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
    86
    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,498
    Vote Rating
    47
    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
    86
    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,498
    Vote Rating
    47
    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,498
    Vote Rating
    47
    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,498
    Vote Rating
    47
    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,498
    Vote Rating
    47
    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,498
    Vote Rating
    47
    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%;
    }

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi