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

      0  

    Question [Solved] How do I left align button text

    [Solved] How do I left align button text


    I have been playing around with the style elements for ages and I just can't seem to crack it

    Reason for wanting it is that I want to use buttons on my navigation menu. I want them all the same width and the text and icon left aligned.

    Personally I would have chosen to do it with regular hyperlinks but the people that care about these things want buttons.

    Code:
        var navigationButtons = Ext.get('navigation-buttons');
    
        new Ext.Button(navigationButtons, {
              text: 'People'
            , tooltip: ''
            , cls: 'x-btn-text-icon'
            , style:' ??? help ??? '
            , icon:'somecuteicon.png'
            , scope: this
            , minWidth: 175
            , handler : function()
            {
                self.location = 'siteRoot/Home/url.rails';
            }
        });
    Last edited by TheNakedPirate; 18 Sep 2007 at 9:28 PM. Reason: solved

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

      0  

    Default


    Actually anything sexier than hyperlinks would be a great help if the button text can't be aligned.

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

      0  

    Default


    No help...OK, I guess it can't be done then.

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

      0  

    Lightbulb


    Well after poking around in the code I came up with this

    Code:
    /**
     * @author pgiles
     * 
     * @class Lib.form.NavButton
     * @extends Ext.Button 
     * adds second class to the button template that you can override
     */
    
    Ext.namespace('Lib.form');
    
    Lib.form.NavButton = function(renderTo,config){
        Lib.form.NavButton.superclass.constructor.call(this, renderTo,config);
    };
    
    Ext.extend(Lib.form.NavButton, Ext.Button, {
        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>")
    })
    I added a new class to the template and then added this to my css

    Code:
    .x-btn-center-nav{
        text-align:left;
    }
    and I got the desired effect

  5. #5
    Ext User violinista's Avatar
    Join Date
    Apr 2007
    Location
    Serbia
    Posts
    293
    Vote Rating
    0
    violinista is on a distinguished road

      0  

    Default


    Or:

    Code:
        var navigationButtons = Ext.get('navigation-buttons');
    
        new Ext.Button(navigationButtons, {
              text: 'People'
            , tooltip: ''
            , cls: 'x-btn-text-icon'
            , style:' text-align:left'
            , icon:'somecuteicon.png'
            , scope: this
            , minWidth: 175
            , handler : function()
            {
                self.location = 'siteRoot/Home/url.rails';
            }
        });
    "It is better to be young, pretty and rich instead old, ugly and poor."
    (c) Alan Ford.

  6. #6
    Sencha User
    Join Date
    Sep 2007
    Posts
    73
    Vote Rating
    0
    hga77 is on a distinguished road

      0  

    Default


    I'm having the exact same problem. I tried violinista's method but that did'nt work.

    It should work though, I don't understand?!?!

    TheNakedPirate, can you please explain how you manage to fix this in more details please

    Thanks

  7. #7
    Ext User violinista's Avatar
    Join Date
    Apr 2007
    Location
    Serbia
    Posts
    293
    Vote Rating
    0
    violinista is on a distinguished road

      0  

    Default


    try: style:'text-align:left !important'
    "It is better to be young, pretty and rich instead old, ugly and poor."
    (c) Alan Ford.

  8. #8
    Sencha User
    Join Date
    Sep 2007
    Posts
    73
    Vote Rating
    0
    hga77 is on a distinguished road

      0  

    Default


    no that didnt work also.

    Here is a snippet of the js:

    Code:
    		init : function ()
    		{
    			tb = new Ext.Toolbar('top-nav-div');
    			tb.addButton({
    									text: 'Home Admin',
    									desc: 'home',
    									//cls: 'x-btn-text-icon scroll-bottom',
    									icon:'',
    									style:'text-align:left !important',
    									minWidth:148,
    									tooltip: '',
    									scope: this,
    									handler: menuHandler
    								});
    
    			tb = new Ext.Toolbar('middle-nav-div');
    			tb.addButton({
    									text: 'Manage Newsletters',
    									desc: 'manage_newsletters',
    									//cls: 'x-btn-text-icon scroll-bottom', 
    									icon:'',
    									style:'text-align:left !important',
    									minWidth:148,
    									tooltip: '',
    									scope: this,
    									handler: menuHandler
    								});
    
    			tb = new Ext.Toolbar('bottom-nav-div');
    			tb.addButton({
    									text: 'Add Newsletters',
    									desc: 'add_newsletter',
    									//cls: 'x-btn-text-icon scroll-bottom', 
    									icon:'',
    									style:'text-align:left !important',
    									minWidth:148,
    									tooltip: '',
    									scope: this,
    									handler: menuHandler
    								});
    ...
    ...
    ...
    And html:
    Code:
        <div id="north-div"></div>
        <div id="south-div"></div>
        <div id="east-div"></div>
        <div id="west-div">
        	<div id="nav-div">
                <div id="top-nav-div"></div>
                <div id="middle-nav-div"></div>
                <div id="bottom-nav-div"></div>
            </div>
        </div>
        <div id="center-div">
            <div id="center-tb"></div>
            <iframe id="center-iframe" frameborder="0" scrolling="auto" style="border:0px none;"></iframe>
        </div>
    the divs, "top-nav-div", "middle-nav-div" and "bottom-nav-div". Here we are adding the items...

    I'm sure this is very easy to do. Im not that experienced with ext to fix it

  9. #9
    Ext User violinista's Avatar
    Join Date
    Apr 2007
    Location
    Serbia
    Posts
    293
    Vote Rating
    0
    violinista is on a distinguished road

      0  

    Default


    Try to edit Css directly in Firebug and see what happens!
    "It is better to be young, pretty and rich instead old, ugly and poor."
    (c) Alan Ford.

  10. #10
    Sencha User
    Join Date
    Sep 2007
    Posts
    73
    Vote Rating
    0
    hga77 is on a distinguished road

      0  

    Default


    I did that but it still didn't work!

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar