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
    392
    Vote Rating
    94
    danguba is just really nice danguba is just really nice danguba is just really nice danguba is just really nice

      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
    392
    Vote Rating
    94
    danguba is just really nice danguba is just really nice danguba is just really nice danguba is just really nice

      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
    392
    Vote Rating
    94
    danguba is just really nice danguba is just really nice danguba is just really nice danguba is just really nice

      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
    392
    Vote Rating
    94
    danguba is just really nice danguba is just really nice danguba is just really nice danguba is just really nice

      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
    392
    Vote Rating
    94
    danguba is just really nice danguba is just really nice danguba is just really nice danguba is just really nice

      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