ToolbarButton images

[Cliff]

ok probably a dumb question...

Anyway I'm trying to create a button on a toolbar that has an image on
it that is 32px by 32px. My problem is that the button is small and
the image gets clipped. I have tried the setWidth and setHeight
functions of the button to make it large enough to accommodate the
image, however this has two bad side effects: 1) the image is still
clipped inside the large button, and 2) the buttons are no longer
placed on the toolbar, the go vertically down the page. (the original
toolbar was horizontally across the top)

anyway here is some code so that you will see what I'm trying.

Toolbar toolbar = new Toolbar();
ToolbarButton btn = new ToolbarButton();
btn.setIcon("images/save.png");
// btn.setCls("x-btn-icon");//I've tried with and without this
css
class name
btn.setTooltip("Save");
toolbar.addButton(btn);

that is just an excerpt, the full code has multiple buttons, I figured
this would be sufficient though.

[Cliff]

also, the tooltips aren't showing up.

[Sanjiv Jivan]

So you want to have large buttons? Or want the image to display correctly on the Button. If its the later, then the image needs to be sized 16x16. The tool bar height will also not accommodate the larger sized images.

Sanjiv

[Cliff]

I would like large buttons with large images on them... ideally 32 by
32. If this is not possible well then ... crap.

On Mar 5, 6:10 pm, "Sanjiv Jivan" <sanjiv.ji...@gmail.com> wrote:
> So you want to have large buttons? Or want the image to display correctly on
> the Button. If its the later, then the image needs to be sized 16x16. The
> tool bar height will also not accommodate the larger sized images.
>
> Sanjiv
>

[Sanjiv Jivan]

Every Ext widget can be pretty much styled to your liking using CSS. The default Ext CSS for button image has expects a 16x16 image. But you can change the style to size the button to display your 32x32 image.

            Button iconButton = new Button();           
            iconButton.setIcon("images/save.png");
            iconButton.setCls("mybutton-text-icon");
            iconButton.setTooltip("My Button");

from the ext forum :

/* remove the default left,center and right images from the button border*/
.mybutton-text-icon .x-btn-left, .mybutton-text-icon .x-btn-right, .mybutton-text-icon .x-btn-center {
    background: 0;
}

/* now customize the new button    that has a caption below the icon */
.mybutton-text-icon .x-btn-center .x-btn-text {
    background-position: 0 2px;
    background-repeat: no-repeat;
    padding-left: 0px;
    padding-top: 32px;
    padding-bottom: 0px;
    padding-right: 0px;
    height: 32px;
    width: 32px;
}

I'm hoping to capture CSS info for customizing the widgets in the Javadocs, but in the mean time you can post your question, search the Ext forums, or better yet use Firebug to examine the CSS being applied, dynamically alter them till you get the desired result and then capture those rules in your CSS file.

I'll add the above info to the Button Javadocs.

Sanjiv

[Cliff]

Thanks! that helped alot.

[alberto33]

For the tooltips you need to use:

QuickTips.init();