1. #1
    Ext User
    Join Date
    Mar 2010
    Vote Rating
    tnichols1 is on a distinguished road


    Default Showing the border of a button on the toolbar without having to mouse over it

    I was unable to find a property in a toolbar or button - to always show the borders on a button.

    I found a way to make the button appear "mousedOver" or "pressed", but neither looked appropriate for the initial state of a button.

    I searched for a solution and did not find one. So I am posting mine in case it helps anyone else out.

    1. Give your button a new class definition. I called mine "x-btn-outline".


        bbar:  new Ext.Toolbar({
          items: [ '->', 
            xtype: 'button'
            , id: 'btnViewReport'
            , text: 'View Report'    
            , cls: 'x-btn-text-icon x-btn-outline'
            , icon: '/images/icon_viewall.gif'
            , scale: 'small'
            , handleMouseEvents: true
            , listeners : {
                   click : function() {doViewReport_ExtJs(); }    
    2. Then define your new css style:
    .x-btn-outline .x-btn-tl{
        background-position: -6px 0;
    .x-btn-outline .x-btn-tr{
        background-position: -9px 0;
    .x-btn-outline .x-btn-tc{
        background-position: 0 -9px;
    .x-btn-outline .x-btn-ml{
        background-position: -6px -24px;
    .x-btn-outline .x-btn-mr{
        background-position: -9px -24px;
    .x-btn-outline .x-btn-bl{
        background-position: -6px -3px;
    .x-btn-outline .x-btn-br{
        background-position: -9px -3px;
    .x-btn-outline .x-btn-bc{
        background-position: 0 -18px;

  2. #2
    Sencha User
    Join Date
    Mar 2012
    Vote Rating
    hieu79vn is an unknown quantity at this point




    Why it doesnt work with me? (((

Similar Threads

  1. How to display a button's border while on a toolbar?
    By csoon1 in forum Ext 3.x: Help & Discussion
    Replies: 3
    Last Post: 28 Dec 2014, 2:18 PM
  2. Icon not showing in toolbar button (with menu items)
    By RobWilson in forum Ext 3.x: Help & Discussion
    Replies: 6
    Last Post: 9 Feb 2010, 12:44 PM
  3. Button not showing Tooltip text when mouse pointer hovers over it
    By sreenija in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 8 Feb 2008, 5:10 AM
  4. Toolbar issue - click a button and drag mouse out
    By brant in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 2 Mar 2007, 12:23 AM

Thread Participants: 1