How to change CSS style of an Image Button?

[zlevardy]

Hi,

I have tried something like this. It is not working. Any idea?

              {
                    xtype: 'button',
                    style: {
                    	height: "75px",
"background-image": "url(image/all.png) !important"
                    },
                    handler: function(button, event) {
                    	Ext.StoreMgr.get('ViewMyPromo').load();
                        Ext.getCmp('tpsViewport').setContentsContainerCardActive(0);
                        //this.applyStyles({ 
                        //	height: "75px",
//    "background-image": "url(image/all-active.png) !important"
                        //});    
this.setStyle('backgroundColor','#dddddd');
                    },
                    width: 80,
                    disabled: true
                }

thx,
Zol

[sword-it]

HI!

you may try to add a class on your button (td), sample is below:-

.without-hover td {
  background-image: none;
}


var button = new Ext.Button({
  text: 'without hover',    
  cls: "without-hover",
    renderTo: Ext.getBody()
  // ...
});

Working example:- http://jsfiddle.net/molecule/TbTxG/2/

[zlevardy]

thank you

What I really looking for is to change the background image later - once user clicked on it.

this.setStyle() and this.applyStyles() on type: button is undefined.

[sword-it]

Hi!

if you want to change css when user clicks on it, you may try to use pressedCls.

Sample:-

.sampleClass{
background: XXXXXX !important;
}

   
{
            xtype:"button",
             html: '*******',
            pressedCls:'sampleClass',
            ......
    }

http://docs.sencha.com/ext-js/4-1/#!...cfg-pressedCls

[zlevardy]

thanks. I have tried with presentedCls and overCls to see is it catching or not:
xtype: 'button',
style: {
height: "75px",
"background-image": "url(image/all.png) !important"
},
overCls: 'viewButtonActiveClass',

and my index.html has:
<style>
.viewButtonActiveClass {
background-image: url(image/all-active.png) !important;
}
</style>

what I am doing wrong?

thx

[sword-it]

try:-

.viewButtonActiveClass td {
background-image: url(image/all-active.png) !important;
}

[zlevardy]

added one more class:
.viewButtonClass td {
height: "75px";
"background-image": url(image/all.png) !important;
}
.viewButtonActiveClass td {
height: "75px";
"background-image": url(image/all-active.png) !important;
}
this would replace the system on item def.
xtype: 'button',
cls: 'viewButtonClass',
overCls: 'viewButtonActiveClass',
right now the image is not shown, and also no hover-over effect as the button had.

"style" is adding as an extra, can I only manipulate the a style property instead of changing the current class?

thx

[Moinsen]

Hi try this:

  {
    xtype: 'button',
    iconCls: 'pagenext'
  }

css:

.pagenext {
  background-image: url(images/page-next.gif) !important;
}

.pageprev {
  background-image: url(images/page-prev.gif) !important;
}

and finally:

  button.setIconCls( 'pageprev' );

This works for me!

[zlevardy]

thanks Guys!

unfortunately the setIconCls is not good for my case, as my images 75 x 75 pixels. The maximum icon size you can select is 32x32 pixels if set scale to large. I am not able to define a new scale, as extjs 4 blocking it with an exception.

it is possible to that really impossible to make an image button with ext?

thx,
Zol

[zlevardy]

this is what finally worked for me as a full image "button":

{
xtype: 'image',
itemId: 'viewButton',
src: 'image/all.png',
height: 75,
width: 75,
alt: 'VIEW',
disabled: true,
listeners: {
render: function(c) {
c.getEl().on('click', function(e) { this.setSrc('imgname0'); /* click logic */ }, c);
c.getEl().on('mouseover', function(e) { this.setSrc('imgname1'); }, c);
c.getEl().on('mouseout', function(e) { this.setSrc('imgname2'); }, c);
}
}
}