Extjs radiogroup fieldLabel not displaying inside

Question

I am using ExtJs 2.3.0.

I have a panel and inside it a radiogroup as follows

var testPanel = {
          xtype: 'panel',  
          border: false,
          items: [ 
                    { fieldLabel: 'Please select ', 
                      xtype: 'radiogroup', 
                      id: 'id1', 
                      columns: 2, 
                      vertical: false
                    }
                 ],
                 items: [
                            { boxLabel: 'Yes', name: 'yes', inputValue: 'Yes', xtype: 'radio'},
                            { boxLabel: 'No', name: 'no', inputValue: 'No', xtype: 'radio' }
                        ]
         }

The issue is-
The fieldLabel 'Please select' of radioBox is not displaying. I am able to see 'Yes'/ 'No' radiobuttons.

When I change xtype of testPanel to 'form', the label displays. However, I can't use 'form' xtype. I want to use 'Panel' only.

Please let me know why the fieldLabel is not diaplying inside panel and any workaround for this.

Answer 1

For one thing, the individual radio buttons must be items of the radio group. Here, you've got the items keys that is duplicated in your config object, meaning you actually end up with 2 radios in your panel, but no radio group.

Then, simple panels do not have support for displaying labels. You must use a form panel for that.

Finally, you probably want to give all the radio in the group the same name, so that myForm.getForm().getValues() returns something like {myField: "Yes"} (the value will be taken from inputValue).

So here's what you're trying to do:

Ext.ComponentMgr.create({
    xtype: 'form', // notice the changed xtype
    renderTo: Ext.getBody(),
    border: false,
    items: [{
        fieldLabel: 'Please select ',
        xtype: 'radiogroup',
        id: 'id1',
        columns: 2,
        vertical: false,
        // radio buttons must be children of the radio group
        items: [{
            boxLabel: 'Yes',
            // you probably want to give your radios the same name
            name: 'myField',
            inputValue: 'Yes'
        }, {
            boxLabel: 'No',
            name: 'myField',
            inputValue: 'No'
        }]
    }]
});