1. #1
    Sencha User
    Join Date
    Mar 2009
    Posts
    84
    Vote Rating
    0
    Speedy is on a distinguished road

      0  

    Default Radiobutton icon instead of labeltext

    Radiobutton icon instead of labeltext


    I have a radiogroup and instead of the boxLabel I want to show an Icon next to each radiobutton, is there something like an iconCls that would work for radiobuttons or how can I manipulate the labelfield so it is able to show icons/images ??

    Thx speedy

  2. #2
    Ext JS Premium Member
    Join Date
    Feb 2009
    Posts
    108
    Vote Rating
    0
    PierceSD is on a distinguished road

      0  

    Default


    This might work...
    Code:
       ...
       boxLabel: '<span class="some-icon-CSS-class"/>'
       ...
    --Chad Eberle
    Web Application Architect
    Pierce County Software Development
    Pierce County, Washington

  3. #3
    Sencha User
    Join Date
    Mar 2009
    Posts
    84
    Vote Rating
    0
    Speedy is on a distinguished road

      0  

    Red face


    unfortunately it doesn't,

  4. #4
    Ext JS Premium Member
    Join Date
    Feb 2009
    Posts
    108
    Vote Rating
    0
    PierceSD is on a distinguished road

      0  

    Default


    Ah, sorry. Both of these should work:
    Code:
    {
        xtype: "radio",
        labelStyle: "background: url(/some/img/file.gif)",
        boxLabel:" "  //or possibly "&nbsp;"
    }
    or

    Code:
    {
        xtype: "radio",
        boxLabel: " ",
        listeners: {
            "render" : function() {
                 this.labelEl.setStyle("background-image", "url(/some/image/file.gif");
                 //or this.labelEl.addClass("my-icon-css-class");
             }
        }
    }
    --Chad Eberle
    Web Application Architect
    Pierce County Software Development
    Pierce County, Washington

  5. #5
    Sencha User
    Join Date
    Mar 2009
    Posts
    84
    Vote Rating
    0
    Speedy is on a distinguished road

      0  

    Default


    first one simple does nothing, second one returns that this.labelEl is not available/null

    problem is, that the inner wrapper seems to have a radiobutton icon, one div called something like input and a label div what probably will be the boxLabel

    imo radio.el.dom.nextSibling is the label element but not sure, tried

    Code:
    radio.el.dom.nextSibling.style.backgroundImage = 'url...';
    but did not help

  6. #6
    Sencha User
    Join Date
    Mar 2009
    Posts
    84
    Vote Rating
    0
    Speedy is on a distinguished road

      0  

    Default


    I tried :
    Code:
        radio.getEl().dom.nextSibling.className = 'myLabelClass';

    where myLabelClass has only few settings:
    Code:
        background: url( myurl ) no-repeat !important;
        display: inline !important;
        width: 'auto' !important;

    this way I get the icon to appear but unfortunately not inline but below the radio button and additionally there is a scrollbar below the icon too

    setting the width to '30px' or something alike changes nothing at all

  7. #7
    Sencha User
    Join Date
    Mar 2009
    Posts
    84
    Vote Rating
    0
    Speedy is on a distinguished road

      0  

    Default


    baaaaaaaaaah, for those who are interested... the solution is so much more easy

    simple set a html image to the boxLabels string, tooo easy

    Code:
    {
    xtype: 'radiogroup',
       items: [
         { boxLabel: "<img src='xyz1.gif'/>", name: 'radio', inputValue: 'radio1', checked: true },
         { boxLabel: "<img src='xyz2.gif'/>", name: 'radio', inputValue: 'radio2' },
         { boxLabel: "<img src='xyz3.gif'/>", name: 'radio', inputValue: 'radio3' },
       ]
    }

  8. #8
    Sencha Premium Member
    Join Date
    May 2012
    Posts
    63
    Vote Rating
    1
    stevanicus is on a distinguished road

      0  

    Default


    Excellent, thank you! Any idea how to display the image below the radio button?

  9. #9
    Sencha User
    Join Date
    Oct 2011
    Posts
    26
    Vote Rating
    0
    lastevilstanding is on a distinguished road

      0  

    Default


    thanks a lot , Speedy !

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