1. #11
    Ext User TheNakedPirate's Avatar
    Join Date
    Aug 2007
    Posts
    100
    Vote Rating
    0
    TheNakedPirate is on a distinguished road

      0  

    Default


    hga77

    What I did was subclass the Button class.

    You can edit the template code to do what you like

    Code:
    template: new Ext.Template(
        '<table border="0" cellpadding="0" cellspacing="0" class="x-btn-wrap"><tbody><tr>',
        '<td class="x-btn-left"><i> </i></td><td class="x-btn-center x-btn-center-nav"><em unselectable="on"><button class="x-btn-text" type="{1}">{0}</button></em></td><td class="x-btn-right"><i> </i></td>',
        "</tr></tbody></table>")

    include the code in my earlier post in your page after all the ext stuff and them add the style to your page as well it will all work for you.

  2. #12
    Ext User
    Join Date
    Aug 2007
    Posts
    26
    Vote Rating
    0
    dclaussen is on a distinguished road

      0  

    Default The solution

    The solution


    The problem is that the alignment is on the element with a class of "x-btn-center". To solve it, add a style as shown below.

    In your CSS:

    .my-button-name .x-btn-center {
    text-align: left;
    }
    In your Javascript:
    var button = new Ext.Button('my-button',{
    cls: "x-btn-text-icon my-button-name",
    text: "Press me!",
    })

  3. #13
    Ext User
    Join Date
    May 2009
    Posts
    214
    Vote Rating
    0
    Maxrunner is on a distinguished road

      0  

    Default


    This is not working for me, i have a treepanel with a tbar and bbar. the tbar was suposed to have two buttons aligned to the left but i cant align the second right after the first:

    css:
    Code:
    .my-button-name .x-btn-center {
    text-align: left;
    }
    </style>
    Code:
    Ext.onReady(function(){
    
        var expandir= new Ext.Button({
    
            text:'Expandir todos.',
            cls: "my-button-name",
            handler: function(){tree.expandAll();}
    
        })
    
        var colapsar= new Ext.Button({
            
            text:'Colapsar todos.',
            cls: "my-button-name",
            handler: function(){tree.collapseAll();}
    
        })
            
        
        var tree = new Ext.tree.ColumnTree({
            width: 600,
            height: 300,
            rootVisible:false,
            autoScroll:true,
            title: '${actionName}s',
            renderTo: 'tree-div',
    
            //footerCfg: {cls: 'whatevere', html: 'Whatever'},
            
            columns:[
                {header:'Titulo',
                width:420,
                dataIndex:'title'
            },{
                header:'Remover',
                width:60,
                dataIndex:'remove',
                
            }],
    
    
            loader: new Ext.tree.TreeLoader({
                //este parametro é responsavel por ir buscar os child nodes de cada parent node quando este é expandido
                //é enviado um parametro para o request com o nome node=""
                url        : '${pageContext.request.contextPath}/showOrganicaNode.do2',
                uiProviders:{
                  'col': Ext.tree.ColumnNodeUI
            }
            }
            ),
    
            //bottom bar
           bbar: new Ext.StatusBar({
                id: 'infoarea',
                //valores por defeito a usar quando os status é limpo/apagado
                defaultText: 'Para ver as sub-${actionName}s carregue no icon de expandir.',
                //defaultIconCls: 'default-icon',
                //valores de inicio
                text: 'Para ver as sub-${actionName}s carregue no icon de expandir.',
               // iconCls: 'ready-icon',
                //items: [" ", {text: 'Expandir todos.', handler: function(){tree.expandAll();},button: 'cd todos.', handler: function(){tree.expandAll();}} ]
                buttons: [
    
                       {
                           icon: "${pageContext.request.contextPath}/images/icon/icon-lixo.png",cls:"x-btn-text-icon",focus: true,
                           handler: function(){}
                       }
                        ],
     
            }),
            tbar: [ 
                    expandir,
                    colapsar
                  ],
    
                  items: [
                                  // <-- Add the action as a button
                        ],
    
    ......

  4. #14
    Ext User
    Join Date
    Nov 2009
    Posts
    1
    Vote Rating
    0
    chrishome1974 is on a distinguished road

      0  

    Default the CSS solution

    the CSS solution


    If you want to solve this in the CSS you need to override the styling with left align but then also remove the center margins on the table that wraps around the buttons. It is usually set to margin:0 auto but you need to set it to margin:0

    .x-panel-btns-ct .x-panel-btns-center, .x-btn-center-nav {
    text-align:left;
    }

    .x-panel-btns-ct .x-panel-btns-center table {
    margin:0;
    }

  5. #15
    Sencha User
    Join Date
    May 2011
    Location
    Toronto
    Posts
    13
    Vote Rating
    -2
    SenchaGuru has a little shameless behaviour in the past

      0  

    Default


    Old thread, .. but i had the same problem ,..

    How to align text in a button?

    Here's what worked for me,..

    Code:
                   {
                        xtype: 'button',
                        text: '<table><tr><td style="text-align:left">Button 1</td></tr></table> ',
                    }
    Anyone with a more elegant solution?

  6. #16
    Sencha User
    Join Date
    Mar 2012
    Location
    China
    Posts
    13
    Vote Rating
    -1
    youngshine is an unknown quantity at this point

      0  

    Default


    text: '<div style="text-align:left;">tap me<div>',

  7. #17
    Sencha User
    Join Date
    Dec 2011
    Posts
    1
    Vote Rating
    0
    ngocseo is on a distinguished road

      0  

    Default


    thank you very much

  8. #18
    Sencha User
    Join Date
    Jul 2013
    Posts
    1
    Vote Rating
    0
    mmikic is on a distinguished road

      0  

    Default


    Quote Originally Posted by SenchaGuru View Post
    Old thread, .. but i had the same problem ,..

    How to align text in a button?

    Here's what worked for me,..

    Code:
                   {
                        xtype: 'button',
                        text: '<table><tr><td style="text-align:left">Button 1</td></tr></table> ',
                    }
    Anyone with a more elegant solution?
    Not sure for older version, but in 4.1.1 and newer you can simply use this:

    ..
    xtype: 'button',
    textAlign:'left',
    ..