1. #1
    Ext GWT Premium Member
    Join Date
    Oct 2009
    Posts
    131
    Vote Rating
    5
    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,333
    Answers
    124
    Vote Rating
    85
    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
    5
    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,333
    Answers
    124
    Vote Rating
    85
    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
    5
    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,333
    Answers
    124
    Vote Rating
    85
    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
    5
    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
    5
    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
    5
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi