1. #1
    Sencha User
    Join Date
    Nov 2009
    Posts
    93
    Vote Rating
    0
    roshniblr is on a distinguished road

      0  

    Default Unanswered: RadioGroup not getting displayed

    Unanswered: RadioGroup not getting displayed


    Hi,

    I just tried a simple RadioGroup which did not render in my page.
    Here is the snippet:

    var MyRadioGroupId_Component= new Ext.form.RadioGroup({
    renderTo:'MyRadioGroupId',
    listeners: {change:function(obj, newValue, oldValue) {
    onChangeOfRadio(newValue);
    }
    },
    items: [{boxLabel: 'I accept ', name: 'name1', inputValue: 'Yes', width:150},
    {boxLabel: 'I do not accept t', name: 'name2', inputValue: 'No', width:150, checked: true}],
    columns: 1,
    checked: true,
    id: 'myRadioGrp'
    });

    I also tried create instead of new but the component still does not render.

  2. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,625
    Vote Rating
    331
    Answers
    550
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    Please use code tags when you post code (# button on the editor toolbar). It makes it harder for us to help you if you don't.

    Try putting a width and height on your radiogroup. Worked for me once I added them.

    The way to debug an issue like this is to use Firebug or a similar tool to inspect the elements on the page. Using that I could see that the radiogroup was there it just had a very small size so I couldn't see it.

  3. #3
    Sencha User
    Join Date
    Nov 2009
    Posts
    93
    Vote Rating
    0
    roshniblr is on a distinguished road

      0  

    Default


    Hi,
    Thanks for the suggestion. I could see the radiogroup on the page.
    There is one more issue that I'm facing. I can select both the radio buttons in the radiogroup.
    I thought I should be able to select only one at a time not both at the same time.

  4. #4
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,625
    Vote Rating
    331
    Answers
    550
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    The radio buttons need to have the same name for that.

  5. #5
    Sencha User
    Join Date
    Nov 2009
    Posts
    93
    Vote Rating
    0
    roshniblr is on a distinguished road

      0  

    Default


    Code:
    var MyRadioGroupId_Component= new Ext.form.RadioGroup({
        renderTo:'MyRadioGroupId',
        listeners: {change:function(obj, newValue, oldValue) {
                          onChangeOfRadio(newValue);
                      }
                  },
        items: [{boxLabel: 'I accept ', name: 'radioGrp', inputValue: 'Yes', width:150}, 
                    {boxLabel: 'I do not accept t', name: 'radioGrp', inputValue: 'No', width:150, checked: true}],
        columns: 1,
        checked: true,
        id: 'myRadioGrp'
    });
    I have same name still i can select both the radio buttons. I want if the first radio is selected then the second radio will not be selected i.e value is false and vice versa.

  6. #6
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,625
    Vote Rating
    331
    Answers
    550
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    Try commenting out the call to onChangeOfRadio(). That's breaking it for me. I obviously don't know what that function does but if it causes an error to be thrown it'll stop the selection working correctly.

  7. #7
    Sencha User
    Join Date
    Nov 2009
    Posts
    93
    Vote Rating
    0
    roshniblr is on a distinguished road

      0  

    Default


    Wow its working now after commenting that.:

    But I need that onChnage functionality. Is there any way to fetch the inputValue or manually setting the value for the radioGroup? In Extjs 3.x, I was using something like this which used to work fine but in 4 its not working:
    Code:
    var MyRadioGroupId_Component= new Ext.form.RadioGroup({
        renderTo:'MyRadioGroupId',
        listeners: {change:function(obj, newValue, oldValue) {
                          onChangeOfRadio(newValue);
                      }
                  },
        items: [{boxLabel: 'I accept ', name: 'radioGrp', inputValue: 'Yes', width:150}, 
                    {boxLabel: 'I do not accept t', name: 'radioGrp', inputValue: 'No', width:150, checked: true}],
        columns: 1,
        checked: true,
        id: 'myRadioGrp'
    });
    if ('${condition}' == 'Yes') {
            Ext.getCmp("myRadioGrp").setValue('Yes');   
     } else {       
       Ext.getCmp("myRadioGrp").setValue('No');    
    }
    the red part currently is not working which used to work fine in 3.x.

  8. #8
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,625
    Vote Rating
    331
    Answers
    550
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    Please read the documentation:

    http://docs.sencha.com/ext-js/4-0/#!...ethod-setValue

    It would be something like this:

    Code:
    Ext.getCmp("myRadioGrp").setValue({radioGrp: 'Yes'});

Thread Participants: 1