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
    382
    Vote Rating
    69
    danguba is a jewel in the rough danguba is a jewel in the rough danguba is a jewel in the rough

      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
    382
    Vote Rating
    69
    danguba is a jewel in the rough danguba is a jewel in the rough danguba is a jewel in the rough

      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
    382
    Vote Rating
    69
    danguba is a jewel in the rough danguba is a jewel in the rough danguba is a jewel in the rough

      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
    382
    Vote Rating
    69
    danguba is a jewel in the rough danguba is a jewel in the rough danguba is a jewel in the rough

      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
    382
    Vote Rating
    69
    danguba is a jewel in the rough danguba is a jewel in the rough danguba is a jewel in the rough

      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