PDA

View Full Version : Buttons in Toolbar



ajay.kumar2
16 Nov 2010, 4:13 AM
i am adding buttons to toolbar using the standard way :-



new Ext.Toolbar({
items:[
{xtype:'tbbutton',text:'Test'}
]})

but my buttons appear as plain Text on the toolbar and only on mouseover it appears to be a button.

Is there a way i can make it appear as button always?

thanks,

Frohnix
16 Nov 2010, 4:44 AM
Put this in your CSS:

.x-toolbar .x-toolbar-standardbutton .x-btn-tl { background-position: 0 0; }
.x-toolbar .x-toolbar-standardbutton .x-btn-tr { background-position: -3px 0; }
.x-toolbar .x-toolbar-standardbutton .x-btn-tc { background-position: 0 -6px; }
.x-toolbar .x-toolbar-standardbutton .x-btn-ml { background-position: 0px -24px; }
.x-toolbar .x-toolbar-standardbutton .x-btn-mr { background-position: -3px -24px; }
.x-toolbar .x-toolbar-standardbutton .x-btn-mc { background-position: 0 -1096px; }
.x-toolbar .x-toolbar-standardbutton .x-btn-bl { background-position: 0 -3px; }
.x-toolbar .x-toolbar-standardbutton .x-btn-br { background-position: -3px -3px; }
.x-toolbar .x-toolbar-standardbutton .x-btn-bc { background-position: 0 -15px; }
.x-toolbar .x-toolbar-standardbutton.x-btn-over .x-btn-tl{ background-position: -6px 0; }
.x-toolbar .x-toolbar-standardbutton.x-btn-over .x-btn-tr { background-position: -9px 0; }
.x-toolbar .x-toolbar-standardbutton.x-btn-over .x-btn-tc { background-position: 0 -9px; }
.x-toolbar .x-toolbar-standardbutton.x-btn-over .x-btn-ml { background-position: -6px -24px; }
.x-toolbar .x-toolbar-standardbutton.x-btn-over .x-btn-mr { background-position: -9px -24px; }
.x-toolbar .x-toolbar-standardbutton.x-btn-over .x-btn-mc { background-position: 0 -2168px; }
.x-toolbar .x-toolbar-standardbutton.x-btn-over .x-btn-bl { background-position: -6px -3px; }
.x-toolbar .x-toolbar-standardbutton.x-btn-over .x-btn-br { background-position: -9px -3px; }
.x-toolbar .x-toolbar-standardbutton.x-btn-over .x-btn-bc { background-position: 0 -18px; }
.x-toolbar .x-toolbar-standardbutton.x-btn-click .x-btn-tl,
.x-toolbar .x-toolbar-standardbutton.x-btn-menu-active .x-btn-tl,
.x-toolbar .x-toolbar-standardbutton.x-btn-pressed .x-btn-tl { background-position: -12px 0; }
.x-toolbar .x-toolbar-standardbutton.x-btn-click .x-btn-tr,
.x-toolbar .x-toolbar-standardbutton.x-btn-menu-active .x-btn-tr,
.x-toolbar .x-toolbar-standardbutton.x-btn-pressed .x-btn-tr { background-position: -15px 0; }
.x-toolbar .x-toolbar-standardbutton.x-btn-click .x-btn-tc,
.x-toolbar .x-toolbar-standardbutton.x-btn-menu-active .x-btn-tc,
.x-toolbar .x-toolbar-standardbutton.x-btn-pressed .x-btn-tc { background-position: 0 -12px; }
.x-toolbar .x-toolbar-standardbutton.x-btn-click .x-btn-ml,
.x-toolbar .x-toolbar-standardbutton.x-btn-menu-active .x-btn-ml,
.x-toolbar .x-toolbar-standardbutton.x-btn-pressed .x-btn-ml { background-position: -12px -24px; }
.x-toolbar .x-toolbar-standardbutton.x-btn-click .x-btn-mr,
.x-toolbar .x-toolbar-standardbutton.x-btn-menu-active .x-btn-mr,
.x-toolbar .x-toolbar-standardbutton.x-btn-pressed .x-btn-mr { background-position: -15px -24px; }
.x-toolbar .x-toolbar-standardbutton.x-btn-click .x-btn-mc,
.x-toolbar .x-toolbar-standardbutton.x-btn-menu-active .x-btn-mc,
.x-toolbar .x-toolbar-standardbutton.x-btn-pressed .x-btn-mc { background-position: 0 -3240px; }
.x-toolbar .x-toolbar-standardbutton.x-btn-click .x-btn-bl,
.x-toolbar .x-toolbar-standardbutton.x-btn-menu-active .x-btn-bl,
.x-toolbar .x-toolbar-standardbutton.x-btn-pressed .x-btn-bl { background-position: -12px -3px; }
.x-toolbar .x-toolbar-standardbutton.x-btn-click .x-btn-br,
.x-toolbar .x-toolbar-standardbutton.x-btn-menu-active .x-btn-br,
.x-toolbar .x-toolbar-standardbutton.x-btn-pressed .x-btn-br { background-position: -15px -3px; }
.x-toolbar .x-toolbar-standardbutton.x-btn-click .x-btn-bc,
.x-toolbar .x-toolbar-standardbutton.x-btn-menu-active .x-btn-bc,
.x-toolbar .x-toolbar-standardbutton.x-btn-pressed .x-btn-bc { background-position: 0 -21px; }

and this in your toolbar button:

cls:'x-toolbar-standardbutton',

Frohnix

laurentParis
16 Nov 2010, 5:20 AM
I think that it's more easy to re-styling toolbar :)


new Ext.Toolbar({
toolbarCls: '', //by default: x-toolbar
style: 'background-color: #D5E2F2;border:1px solid #A9BFD3;vertical-align:middle;padding: 2px;',
...