botón Ext Js Radio con el texto de entrada en su etiqueta

Question

En ExtJs quisiera alcanzar el equivalente de:

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

Cuando el cuadro de entrada está asociado al botón de radio.

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

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

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

         ] 
); 

Me gustaría que la etiqueta "On" tenga un Ext.form.TextField al lado.

He intentado agregar un Ext.form.TextField al RadioGroup pero no se mostrará (como supongo que es porque no es una Radio) y no puedo agregar elementos al objeto de Radio.

Cualquier consejo apreció, gracias.

Answer 1

No creo que sea posible a menos que anule la clase RadioButton y cambie su lógica de representación (y creo que eso sería más complejo de lo que podría pensar para hacer un campo de texto correctamente como lo propuso). Un mejor enfoque sería simplemente agregar la radio y el campo de texto como dos campos separados y vincularlos mediante programación. En Ext 3.2 puede usar un CompositeField para hacer esto fácilmente. En el controlador de la radio, puede configurar el foco en su cuadro de texto asociado o en cualquier otra lógica que necesite.

Answer 2

añadir un elemento <input/> en el boxLabel, a continuación, en el caso RadioGroup render crear un TextField y aplicarlo a ese elemento

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

He confirmado que esto funciona con TextField, y aunque no tengo lo intenté, debería funcionar también con DateField o ComboBox. También no se ha probado, pero en lugar de crear un <input/>, puede crear un elemento contenedor y crear el elemento TextField y renderTo.