Ext Js bouton radio avec le texte d'entrée dans l'étiquette

Question

En ExtJs je voudrais obtenir l'équivalent de:

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

Lorsque la case d'entrée est associée au bouton radio.

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

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

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

         ] 
); 

je voudrais « On » l'étiquette d'avoir un Ext.form.TextField à côté.

J'ai essayé d'ajouter un Ext.form.TextField au RadioGroup mais il ne s'affichera pas (comme je le suppose parce que ce n'est pas une Radio) et je ne peux pas ajouter d'éléments à l'objet Radio.

Un conseil apprecaited, merci.

Answer 1

Je ne pense pas que ce soit possible à moins de surcharger la classe RadioButton et de changer sa logique de rendu (et je pense que ce serait plus complexe que de faire un textfield correctement comme vous l'avez proposé). Une meilleure approche consisterait simplement à ajouter la radio et le champ de texte en tant que deux champs séparés et à les lier par programmation. Dans Ext 3.2 vous pouvez utiliser un CompositeField pour le faire facilement. Dans le gestionnaire de la radio fn, vous pouvez définir la zone de texte associée ou toute autre logique dont vous avez besoin.

Answer 2

Ajouter un élément <input/> dans le boxLabel, puis sur l'événement render RadioGroup créer un TextField et l'appliquer à cet élément

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

J'ai confirmé que cela fonctionne avec TextField, et bien que je n'ai pas essayé, il devrait fonctionner avec DateField ou ComboBox aussi. Également non testé, mais au lieu de créer un <input/>, vous pouvez créer un élément conteneur et créer le TextField et renderTo cet élément.