Results 1 to 10 of 10

Thread: How to change CSS style of an Image Button?

  1. #1
    Ext GWT Premium Member
    Join Date
    Oct 2009
    Posts
    143

    Default How to change CSS style of an Image Button?

    Hi,

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

    Code:
                  {
                        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

  2. #2
    Sencha User sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,335
    Answers
    124

    Default

    HI!

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

    Code:
    .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/
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  3. #3
    Ext GWT Premium Member
    Join Date
    Oct 2009
    Posts
    143

    Default

    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.

  4. #4
    Sencha User sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,335
    Answers
    124

    Default

    Hi!

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

    Sample:-

    .sampleClass{
    background: XXXXXX !important;
    }
    Code:
       
    {
                xtype:"button",
                 html: '*******',
                pressedCls:'sampleClass',
                ......
        }
    http://docs.sencha.com/ext-js/4-1/#!...cfg-pressedCls
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  5. #5
    Ext GWT Premium Member
    Join Date
    Oct 2009
    Posts
    143

    Default

    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

  6. #6
    Sencha User sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,335
    Answers
    124

    Default

    try:-

    .viewButtonActiveClass td {
    background-image: url(image/all-active.png) !important;
    }
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  7. #7
    Ext GWT Premium Member
    Join Date
    Oct 2009
    Posts
    143

    Default

    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

  8. #8
    Sencha User
    Join Date
    Feb 2012
    Location
    Katzenellenbogen
    Posts
    51
    Answers
    1

    Default

    Hi try this:

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

    Code:
    .pagenext {
      background-image: url(images/page-next.gif) !important;
    }
    
    .pageprev {
      background-image: url(images/page-prev.gif) !important;
    }
    and finally:

    Code:
      button.setIconCls( 'pageprev' );
    This works for me!

  9. #9
    Ext GWT Premium Member
    Join Date
    Oct 2009
    Posts
    143

    Default

    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

  10. #10
    Ext GWT Premium Member
    Join Date
    Oct 2009
    Posts
    143

    Default

    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);
    }
    }
    }

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •