Hybrid View

  1. #1
    Ext User
    Join Date
    Mar 2007
    Posts
    52
    Vote Rating
    2
    exo is on a distinguished road

      2  

    Default Toolbar button style

    Toolbar button style


    Myself I find the look and feel of the toolbar buttons in Exts default theme a bit lacking. From a users' point of view I don't feel it's immediately obvious for a user that the button can be clicked upon, especially when the button is just text and no icon.

    I found a suggestion by Animal here but that still didn't satisfy me. So for everyone (anyone) who feels the same way I propose a different solution, make the buttons look like the way buttons look in Ext outside of a toolbar. So instead of:
    old.jpg

    They could look like:
    new.jpg


    In order to do this use the following CSS to make all toolbar buttons this way:
    PHP Code:
    /* This gives toolbar buttons the regular button style */
    .x-toolbar .x-btn-left backgroundurl(resources/images/default/button/btn-sprite.gifno-repeat 0px 0px;}
    .
    x-toolbar .x-btn-center backgroundurl(resources/images/default/button/btn-sprite.gifrepeat-x 0px -42pxtext-aligncenter;}
    .
    x-toolbar .x-btn-right backgroundurl(resources/images/default/button/btn-sprite.gifno-repeat 0px -21px;}

    .
    x-toolbar .x-btn-over .x-btn-leftbackgroundurl(resources/images/default/button/btn-sprite.gifno-repeat 0px -63px;}
    .
    x-toolbar .x-btn-over .x-btn-centerbackgroundurl(resources/images/default/button/btn-sprite.gifrepeat-x 0px -105px;}
    .
    x-toolbar .x-btn-over .x-btn-rightbackgroundurl(resources/images/default/button/btn-sprite.gifno-repeat 0px -84px;}

    .
    x-toolbar .x-btn-click .x-btn-center, .x-btn-menu-active .x-btn-centerbackground-position:-126px;    }
    /* end block */ 
    OR, if you only want to apply the style on a few buttons, use 'cls: x-form-toolbar-standardButton' and use the following CSS

    PHP Code:
    /* This gives toolbar buttons with cls: x-form-toolbar-standardButton the regular button style */
    .x-toolbar .x-form-toolbar-standardButton .x-btn-left backgroundurl(resources/images/default/button/btn-sprite.gifno-repeat 0px 0px;}
    .
    x-toolbar .x-form-toolbar-standardButton .x-btn-center backgroundurl(resources/images/default/button/btn-sprite.gifrepeat-x 0px -42pxtext-aligncenter;}
    .
    x-toolbar .x-form-toolbar-standardButton .x-btn-right backgroundurl(resources/images/default/button/btn-sprite.gifno-repeat 0px -21px;}

    .
    x-toolbar .x-form-toolbar-standardButton.x-btn-over .x-btn-leftbackgroundurl(resources/images/default/button/btn-sprite.gifno-repeat 0px -63px;}
    .
    x-toolbar .x-form-toolbar-standardButton.x-btn-over .x-btn-centerbackgroundurl(resources/images/default/button/btn-sprite.gifrepeat-x 0px -105px;}
    .
    x-toolbar .x-form-toolbar-standardButton.x-btn-over .x-btn-rightbackgroundurl(resources/images/default/button/btn-sprite.gifno-repeat 0px -84px;}

    .
    x-toolbar .x-form-toolbar-standardButton.x-btn-click .x-btn-center, .x-btn-menu-active .x-btn-centerbackground-position:-126px;    }
    /* end block */ 
    Maybe it can help someone .

  2. #2
    Ext User drew's Avatar
    Join Date
    Mar 2007
    Location
    Melbourne
    Posts
    95
    Vote Rating
    0
    drew is on a distinguished road

      0  

    Default


    I don't think your attachments are rending properly
    they seem fine now.

    ...I do like the idea.
    www.firedb.com - configurable web database

    Request a demo account here - http://www.firedb.com/register.php

  3. #3
    Ext JS Premium Member
    Join Date
    Mar 2007
    Location
    France
    Posts
    223
    Vote Rating
    0
    tof is on a distinguished road

      0  

    Default


    Sometime I need it, too; then I only do :
    PHP Code:
    Ext.Toolbar.prototype.autoCreate.cls "x-mytoolbar"
    (Not perfect, not better, just another method, HTH)
    Christophe Badoit
    aka Tof

    My work : Lesiteimmo.com - Unobstrusive ExtJs Powered !

  4. #4
    Sencha Premium Member
    Join Date
    Jun 2008
    Posts
    322
    Vote Rating
    4
    Scorpie is on a distinguished road

      0  

    Default


    Thanks!
    I`m from Holland!

  5. #5
    Ext JS Premium Member
    Join Date
    Sep 2007
    Location
    Pennsyvania, USA
    Posts
    232
    Vote Rating
    0
    fzammetti is on a distinguished road

      0  

    Default


    Unless I'm mistaken, this doesn't work for Ext JS 2.x... does anyone by chance have this updated for 2.x? I'm being asked to make our toolbar buttons "stand out" more, and this would be the perfect solution.

  6. #6
    Ext JS Premium Member
    Join Date
    Mar 2008
    Location
    Phoenix, AZ
    Posts
    627
    Vote Rating
    10
    zombeerose will become famous soon enough zombeerose will become famous soon enough

      0  

    Default


    Here is an update for Ext 3.0 that applies to all toolbar buttons

    Code:
    .x-toolbar .x-btn-tl { background-position: 0 0; }
    .x-toolbar .x-btn-tr { background-position: -3px 0; }
    .x-toolbar .x-btn-tc { background-position: 0 -6px; }
    .x-toolbar .x-btn-ml { background-position: 0 -24px; }
    .x-toolbar .x-btn-mr { background-position: -3px -24px; } 
    .x-toolbar .x-btn-mc { background-position: 0 -1096px; }
    .x-toolbar .x-btn-bl { background-position: 0 -3px; }
    .x-toolbar .x-btn-br { background-position: -3px -3px; }
    .x-toolbar .x-btn-bc { background-position: 0 -15px; }

  7. #7
    Sencha User demongloom's Avatar
    Join Date
    Apr 2008
    Location
    Israel
    Posts
    30
    Vote Rating
    3
    demongloom is on a distinguished road

      1  

    Default



    My toolbar buttons style. I slightly modified original background to make regular button be more visible as button. Before (without light border) some users acts button as piece of text.

  8. #8
    Sencha User
    Join Date
    Oct 2012
    Posts
    1
    Vote Rating
    0
    jin_yun_guang is on a distinguished road

      0  

    Default



  9. #9
    Sencha User
    Join Date
    Jun 2012
    Posts
    3
    Vote Rating
    0
    trubit is on a distinguished road

      0  

    Default


    This follows themes colors and is propably easiest way how to do it in Ext 4.1
    Code:
    { xtype: 'button', 
        text: 'Button',
        listeners: {
            render: function() {
                this.addCls("x-btn-default-small");
                this.removeCls("x-btn-default-toolbar-small");
            }
        }
    }

  10. #10
    Sencha User
    Join Date
    Nov 2010
    Posts
    3
    Vote Rating
    0
    yufulou is on a distinguished road

      0  

    Default


    Quote Originally Posted by trubit View Post
    This follows themes colors and is propably easiest way how to do it in Ext 4.1
    Code:
    { xtype: 'button', 
        text: 'Button',
        listeners: {
            render: function() {
                this.addCls("x-btn-default-small");
                this.removeCls("x-btn-default-toolbar-small");
            }
        }
    }
    It does not work in IE 8...