How to use radiogroup xtype in dialog?

[Former Community Member]

Hi

 I have created three radio buttons in dialog for custom component.

 In that I able to select three radio buttons at a time but only one option needs to select at a time?

How to achieve this .Please suggest me a solution.

Thanks in advance

[smacdonald2008]

What you want to do in this case is to write a custom xtype for your component and add JavaScript logic to the JS file that contains the custom xtype. You can code your radio buttons and use JavaScript logic to define the functionality that you want. 

TO learn how to write a custom xtype see this community article.  

http://helpx.adobe.com/experience-manager/using/creating-aem-multifield-components.html

See the file CustomWidget.js file (in your use case - you will want to define radio buttons). However -- this article will inform you how to write the custom xtype, code some xtypes in the custom xtype (ie - CustomWidget.js), define behaviour, and register the custom xtype.

As an example of overriding behaviour of controls in a dialog (ie - dynamically set controls in a dialog) -- see this one:

http://helpx.adobe.com/experience-manager/using/dynamically-updating-aem-custom-xtype.html

You can add a lot of logic in the CustomWidget using the AEM Ext JS JavaScript library. These 2 articles teach you how to use them within a custom xtype/AEM dialog. For information about this JavaScript library, see http://www.sencha.com/learn/overview-of-extjs-2.

Hope this helps

[Former Community Member]

Thanks

But we have a xtype called ''radiogroup' how i can use this in dialog .

In dialog how i can group the radio buttons for example am  having two radio buttons called male and female . The user can select only one option at a time .

Is this scenario can be achieve by using xtype 'radiogroup'

If u post some examples it will be great.

I hope my question clear.

[smacdonald2008 · Accepted solution]

When you define a custom xtype -- you are still using available xypes. For example - in the article -- notice we are programmatically defining this xtype (a drop down):

//DROP DOWN
this.linkType = new CQ.form.Selection({
            type:"select",
            cls:"customwidget-1",
            listeners: {
                selectionchanged: {
                    scope:this,
                    fn: this.updateHidden
                }
            },
            optionsProvider: this.optionsProvider
        });

What I am suggesting is in your JS code - you define this data type: CQ.Ext.form.RadioGroup. For information -- see: 

http://dev.day.com/docs/en/cq/current/widgets-api/index.html?class=CQ.Ext.form.RadioGroup

Follow the article that develops the dialog that uses the custom xtype.In the CustomWidget.js, define a CQ.Ext.form.RadioGroup (instead of CQ.form.Selection) and define your buttons. You can use supported events and methods of a CQ.Ext.form.RadioGroup to drive the functionality that you want in your AEM component dialog. (See the reference docs in the above link.)

It is really powerful defining your own event handlers for your AEM dialog. 

We are working on new articles and new code examples. We will be putting out a series of articles showing use of different xtypes and use cases. 

[Former Community Member]

I got understand so you are suggesting to create radio buttons through JS itself not in creating the node structure in CRXDE Lite right ?

Correct me if am wrong

[Former Community Member]

Thanks for your help.

I am working on it

[smacdonald2008]

That is exactly what I am suggesting. The benefit is when defining in JavaScript -- you have access to the methods and event handlers of the data type. In your case -- the methods and events that belong to CQ.Ext.form.RadioGroup. This allows you to drive custom functionality that is not available with OOB when you define it using Nodes and Props using CRXDE Lite.