Ext Js Radio button with input text in its label

Question

In ExtJs I would like to achieve the equivalent of:

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

Where the input box is associated to the radio button.

new Ext.form.RadioGroup({
                        id:"alerts",

                        items: [
                            new Ext.form.Radio({
                                boxLabel:'Now',

                            }),
                            new Ext.form.Radio({
                                boxLabel:'On',
                            })

                         ]
);

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

I have tried adding a Ext.form.TextField to the RadioGroup but it will not show (as I assume its because its not a Radio) and I am unable to add items to the Radio object.

Any advice apprecaited, thanks.

Answer 1

I don't think that's possible unless you override the RadioButton class and change its rendering logic (and I think that would be more complex than you would think to make a textfield render correctly the way you proposed). A better approach would be to simply add the radio and the textfield as two separate fields and link them programmatically. In Ext 3.2 you could use a CompositeField to do this easily. In the radio's handler fn you can set focus to its associated textbox or whatever other logic you'd need.

Answer 2

Add an <input/> element in the boxLabel, then on the RadioGroup render event create a TextField and apply it to that 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've confirmed that this works with TextField, and although I haven't tried it, it should work with DateField or ComboBox too. Also untested, but instead of creating an <input/>, you could create a container element and create the TextField and renderTo that element.