1. #1
    Sencha User
    Join Date
    Aug 2012
    Posts
    18
    Vote Rating
    0
    SammyO is on a distinguished road

      0  

    Default Radiobutton/-field style

    Radiobutton/-field style


    I want radiobuttons with a 'circle and dot' style, instead of the default checkbox. How do I achieve this?


  2. #2
    Sencha Premium Member danguba's Avatar
    Join Date
    Feb 2009
    Location
    Kragujevac, Serbia
    Posts
    367
    Vote Rating
    5
    danguba is on a distinguished road

      0  
    All Best
    ---
    Željko Mitrović
    http://skitanja.blogspot.com/

    "Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live." Martin Golding

  3. #3
    Sencha User
    Join Date
    Aug 2012
    Posts
    18
    Vote Rating
    0
    SammyO is on a distinguished road

      0  

    Default


    Yes, I've searched the Sencha documentation for an answer to my question, but I couldn't find it anywhere. Same as with your link. This is just a documentation page. Where can I find the setting/property for the classic radiobutton style?

  4. #4
    Sencha Premium Member danguba's Avatar
    Join Date
    Feb 2009
    Location
    Kragujevac, Serbia
    Posts
    367
    Vote Rating
    5
    danguba is on a distinguished road

      0  

    Default


    I'm not sure I'm following you mate. Just use radiofield instead of checkboxfield. Let say that you have
    Code:
    {
        xtype: 'form',
        items: [{
            xtype: 'checkboxfield',
            boxLabel  : 'Test'
        }]
    }
    If you need radio instead of chekbox just change xtype
    Code:
    {
        xtype: 'form',
        items: [{
            xtype: 'radiofield',
            boxLabel  : 'Test'
        }]
    }
    All Best
    ---
    Željko Mitrović
    http://skitanja.blogspot.com/

    "Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live." Martin Golding

  5. #5
    Sencha User
    Join Date
    Aug 2012
    Posts
    18
    Vote Rating
    0
    SammyO is on a distinguished road

      0  

    Default


    Yes, that's what I have. I has the functionality of a radiobutton (only 1 item can be selected), but the layout/style of a checkbox: a checkmark in a box, instead of a circle with a dot in it. Do you understand what I mean?

  6. #6
    Sencha Premium Member danguba's Avatar
    Join Date
    Feb 2009
    Location
    Kragujevac, Serbia
    Posts
    367
    Vote Rating
    5
    danguba is on a distinguished road

      0  

    Default


    You are using xtype: 'radiofield' and it still displays a chekbox??? That is almost impossible. Could you share code snipet?
    All Best
    ---
    Željko Mitrović
    http://skitanja.blogspot.com/

    "Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live." Martin Golding

  7. #7
    Sencha User
    Join Date
    Aug 2012
    Posts
    18
    Vote Rating
    0
    SammyO is on a distinguished road

      0  

    Default


    xtype: 'fieldset',
    defaults: {
    xtype: 'radiofield',

    },
    items: [{
    name: radio'type',
    label: 'Wrong adress'
    },{
    name: 'radiotype',
    label: 'Inappropriate picture'
    },{
    name: 'radiotype',
    label: 'Misspelled'
    }]
    },{

    with screenshot:
    Screenshot from 2012-08-15 13:27:10.png

  8. #8
    Sencha Premium Member danguba's Avatar
    Join Date
    Feb 2009
    Location
    Kragujevac, Serbia
    Posts
    367
    Vote Rating
    5
    danguba is on a distinguished road

      0  

    Default


    Ah... you are using SenchaTouch and not ExtJS. Nevertheless I just pasted you code (fixed name: radio'type', to name: 'radiotype',)
    Code:
    var form = Ext.create('Ext.form.Panel', {
        fullscreen: true,
        items: [{
            xtype: 'fieldset',
            defaults: {
                xtype: 'radiofield',
            },
            items: [{
                name: 'radiotype',
                label: 'Wrong adress'
            },{
                name: 'radiotype',
                label: 'Inappropriate picture'
            },{
                name: 'radiotype',
                label: 'Misspelled'	
            }]
        }]
    });
    in sencha online docs code editor and everything works as expected. I'm note sure what could be problem. Are you using some custom CSS?
    All Best
    ---
    Željko Mitrović
    http://skitanja.blogspot.com/

    "Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live." Martin Golding

  9. #9
    Sencha User
    Join Date
    Aug 2012
    Posts
    18
    Vote Rating
    0
    SammyO is on a distinguished road

      0  

    Default


    No, I wasn't, until now. I fixed the problem, by using the following custom CSS code:

    .x-field .x-input-radio:after,
    .x-field.x-item-disabled .x-input-radio:checked:after {
    background: #910f7d;
    width: 1.3em;
    height: 1.3em;
    border-radius: 50%;
    border-style: none;
    }
    .x-field .x-input-radio:checked:after {
    background: #fff;
    width: 1.3em;
    height: 1.3em;
    border-radius: 50%;
    border-style: solid;
    border-color: #910f7d;
    border-width: 0.3em;
    }

    This works. But I was hoping there would be a Sencha layout setting, instead of building my own.
    Thanks anyway!

  10. #10
    Sencha Premium Member danguba's Avatar
    Join Date
    Feb 2009
    Location
    Kragujevac, Serbia
    Posts
    367
    Vote Rating
    5
    danguba is on a distinguished road

      0  

    Default


    Well I wasn't much of a help but I'm glad you solved your problem
    All Best
    ---
    Željko Mitrović
    http://skitanja.blogspot.com/

    "Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live." Martin Golding

Thread Participants: 3

Tags for this Thread

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