Comment afficher une boîte de dialogue ExtJS ComboBox en ligne avec du texte?

Question

Je souhaite afficher ce qui suit sur une seule ligne. J'ai essayé d'utiliser les styles float et display.

 
Show this input <input type="text" name="filterOp" id="filterOp"/> inline. 


<script type="text/javascript"> 
    new Ext.form.ComboBox({ 
     applyTo: 'filterOp', 
     triggerAction: 'all', 
     name: 'item', 
     mode: 'local', 
     lazyInit: true, 
     displayField: 'name', 
     valueField: 'id', 
     forceSelection: true, 
     typeAhead: true, 
     inputType:'text', 
     fieldLabel: 'Item selection', 
     style: "display: inline-block", 
     store: new Ext.data.JsonStore({ 
      autoLoad: true, 
      url: 'reporting/json_report_filter_operators.jsp', 
      root: 'rows', 
      fields:['id', 'name'] 
     }) 
    }) 

</script> 

Answer 1

La méthode la plus simple consiste à remplacer les styles de la page.

Tout d'abord, enveloppez votre paragraphe dans une balise P avec un ID spécial.

<p id="my-inline-override"> 
    Show this input <input type="text" name="filterOp" id="filterOp"/> inline. 
</p> 

Ensuite, vous pouvez ajouter un sélecteur CSS à votre page qui fait que la balise DIV ajoutée par Ext JS affiche en ligne (notez que « x-form-champ-wrap » est la classe de l'emballage DIV inséré, vous pouvez le voir si vous utilisez des outils de développement chrome pour parcourir le DOM).

<style> 
#my-inline-override div.x-form-field-wrap { 
    display: inline; 
} 
</style> 

Answer 2

Je suis désolé, votre question est un peu confuse. Qu'est-ce que vous essayez exactement d'obtenir sur une seule ligne? La zone de liste déroulante? Le code? Chaque article dans la zone de liste déroulante? Si c'est un élément, il suffit d'élargir la zone de liste déroulante, ou de faire en sorte que chaque élément ait un débordement caché et une largeur fixe.