Ext Js Радиокнопка с вводимым текстом в его метке

Question

В ExtJ я бы хотел получить эквивалент:

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

Где поле ввода связано с переключателем.

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

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

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

                         ]
);

Мне бы хотелось "Вкл"метка, чтобы иметь Ext.form.TextField рядом с ним.

Я попытался добавить Ext.form.TextField в RadioGroup, но он не будет отображаться (как я предполагаю, потому что это не Radio), и яЯ не могу добавить элементы в объект Radio.

Любой совет приветствуется, спасибо.

Answer 1

Добавьте элемент <input/> в boxLabel, затем на событии рендера RadioGroup создайте TextField и примените его к этому элементу

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"
      });
    }
  }
});

Я подтвердил, что это работает с TextField, и хотя я не пробовал, оно должно работать и с DateField или ComboBox. Также не проверено, но вместо создания <input/> вы можете создать элемент контейнера и создать TextField и renderTo этот элемент.

Answer 2

Я не думаю, что это возможно, если вы не переопределите класс RadioButton и не измените его логику рендеринга (и я думаю, что это будет сложнее, чем вы думаете, чтобы текстовое поле отображалось правильно, как вы предлагали). Лучшим подходом было бы просто добавить радио и текстовое поле как два отдельных поля и связать их программно. В Ext 3.2 вы можете использовать CompositeField, чтобы сделать это легко. В обработчике радио fn вы можете установить фокус на соответствующее текстовое поле или любую другую логику, которая вам понадобится.