Кнопка Ext Js радио с ввода текста на этикетке

Question

В ExtJS я хотел бы достичь эквивалент:

<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.

Любые советы, благодарственные.

Answer 1

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

Answer 2

Добавить <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.