PDA

View Full Version : How to change CSS style of an Image Button?



zlevardy
19 Jul 2012, 9:47 PM
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
19 Jul 2012, 10:19 PM
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
19 Jul 2012, 11:15 PM
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
19 Jul 2012, 11:19 PM
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/#!/api/Ext.button.Button-cfg-pressedCls

zlevardy
20 Jul 2012, 12:08 AM
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
20 Jul 2012, 12:12 AM
try:-

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

zlevardy
20 Jul 2012, 12:51 AM
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
23 Jul 2012, 3:42 AM
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
23 Jul 2012, 7:41 AM
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
24 Jul 2012, 2:27 AM
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);
}
}
}