Results 1 to 2 of 2

Thread: Icon Button? Why is this not working and why is it so difficult?

  1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    127
    Answers
    4

    Exclamation Icon Button? Why is this not working and why is it so difficult?

    Read a few threads here about creating an icon button but nothing seems to have worked for me thus far. Why is this so hard? Is it me or should this be a lot easier?

    Code:
                        {
                            id: 'myclosebutton',
                            ui: 'plain',
                            iconMask: true,
                            iconCls: 'myclose',
                            handler: function() {
                                console.log('handler:');
                            }
                        }
    
    then in the CSS:
    
    .myclose {
        -webkit-mask-box-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAsTAAALEwEAmpwYAAABbmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNC40LjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iPgogICAgICAgICA8ZGM6c3ViamVjdD4KICAgICAgICAgICAgPHJkZjpCYWcvPgogICAgICAgICA8L2RjOnN1YmplY3Q+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgrlPw1BAAAEUElEQVRYhc2XvUsrWRiHn/m6k4CJX0WWmBgsLNIERLDYSi5isXbxg2Dwi/0Tdsst7+3WP8BGLcRCsBI3WHgTXFRUwgUbQSsxhAVFJApJzGRmi83MzmQm0evdvbu/Jpk57zm/Z9455z1zBMMw8NLs7Ox7wzDigiB0AX7PoJdVNgzjQRCEi83NzU9eAYIdYGlpyVetVn8Cfga63mjaSg/Ar6qqLq+trVVcADMzM9/JsvwbMATg8/kIh8MEAgHevXv3Jsfn52ceHx8pFotUKpbnZ03Tftja2vrDAmg8+REwJMsyiUSCWCyGKIpvfly7dF3n+vqa8/NzNE0D+Kyq6vdra2sVGaCR9iFZlhkdHaWzs5NyuUy1WqVWq1Gv163BJEnyNDHv26ElSUKWZRRFYWBggJ6eHnK5HJqmDTU8P8qN2F8ARkZG8Pl83NzcUC6XHQM2G5vXgiC0BVMUxfrt6OhgZGSEo6Mj0/OjdHl5+R74sbe3l4GBAa6vr3l+fsYwDERRxDAMBEGwrk3Zr73a7emXJAld16lUKvT29nJ3d0e5XJa3t7d/Fw3DiAP09fVxc3Pj6GymXtd1x3VzuzmRm9tN1Wo163+pVCIWi5n94mJjnTuM/k2Ier1OR0cHAIIgdIk0ioymaei6/k0g7LJeWmN5tIQQRZGJiQmCwWBLiFAoxOTkJIqivBrCc6E3QyiKQjKZJJFIkE6nPSFCoRDT09NEo1GmpqZeDWEB1Ot1Rwc7RDKZZHBwEIBgMMji4iLd3d2OJ0+lUtaSC4VCTE1NuSC95MpAMwTA09OTI8bv9zM3N0d3dzfhcNhhburq6urFOQEge92s1+tWYdE0jd3dXXRdZ3h42AGxsLCAKIou84ODA05PT5Ekyaoj9jHbZsAOYUrTNDKZDCcnJ44YVVVd5tlsltPTU8cY7TLhmAMvQezt7bkg7Nrf37fMm8doBSF6BbfTxcWF5/1areaqpK+RA0DX9ZZFBqC/v590Ou05kKIopNNpwuHwFxUqC8Cc8a0gotEo6XTa9c6bIVKp1KsgXAB2NUPEYjHm5+dd5plMhmw26wkRiUTaZrMtQDPE2NiYy3xnZ4ezszMODw/Z3993QYyPj3uaftEkNCE2NjYoFosO83w+b1XL4+NjMpmM1V4qldja2mq5edlfgwiUTepWENVqldXVVQqFAjs7O46lZkLk83kymQylUon19XVKpZLV3jyu+RUFIDe+25Hlv4tic9UyN4+VlRXPGNMkn89zfn5uxdvbRVG0+pjthmE8iIIgXADc39/T2dnpMLDLay/32rzscV77it/vp1AomJm4EBsnlsrt7S2BQIBAIPDVEK3aVVXFMAxub28BKpubm5/MSfgB/kphJBJhcHCQQCCAJEn/CISiKITDYYLBoH3+fIDGbqiq6nK1Wp3UNG0ol8uRSCSIx+MAVCoV1zt9rRRFQVXVVgeTZfi/HM1M/aeH02Z9q+P5n12KIOV1D0rcAAAAAElFTkSuQmCC);
    }

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,449
    Answers
    3997

    Default

    It must be in your encoding as with that button config:

    Code:
                    {
                        ui       : 'plain',
                        iconMask : true,
                        iconCls  : 'myclose',
                        handler  : function() {
                            console.log('handler:');
                        }
                    }
    And this CSS it works

    Code:
            .myclose {
                -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAABqUlEQVRoBe2awWnDUBBE843B4NxcQSAFOC4lJeTkoxtJDykgvRhcgCFNJCFgIs+ChEHSJX93YT6ZD4ssmR3NztNFH5Wu6+6iVynlEZpbp+4J3s5OjWm7DRxZuMMCdUB9oyzNmrJe01hEejMtM5exIh6bCI3JbFkDT27EckEDs5DI8iHCWcmy6IowC4ksHyKclSyLrgizkMjyIcJZybLoijALiSwfIpyVLItuOGFso/xiuEvAgJdeK0DqJrHEhtsTTh9ul9y/ChR2KE+Y1ruDt2ccI7d6PszcK+oFFblWELt3Cn6i/8epMW5/W+LKGrUZ/0NwboF5QxuPsfY8dmOxJs41cBOYHCZF2BFeE60i3AQmh0kRdoTXRKsIN4HJYVKEHeE10frvCNvr4RH1HojH3rGHr3hqA7VdkxPKvuKJ3AA4hn7BM3xxA5N71Fdv1gz/tax3P+hFHmsJwM/8wraMadqOh5GuXda76rVqNWb7wgeevQvRRQ1MBCPFiginxEokKsJEMFKsiHBKrESiIkwEI8WKCKfESiQqwkQwUqyIcEqsRKIiTAQjxcoVrP83/9czD9EAAAAASUVORK5CYII=);
            }
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Fullstack Engineer
    ________________
    Modus Create is based on the model of an open source team. We’re a remote, global team of experts in our field. To find out more about the work we do, head over to our website.

    Check out my GitHub:
    https://github.com/mitchellsimoens

Posting Permissions

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