PDA

View Full Version : Showing the border of a button on the toolbar without having to mouse over it



tnichols1
11 Aug 2010, 7:52 AM
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".

e.g.



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;
}

hieu79vn
19 Apr 2012, 6:37 AM
hello

Why it doesnt work with me? :(((((