Ext Js Radio button with entered text on the shortcut

Question

In ExtJs, I would like to get the equivalent:

<input type="radio"><label><input type="text"></label> 

If the input field is associated with a switch.

 new Ext.form.RadioGroup({ id:"alerts", items: [ new Ext.form.Radio({ boxLabel:'Now', }), new Ext.form.Radio({ boxLabel:'On', }) ] ); 

I would like the label "On" to have Ext.form.TextField next to it.

I tried to add Ext.form.TextField to the RadioGroup, but it will not display (as I assume because it is not a radio), and I cannot add elements to the Radio object.

Any advice, thanks, thanks.

Answer 1

Add a <input/> element to boxLabel , then create a TextField in the boxLabel visualization event and apply it to this element

 new Ext.form.RadioGroup({ id:"alerts", items: [ {boxLabel: 'Now',}, {boxLabel: 'On <input id="on_date" type="text"/>'}, // contains <input/> id is "on_date" ], listeners: { change: function() { // really, check if "on" was clicked if(true) { Ext.getCmp('on_date_field').focus(); } else { // otherwise, disable the field? } }, render: function() { new Ext.form.TextField({ id: 'on_date_field', applyTo: 'on_date', // apply textfield to element whose id is "on_date" }); } } }); 

I confirmed that this works with TextField, and although I have not tried it, it should also work with DateField or ComboBox. Also untested, but instead of creating <input/> you can create a container element and create a TextField and renderTo .

Answer 2

I don’t think it’s possible if you do not override the RadioButton class and change its rendering logic (and I think it would be more complicated than you think to make the text box display correctly, as you suggested). A better approach would be to simply add a radio and text field as two separate fields and link them programmatically. In Ext 3.2, you can use CompositeField to make this easy. In the fn radio handler, you can set the focus on the associated text field or any other logic that you need.