1. #1
    Sencha User
    Join Date
    Jun 2011
    Location
    Bangalore, India
    Posts
    175
    Answers
    4
    Vote Rating
    2
    renganathan is on a distinguished road

      0  

    Default Answered: Grid Tbar - Right Alignment

    Answered: Grid Tbar - Right Alignment


    Hi ,

    I have two items in the tool bar . first item aligned in left and second item also aligned in left.

    but i want second item to be aligned in right

    i tried various ways , but it didn't work

    can somebody help me how to fix this problem?

    align right.png



    Code:
            tbar                        :
            [
             {
                text                   : '<b align="left">Search Result</b>',
                style                    : 
                {
                    align                : 'left'
                }
             },
            {
                text                    :'<b align="right">If lab not found, click here to sync</b>',
                iconCls                    :'sync',
                titleAlign                : 'right',
                style                    : 
                {
                    align                : 'right'
                },
                handler                    : function () 
                {
                    Ext.getBody().mask('Processing...please wait');
                    Ext.Ajax.request(
                    {   
                        url    : '../src/profile_user.class.php',
                        params: 
                        { 
                            action:'syncLabs'
                        }, 
                        success: function(response)
                        {              
                            Ext.getBody().unmask();
                            var resultDevice= eval('(' + response.responseText + ')');
                            if(resultDevice == 1) 
                            {
                                // show success message if profile saved successfily
                                Ext.Msg.alert('Success', 'Synced Successfully!');
                            }
                            Ext.getCmp('firstGrid').getStore().load();    
                    
                        },
                        //show alert if ajax request fails
                        failure: function(response)
                        {
                            Ext.getBody().unmask();
                            Ext.MessageBox.alert('Failed','Sync Failed');         
                        }                      
                    });
                }
            }
             
             
            ]
    Thanks,

    RENGANATHAN M G

  2. Hi renganathan,

    No need to give style config for left / right alignment of component in tbar config. use '->' for example-

    Code:
    tbar:[
            {
                xtype:'button',
                 text:'left'
            },'->',
            {
                xtype:'button',
                text:'right'
            }
        ],
    For more information see http://docs.sencha.com/ext-js/4-1/#!...oolbar.Toolbar

  3. #2
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,333
    Answers
    124
    Vote Rating
    85
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      0  

    Default put '->' before your component to give alignment right

    put '->' before your component to give alignment right


    Hi renganathan,

    No need to give style config for left / right alignment of component in tbar config. use '->' for example-

    Code:
    tbar:[
            {
                xtype:'button',
                 text:'left'
            },'->',
            {
                xtype:'button',
                text:'right'
            }
        ],
    For more information see http://docs.sencha.com/ext-js/4-1/#!...oolbar.Toolbar
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

Thread Participants: 1

Tags for this Thread