View Full Version : How to apply a big IMAGE on a BIG BUTTON

9 Oct 2009, 7:18 AM
I've a button with 100x100 size (it's for a touchscreen)

I'd like to aply a simply 'X' icon / image on this button. I've an high quality full colored icon at 90x90 in png format

i tried with iconCls, but it works on background and so it's NOT available to show the full icon !

How to hack this ?


I must change image at a later time, via extjs code, so... teach me please how to add/change 'on the fly' the image

9 Oct 2009, 7:22 AM
var btn = new Ext.Button({

9 Oct 2009, 7:26 AM
Thx, but It's not what I search...

I must dinamically change this icon

How to?

PS: this doesn't work
a little white square appear... How to MAXIMIZE the icon of the button!?

9 Oct 2009, 7:47 AM
Specifying icon or iconCls will work...

You need to set the height and width on the button to get it to show 90x90 and in the CSS create another class with the backgound-image (or background-position if it's a sprite) set to the path or position of the other icon. To change the image, use the setIconCls() method.


9 Oct 2009, 1:59 PM
I've already done this !

In first post I told I've already a 90x90 button. It's really already 90x90.
An I've already tried with iconCls and the background-image property. In this way it doesn't work well

This is my panel with a single button into it

var laCella = new Ext.Panel ({
items : [ new Ext.Button ({
id : "fs-Button" + htmlNum,
width : 80,
height : 80,

This works very well-

Then into the code I inserted in a point this command


and added this to my css

background-image: url("grafica/accept.png") !important;

and the dinamic behaviour really happens, but the results is "nothing appears"

Into firebug I see the generated code:

<button id="ext-gen63" class="x-btn-text icon-accept" type="button"> </button>

So my custom additional css class is really added to rendered button. Ok

Last: In firebug -> net -> all I can see that the accept.png image is really loaded.. but... why is it not displayed?

9 Oct 2009, 2:23 PM
Work I've done in the past with touchscreen's I just used a <table> and had the cell set to 90x90 with an onclick event listener on it. Then you just use an <img> tag to display the image any size you want. Below is a pic of a simple calendar with current day being blue and selected day being green all using a <table> and onclick event. I used this with a touchscreen about 3-4 years ago but still working. :)

Using EXTJS you could use a table layout with normal panels and no title and no padding. Then just have a onclick listener for each panel. Simulating the buttons.

Otherwise override these css settings. This should help on resizing it.

/* Only icons */
.x-btn-icon .x-btn-text{
background-position: center;
background-repeat: no-repeat;

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

.x-btn-icon .x-btn-medium .x-btn-text{
height: 24px;
width: 24px;

.x-btn-icon .x-btn-large .x-btn-text{
height: 32px;
width: 32px;

/* Icons and text */
/* left */
.x-btn-text-icon .x-btn-icon-small-left .x-btn-text{
background-position: 0 center;
background-repeat: no-repeat;

.x-btn-text-icon .x-btn-icon-medium-left .x-btn-text{
background-position: 0 center;
background-repeat: no-repeat;

.x-btn-text-icon .x-btn-icon-large-left .x-btn-text{
background-position: 0 center;
background-repeat: no-repeat;

9 Oct 2009, 2:47 PM
I suppose there is a way more easy to realize. My UI widget are not a personal choice.

Actually i worked around in this way.

When I want to set the icon i do this

ilPulsante = Ext.getCmp(id);
ilPulsante.setText("<img src='/grafica/accept.png'/ width='50' height='50'");

BUT this workend only adding this to css, and note: without the !important, my css will be overwritten ... but why?!?! My CSS, on the file with layout etc, AFTER loading ext-all.css .... it MUST be the last apllied... why it is ignored !?!?

.x-btn-text {
width: 60px !important;
height: 60px !important;

In this way it work. but ... only in FIREFOX, with ie8 the icon hardcoded into the text will not showed at all

I ask again: is there any way to .. 'simply patch over' an image !? Using Ext.js standard way, so it's fully cross-browser... Please

9 Oct 2009, 3:27 PM
I resolved in this way, but the result is not beautiful ...

.realtebo {
background-position: 3px 3px !important;
background-image: url("/grafica/accept.png");
background-repeat: no-repeat;

... cut ...

ilPulsante = Ext.getCmp(id);

This works in ie8 and in ff3.5

the component "button" has a btnEl property that give me access to the html <button>
the parent is an em element (drawn by Ext)
the granparent is a tr element (drawn by ext, it's the central td of the 3x3 table used by extjs to represent visually a Ext.Button).

Ok, the result is really not the best, but it's work. Now i MUST find a more reasonable way

10 Oct 2009, 3:47 AM
I would add:

.x-btn-icon .x-btn-huge .x-btn-text{
height: 90px;
width: 90px;
.my-icon {
background-image: url(my-icon.png);
and use

xtype: 'button',
scale: 'huge',
iconCls: 'my-icon'

14 Oct 2009, 7:44 AM
To give an example using the css example.

Ext.onReady(function () {
var btns = new Array(6);
for (var i = 0; i < 6; i++) {
btns[i] = new Ext.Button({
id: new String(i + 1),
text: 'Button<br />' + (i + 1),
scale: 'huge',
width: 90,
height: 90,
handler: function () {
alert('You clicked on button #' + this.getId());
var win = new Ext.Window({
title: 'Welcome guest user...',
closable: false,
border: true,
plain: false,
layout: 'table',
layoutConfig: {
columns: 3

bodyStyle: 'padding:0px 0px 0px 0'
<link rel="stylesheet" type="text/css" href="../ext3/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs.php"></script>
<style type="text/css">
.x-btn-icon .x-btn-huge .x-btn-text {
height: 90px;
width: 90px;
<script type="text/javascript" src="test.js"></script>
<body style="background-color:#000;">