Results 1 to 10 of 10

Thread: How to apply a big IMAGE on a BIG BUTTON

  1. #1

    Default How to apply a big IMAGE on a BIG BUTTON

    I've a button with 100x100 size (it's for a touchscreen)

    I'd like to aply a simply 'X' icon / image on this button. I've an high quality full colored icon at 90x90 in png format

    i tried with iconCls, but it works on background and so it's NOT available to show the full icon !

    How to hack this ?

    -

    I must change image at a later time, via extjs code, so... teach me please how to add/change 'on the fly' the image

  2. #2
    Ext User zhegwood's Avatar
    Join Date
    Dec 2007
    Location
    Boulder, CO Suburbia (Lafayette)
    Posts
    388

    Default

    Code:
    var btn = new Ext.Button({
      icon:'/path/to/icon.png',
      ...
    });

  3. #3

    Default

    Thx, but It's not what I search...

    I must dinamically change this icon

    How to?

    PS: this doesn't work
    a little white square appear... How to MAXIMIZE the icon of the button!?

  4. #4
    Ext User zhegwood's Avatar
    Join Date
    Dec 2007
    Location
    Boulder, CO Suburbia (Lafayette)
    Posts
    388

    Default

    Specifying icon or iconCls will work...

    You need to set the height and width on the button to get it to show 90x90 and in the CSS create another class with the backgound-image (or background-position if it's a sprite) set to the path or position of the other icon. To change the image, use the setIconCls() method.

    http://www.extjs.com/deploy/dev/docs...xt.Button.html

  5. #5

    Default

    I've already done this !

    In first post I told I've already a 90x90 button. It's really already 90x90.
    An I've already tried with iconCls and the background-image property. In this way it doesn't work well

    This is my panel with a single button into it
    Code:
    var laCella = new Ext.Panel ({
          items : [ new Ext.Button ({
              id      : "fs-Button" + htmlNum,
              width   : 80,
              height  : 80,
            }) 
          ] 
        });
    This works very well-

    Then into the code I inserted in a point this command
    Code:
    ilPulsante.setIconClass("icon-accept");
    and added this to my css

    Code:
    .icon-accept{ 
      background-image: url("grafica/accept.png") !important;
    }
    and the dinamic behaviour really happens, but the results is "nothing appears"

    Into firebug I see the generated code:

    Code:
    <button id="ext-gen63" class="x-btn-text icon-accept" type="button"> </button>
    So my custom additional css class is really added to rendered button. Ok

    Last: In firebug -> net -> all I can see that the accept.png image is really loaded.. but... why is it not displayed?

  6. #6
    Sencha User aw1zard2's Avatar
    Join Date
    Sep 2009
    Location
    Dallas, Texas
    Posts
    589

    Default

    Work I've done in the past with touchscreen's I just used a <table> and had the cell set to 90x90 with an onclick event listener on it. Then you just use an <img> tag to display the image any size you want. Below is a pic of a simple calendar with current day being blue and selected day being green all using a <table> and onclick event. I used this with a touchscreen about 3-4 years ago but still working.

    Using EXTJS you could use a table layout with normal panels and no title and no padding. Then just have a onclick listener for each panel. Simulating the buttons.

    Otherwise override these css settings. This should help on resizing it.

    /* Only icons */
    .x-btn-icon .x-btn-text{
    background-position: center;
    background-repeat: no-repeat;
    }

    .x-btn-icon .x-btn-small .x-btn-text{
    height: 16px;
    width: 16px;
    }

    .x-btn-icon .x-btn-medium .x-btn-text{
    height: 24px;
    width: 24px;
    }

    .x-btn-icon .x-btn-large .x-btn-text{
    height: 32px;
    width: 32px;
    }

    /* Icons and text */
    /* left */
    .x-btn-text-icon .x-btn-icon-small-left .x-btn-text{
    background-position: 0 center;
    background-repeat: no-repeat;
    padding-left:18px;
    height:16px;
    }

    .x-btn-text-icon .x-btn-icon-medium-left .x-btn-text{
    background-position: 0 center;
    background-repeat: no-repeat;
    padding-left:26px;
    height:24px;
    }

    .x-btn-text-icon .x-btn-icon-large-left .x-btn-text{
    background-position: 0 center;
    background-repeat: no-repeat;
    padding-left:34px;
    height:32px;
    }
    Attached Images Attached Images

  7. #7

    Default

    I suppose there is a way more easy to realize. My UI widget are not a personal choice.

    Actually i worked around in this way.

    When I want to set the icon i do this
    Code:
    ilPulsante = Ext.getCmp(id);
    ilPulsante.setText("<img src='/grafica/accept.png'/ width='50' height='50'");
    BUT this workend only adding this to css, and note: without the !important, my css will be overwritten ... but why?!?! My CSS, on the file with layout etc, AFTER loading ext-all.css .... it MUST be the last apllied... why it is ignored !?!?
    Code:
    .x-btn-text {
      width: 60px !important;
      height: 60px !important;
    }
    In this way it work. but ... only in FIREFOX, with ie8 the icon hardcoded into the text will not showed at all

    I ask again: is there any way to .. 'simply patch over' an image !? Using Ext.js standard way, so it's fully cross-browser... Please

  8. #8

    Default

    I resolved in this way, but the result is not beautiful ...

    Code:
    .realtebo {
      background-position: 3px 3px !important;
      background-image: url("/grafica/accept.png");
      background-repeat: no-repeat;  
    }
    ... cut ...
    Code:
    ilPulsante = Ext.getCmp(id);
    ilPulsante.btnEl.parent().parent().addClass("realtebo");
    This works in ie8 and in ff3.5


    the component "button" has a btnEl property that give me access to the html <button>
    the parent is an em element (drawn by Ext)
    the granparent is a tr element (drawn by ext, it's the central td of the 3x3 table used by extjs to represent visually a Ext.Button).

    Ok, the result is really not the best, but it's work. Now i MUST find a more reasonable way

  9. #9
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    I would add:
    Code:
    .x-btn-icon .x-btn-huge .x-btn-text{
        height: 90px;
        width: 90px;
    }
    .my-icon {
        background-image: url(my-icon.png);
    }
    and use
    Code:
    {
        xtype: 'button',
        scale: 'huge',
        iconCls: 'my-icon'
    }

  10. #10
    Sencha User aw1zard2's Avatar
    Join Date
    Sep 2009
    Location
    Dallas, Texas
    Posts
    589

    Default

    To give an example using the css example.

    Code:
    Ext.onReady(function () {
        var btns = new Array(6);
        for (var i = 0; i < 6; i++) {
            btns[i] = new Ext.Button({
                id: new String(i + 1),
                text: 'Button<br />' + (i + 1),
                scale: 'huge',
                width: 90,
                height: 90,
                handler: function () {
                    alert('You clicked on button #' + this.getId());
                }
            });
        };
        var win = new Ext.Window({
            title: 'Welcome guest user...',
            closable: false,
            border: true,
            plain: false,
            layout: 'table',
            layoutConfig: {
                columns: 3
            },
    
            bodyStyle: 'padding:0px 0px 0px 0'
        });
        win.add(btns);
        win.show(this);
    });
    HTML Code:
    <html>
        <head>
            <link rel="stylesheet" type="text/css" href="../ext3/resources/css/ext-all.css" />
            <script type="text/javascript" src="extjs.php"></script>
            <style type="text/css">
                    .x-btn-icon .x-btn-huge .x-btn-text {
                                height: 90px;
                                width: 90px;         
                    }
           </style>    
            <script type="text/javascript" src="test.js"></script>
        </head>
        <body style="background-color:#000;">
        </body>
    </html>
    Attached Images Attached Images

Posting Permissions

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