Large Icons on Toolbar Buttons

[big_jim]

Sorry if this has been asked before, but I tried to search and couldn't find anything.

I have a toolbar where I want to have buttons with icons larger than the 16px x 16px that seems to be the only supported size.

If I merely set the icon, without modifying the CSS, I get the following:


I succeeded in making the the buttons and icons larger by defining the buttons as follows:

      tb.add(
        {
          icon: 'close2_x32.png',
          cls: 'x-btn-bigicon'
        }

where x-btn-bigicon is a user defined class

.x-btn-bigicon .x-btn-center .x-btn-text
{
    background-position:center;
    background-repeat:no-repeat;
    height:32px;
    width:32px;
    cursor:pointer;
    white-space:nowrap;
    padding:0;
}

Now, this works, but the problem is that on mouseover, the background looks messed up. I'll provide images to explain better than words could.

Without Mouseover (looks fine/normal)


With Mouseover Normal Button


With Mouseover Split Button


I've tried messing with the btn-sprite image and the btn-over classes in the CSS but I haven't been able to figure it out.

Any help would be appreciated.

[big_jim]

It's looking like I need to modify the
.x-toolbar .x-btn-over classes, and provide them with a new image that works for my icons (which are 32x32px) due to the lack of CSS support for scaling.

Does anybody have an attractive background that would be easy to scale?

Alternatively, if somebody has another solution (aside from the obvious of just scaling down my icons), that would be very much appreciated.

[big_jim]

With enough CSS hacking and my own fancy new sprites, I got it to work with 32x32 icons (or indeed any icon with a height <= 32px)

Using the following CSS as well as the attached sprite image, all you need to do is add the config option " cls: 'x-btn-bigicon' " on any toolbar button

Success:



note: this solution does NOT work for non-toolbar buttons, although following a similar process WOULD work
note: The attached sprite image is only 3px wide, so you might have to search for it with your mouse.

.x-toolbar .x-btn-bigicon .x-btn-center .x-btn-text{
  background-position:center;
  background-repeat:no-repeat;
  height:36px;
  width:36px;
  cursor:pointer;
  white-space:nowrap;
  padding:0;
}

.x-toolbar .x-btn-bigicon .x-btn-menu-arrow-wrap .x-btn-center button {
height:36px;
background-position: 0px 10px;
}

.x-toolbar .x-btn-bigicon.x-btn-over .x-btn-menu-arrow-wrap .x-btn-center button {
background-position:0pt -40px;
}

.x-toolbar .x-btn-over.x-btn-bigicon .x-btn-left {
background:transparent url(tbar-bigsprite.gif) scroll 0pt -1px;
background-repeat: repeat-x;
}

.x-toolbar .x-btn-over.x-btn-bigicon .x-btn-right {
background:transparent url(tbar-bigsprite.gif) scroll 0pt -38px;
background-repeat: repeat-x;
}

.x-toolbar .x-btn-over.x-btn-bigicon .x-btn-center {
background:transparent url(tbar-bigsprite.gif) scroll 0pt -75px;
background-repeat: repeat-x;
}

.x-toolbar .x-btn-click.x-btn-bigicon .x-btn-left, .x-toolbar .x-btn-bigicon .x-btn-click .x-btn-left, .x-toolbar .x-btn-pressed.x-btn-bigicon .x-btn-left, .x-toolbar .x-btn-menu-active.x-btn-bigicon .x-btn-left {
background:transparent url(tbar-bigsprite.gif) scroll 0pt -112px;
background-repeat: repeat-x;
}

.x-toolbar .x-btn-click.x-btn-bigicon .x-btn-right, .x-toolbar .x-btn-bigicon .x-btn-click .x-btn-right, .x-toolbar .x-btn-pressed.x-btn-bigicon .x-btn-right, .x-toolbar .x-btn-menu-active.x-btn-bigicon .x-btn-right  {
background:transparent url(tbar-bigsprite.gif) scroll 0pt -149px;
background-repeat: repeat-x;
}

.x-toolbar .x-btn-click.x-btn-bigicon .x-btn-center, .x-toolbar .x-btn-bigicon .x-btn-click .x-btn-center, .x-toolbar .x-btn-pressed.x-btn-bigicon .x-btn-center, .x-toolbar .x-btn-menu-active.x-btn-bigicon .x-btn-center  {
background:transparent url(tbar-bigsprite.gif) scroll 0pt -186px;
background-repeat: repeat-x;
}

A big thanks to all of those who helped...

[VinylFox]

Your just too quick for us big_jim

Nice work by the way, Ive had to do this before and its not the simplest of things.

[RWaters]

Thanks for this, it came in handy. It doesn't work so well in IE due to the use of multiple class selecters (.x-btn-over.x-btn-bigicon) not being supported.

For my case I just removed the need for the .x-btn-bigicon and made the overrides apply to all toolbars. I also made a couple other tweaks. Firstly I needed to be able to display large icons with text and the current CSS made the icon display underneath the text. By changing the width to auto and setting some padding I was able to get a nice display. Buttons that contain only text and no icons would then display with a bunch of padding and look odd so I added a class x-btn-noicon that could be set to remove this padding. Lastly the separarators looked a bit odd since they were still 16px in height so I adjusted them to the new height.

.x-toolbar .x-btn .x-btn-center .x-btn-text {
    background-position: center;
    background-repeat: no-repeat;
    height: 36px;
    width: auto;
    cursor: pointer;
    white-space: nowrap;
    padding: 0;
    padding-left: 32px;
}
.x-toolbar .x-btn-noicon .x-btn-center .x-btn-text  {
  padding-left: 0 !important;
}
.x-toolbar .ytb-sep {
  height: 36px;
  background-repeat: repeat-y;
}

[ngeorgopoulos]

Thanks to Jim and to Rich but unfortunately I did not manage to get neither of these solutions to work properly.

As Rich has already pointed out Jim's solution fails in IE due to IE's restrictions. But I did not manage to get Rich's proposed solution to work (hover and clicked image effect are presented distorted). Am I missing something?

Rich I have some questions for u:

1) Do you make the changes in ext-all.css or do you override the CSS in another css?
2) Don't u make any changes to images involved in order to apply hover and clicked effect? Which images do u use? If you made any changes to any of the image files is it possible to post them up here?

3) Finally are u sure that these are only the changes u have made? Please provide (if possible) a complete online working solution?

4) Or even better can we have an OFFICIAL PROPOSED SOLUTION to this ordinary problem? I think it is very usual for someone to have 32x32 icons and not to use the default ones.

tia
nikos

p.s. I think I managed to make Jim's script to work also in IE7 but it breaks a little bit the 16x16 icons (I am using big_jim's image). I am overriding CSS in my own script so u have to change also the image URL relative path (greyed out). if u do not know what u are doing do not make any changes. I learned the hard way IE's disabilities one more time!

 
.x-toolbar .x-btn-bigicon .x-btn-center .x-btn-text{
background-position:center;
background-repeat:no-repeat;
height:36px;
width:36px;
cursor:pointer;
white-space:nowrap;
padding:0;
}
.x-toolbar .x-btn-bigicon .x-btn-menu-arrow-wrap .x-btn-center button {
height:36px;
background-position: 0px 10px;
}
.x-toolbar .x-btn-bigicon.x-btn-over .x-btn-menu-arrow-wrap .x-btn-center button {
background-position:0pt -40px;
}
.x-toolbar .x-btn-bigicon.x-btn-over .x-btn-left {
background: url(../Images/toolbar/tbar-bigsprite.gif) no-repeat 0 -1px;
}
.x-toolbar .x-btn-bigicon.x-btn-over .x-btn-right {
background: url(../Images/toolbar/tbar-bigsprite.gif) no-repeat 0 -38px;
}
.x-toolbar .x-btn-bigicon.x-btn-over .x-btn-center {
background: url(../Images/toolbar/tbar-bigsprite.gif) repeat-x 0 -75px;
}
.x-toolbar .x-btn-bigicon.x-btn-click .x-btn-left, .x-toolbar .x-btn-bigicon.x-btn-pressed .x-btn-left, .x-toolbar .x-btn-bigicon.x-btn-menu-active .x-btn-left{
background: url(../Images/toolbar/tbar-bigsprite.gif) no-repeat 0 -112px;
}
.x-toolbar .x-btn-bigicon.x-btn-click .x-btn-right, .x-toolbar .x-btn-bigicon.x-btn-pressed .x-btn-right, .x-toolbar .x-btn-bigicon.x-btn-menu-active .x-btn-right{
background: url(../Images/toolbar/tbar-bigsprite.gif) no-repeat 0 -149px;
}
.x-toolbar .x-btn-bigicon.x-btn-click .x-btn-center, .x-toolbar .x-btn-bigicon.x-btn-pressed .x-btn-center, .x-toolbar .x-btn-bigicon.x-btn-menu-active .x-btn-center{
background: url(../Images/toolbar/tbar-bigsprite.gif) repeat-x 0 -186px;
}

[DamienValentine]

My attempts to force 32px icons crashed. Anyways, I made a little solution whihc can be not so professional, but working. So. First you have to create css-file with next content:

.x-toolbar .x-btn-bigicon .x-btn-center .x-btn-text{
  background-position:center;
  background-repeat:no-repeat;
  height:36px;
  width:36px;
  cursor:pointer;
  white-space:nowrap;
  padding:0;
}

.x-toolbar .x-btn-bigicon .x-btn-menu-arrow-wrap .x-btn-center button {
height:36px;
}

.x-toolbar .x-btn-bigicon.x-btn-over .x-btn-menu-arrow-wrap .x-btn-center button {
}

.x-toolbar .x-btn-over.x-btn-bigicon .x-btn-left {
background:transparent url(../images/tbar-hover-left.gif);
background-repeat: no-repeat;
}

.x-toolbar .x-btn-over.x-btn-bigicon .x-btn-right {
background:transparent url(../images/tbar-hover-right.gif);
background-repeat: no-repeat;
}

.x-toolbar .x-btn-over.x-btn-bigicon .x-btn-center {
background:transparent url(../images/tbar-hover.gif);
background-repeat: repeat-x;
}

.x-toolbar .x-btn-click.x-btn-bigicon .x-btn-left, .x-toolbar .x-btn-bigicon .x-btn-click .x-btn-left, .x-toolbar .x-btn-pressed.x-btn-bigicon .x-btn-left, .x-toolbar .x-btn-menu-active.x-btn-bigicon .x-btn-left {
background:transparent url(../images/tbar-pressed-left.gif);
background-repeat: no-repeat;
}

.x-toolbar .x-btn-click.x-btn-bigicon .x-btn-right, .x-toolbar .x-btn-bigicon .x-btn-click .x-btn-right, .x-toolbar .x-btn-pressed.x-btn-bigicon .x-btn-right, .x-toolbar .x-btn-menu-active.x-btn-bigicon .x-btn-right  {
background:transparent url(../images/tbar-pressed-right.gif);
background-repeat: no-repeat;
}

.x-toolbar .x-btn-click.x-btn-bigicon .x-btn-center, .x-toolbar .x-btn-bigicon .x-btn-click .x-btn-center, .x-toolbar .x-btn-pressed.x-btn-bigicon .x-btn-center, .x-toolbar .x-btn-menu-active.x-btn-bigicon .x-btn-center  {
background:transparent url(../images/tbar-pressed.gif);
background-repeat: repeat-x;
}

Next link this css file to your html file by using
<link rel="stylesheet" type="text/css" href="css/bigicons.css" />
before <body> statement. Then download images pack and unzip in some folder. Change paths in css so they will point to unzipped images.
When you define your 32px * 32px toolbar button use:

var tbar2 = new Ext.Toolbar({ 
            renderTo: this.tbar, 
            items: [ 
                {
                cls: 'x-btn-bigicon',
                icon: 'images/worker32x32.gif',
                }, 
                {text:'Received',iconCls:'received'}, 
                {text:'Enroute',iconCls:'enroute'}, 
                {text:'Complete',iconCls:'complete'} 
            ] 
        });

You're done.

[ngeorgopoulos]

thanx.. I am on vacation ...I 'll give it a try as soon as I get back.

nikos

[bruglur]

Hi, i have the some problem with the toolbar , i have tested the last code posted but not working with the Internet Explorer ... Don't show the image !

Please help me!

[Animal]

Ext 3 will take care of this for you if you can hold off the requirement for just a while (or upgrade to premium membership and access the development code!)