1. #1
    Ext GWT Premium Member
    Join Date
    Oct 2009
    Posts
    131
    Vote Rating
    4
    zlevardy is on a distinguished road

      0  

    Default Unanswered: How to change CSS style of an Image Button?

    Unanswered: 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 - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,332
    Answers
    124
    Vote Rating
    83
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      0  

    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
    131
    Vote Rating
    4
    zlevardy is on a distinguished road

      0  

    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 - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,332
    Answers
    124
    Vote Rating
    83
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      0  

    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
    131
    Vote Rating
    4
    zlevardy is on a distinguished road

      0  

    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 - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,332
    Answers
    124
    Vote Rating
    83
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      0  

    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
    131
    Vote Rating
    4
    zlevardy is on a distinguished road

      0  

    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
    Vote Rating
    1
    Moinsen is on a distinguished road

      0  

    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
    131
    Vote Rating
    4
    zlevardy is on a distinguished road

      0  

    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
    131
    Vote Rating
    4
    zlevardy is on a distinguished road

      0  

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

Thread Participants: 2

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar