View Full Version : Big icons & Buttons

12 Jun 2009, 11:26 AM
Hello !
I'm new on this forum and a new ExtJs user.
I'm thinking to write some application with this framework and I'm moving the first steps in this direction.
Obviously I've encountered the first problem: how I can fit an icon that have a size of 50x50 pix into a button ?
I've searched in forum but I've found only the solution for icon thah is 32x32 pix
Any help is apreciated.

14 Jun 2009, 10:21 AM
Hey !
no more answers !
Thank to all that have helped me !
It's possible to have a little help ?
What kind of forum is it ? Where is the collaborations ?
At the end I only asked a very little thing that can by solved with a very little answer !
However many thank to all !

14 Jun 2009, 12:07 PM
It may help if you provide a bit more detail about what you have tried so far and where you are running into the issue.

Asking .. "can you provide me exact code to do what I want to do", is a bit of a tall order for any forum.

Related post: http://extjs.com/forum/showthread.php?t=25690

Did you try getting the one you mentioned that works for 32x32 - getting it working at 32x32 - then changing it to 50x50? If so, what broke?

Provide some details like that and you may get some exact details for a solution.

14 Jun 2009, 12:40 PM
Well Joe,
I'm using extjs 3.0 RC2 because i've readed on forum that version 3.0 of buttons is more flexible for larger icons than 32x32. Thaht's all. I haven't tryed any other solutions.
For these reasons I was thinking that the solution must be very simple and I'm sorry for my second post. Probably it was too little gently.
However in fact my only question is if it is possible to use icons larger than 32x32 in (in my case 50x50) with extjs 3.0 RC2 and what and where is the way to follow for do this ?

14 Jun 2009, 12:52 PM
I was just about to post the link to 3.0 /examples/toolbar/toolbars.html

Copy that demo and related files. Update the add in the css to point to your icon. I tried it with a 50px icon and looked ok in the version with wider text - play with it, may get you there.

If you are new to ExtJS - start with 3.0.

14 Jun 2009, 1:08 PM
Ok Joe thank you !
I'll do that.

14 Jun 2009, 1:09 PM
Large scale is only 32 px.

Looking at the source, it seems you should be able to make your own x-btn-super-large (instead of small or large, etc). You will need to add your own css styles with your own name and size details.

Example (there are many)

.x-btn-noicon .x-btn-small .x-btn-text{
height: 16px;

would be ...

.x-btn-noicon .x-btn-super-large .x-btn-text{
height: 50px;

... and so on ..

Then use super-large for scale in your configs.

I have not tried this, but from looking at how the css files are layed out and a quick glance and the docs / source, it seems this may work.

15 Jun 2009, 6:45 AM
Ok. I've tryed what you have tell me.
I have modifyed the buttons sample and the result was a big icon (50x50) in a button panel.
This encourage me. But I'm in another situation.
My goal is to produce an application layout like this:

var viewport = new Ext.Viewport({
layout : "border",
items : [{
region : "center",
items : [ {
xtype: 'button',
scale: 'large',
iconCls: 'add50'

} , {
region : "north",
height : 30
} , {
region : "south",
height : 150
} , {
region : "west",
width : 200

I've created in the css a right recall to my .png file (add50).
I want to create a toolbar in the center region with 10-12 buttons 50x50 big.
With this code the result is that the icon's button is always automatically re-scaled to a size (i think) of 32x32 and not the original size of 50x50.
There is a solution for this ?

15 Jun 2009, 7:59 AM
In your code ...

Where you are using ....

scale: 'large',

Try using ...

scale: 'super-large',

.. super-large should match your css additions of course ...

16 Jun 2009, 12:49 PM
Sorry for the lag time: I'm busy.
Problem solved !
Thank you so much Joe.
See you..

16 Jun 2009, 3:31 PM
If you have a chance to post some details on your success that would be helpful to others.

Thanks for letting me know problem solved :)