Style to apply to a button to see only the image of the button

[gogofe]

Hy, I have a button with an image. What is the css class to use to apply to a Ext.Button for seeing only the image of the button and not the button itself, just like you see a button in a toolbar or the buttons in this page(you just see only the image of the button and not the borders of the button). Thanks

[skirtle]

I don't know of anything pre-existing for doing that. Toolbars use x-toolbar but if you use that you'll find all sorts of other things change styling. Building your own is reasonably straightforward if you base it on x-toolbar. The complicated bit is deciding how you want it to behave under mouseover and mousedown. Here's an example based on the way the toolbars work. One thing to note is that Ext uses image sprites for the background images and varies appearance just by positioning that background image appropriately.

new Ext.Panel({
    cls: 'clear-bg',
    height: 300,
    layout: 'hbox',
    renderTo: Ext.getBody(),
    width: 300,
    items: [
        new Ext.Button({
            iconCls: 'your-icon-class',
            text: 'hey'
        }),
        new Ext.Button({
            iconCls: 'your-icon-class',
            text: 'hey'
        })
    ]
});

.clear-bg .x-btn-tl, .clear-bg .x-btn-tr, .clear-bg .x-btn-tc, .clear-bg .x-btn-ml, .clear-bg .x-btn-mr,
.clear-bg .x-btn-mc, .clear-bg .x-btn-bl, .clear-bg .x-btn-br, .clear-bg .x-btn-bc {
    background-position: 500px 500px;
}

.clear-bg .x-btn-over .x-btn-tl{
    background-position: -6px 0;
}

.clear-bg .x-btn-over .x-btn-tr{
    background-position: -9px 0;
}

.clear-bg .x-btn-over .x-btn-tc{
    background-position: 0 -9px;
}

.clear-bg .x-btn-over .x-btn-ml{
    background-position: -6px -24px;
}

.clear-bg .x-btn-over .x-btn-mr{
    background-position: -9px -24px;
}

.clear-bg .x-btn-over .x-btn-mc{
    background-position: 0 -2168px;
}

.clear-bg .x-btn-over .x-btn-bl{
    background-position: -6px -3px;
}

.clear-bg .x-btn-over .x-btn-br{
    background-position: -9px -3px;
}

.clear-bg .x-btn-over .x-btn-bc{
    background-position: 0 -18px;
}

.clear-bg .x-btn-click .x-btn-tl {
    background-position: -12px 0;
}

.clear-bg .x-btn-click .x-btn-tr {
    background-position: -15px 0;
}

.clear-bg .x-btn-click .x-btn-tc {
    background-position: 0 -12px;
}

.clear-bg .x-btn-click .x-btn-ml {
    background-position: -12px -24px;
}

.clear-bg .x-btn-click .x-btn-mr {
    background-position: -15px -24px;
}

.clear-bg .x-btn-click .x-btn-mc {
    background-position: 0 -3240px;
}

.clear-bg .x-btn-click .x-btn-bl {
    background-position: -12px -3px;
}

.clear-bg .x-btn-click .x-btn-br {
    background-position: -15px -3px;
}

.clear-bg .x-btn-click .x-btn-bc {
    background-position: 0 -21px;
}