Rendu des valeurs suggérées d'une Combobox ext à un élément du DOM

Question

J'ai une liste déroulante ext qui utilise un magasin pour suggérer des valeurs à un utilisateur pendant qu'il tape.

Un exemple dont se trouve ici: combobox example

est-il un moyen de le faire de sorte que la liste de texte suggéré est rendu à un élément dans le DOM. Veuillez noter que je ne parle pas de l'option de configuration "applyTo", car cela rendrait l'ensemble du contrôle, y compris la zone de texte, à l'élément DOM.

Answer 1

Vous pouvez utiliser le plugin pour cela, puisque vous pouvez appeler ou même remplacer les méthodes privées à partir du plug-in:

var suggested_text_plugin = { 

    init: function(o) { 

     o.onTypeAhead = function() { 
      // Original code from the sources goes here: 

      if(this.store.getCount() > 0){ 
       var r = this.store.getAt(0); 
       var newValue = r.data[this.displayField]; 
       var len = newValue.length; 
       var selStart = this.getRawValue().length; 
       if(selStart != len){ 
        this.setRawValue(newValue); 
        this.selectText(selStart, newValue.length); 
       } 
      } 

     // Your code to display newValue in DOM 
     ......myDom.getEl().update(newValue); 
     }; 
    } 
}; 


// in combobox code: 

var cb = new Ext.form.ComboBox({ 
    .... 
    plugins: suggested_text_plugin, 
    .... 
}); 

Je pense qu'il est même possible de créer une chaîne de méthodes, appelant la méthode originale avant ou après le tien, mais je n'ai pas encore essayé.

De même, ne me forcez pas à utiliser des méthodes de définition et d'invocation de plug-in non standard (non documentées). C'est juste ma façon de voir les choses.

EDIT:

Je pense que la chaîne de méthode pourrait être mis en œuvre quelque chose comme ça (non testé):

.... 
o.origTypeAhead = new Function(this.onTypeAhead.toSource()); 
// or just 
o.origTypeAhead = this.onTypeAhead; 
.... 

o.onTypeAhead = function() { 
    // Call original 
    this.origTypeAhead(); 
    // Display value into your DOM element 
    ...myDom.... 
}; 

Answer 2

Alors, clarifiez, vous voulez que le texte sélectionné s'affiche quelque part, en plus directement au-dessous de la saisie de texte. Correct? ComboBox est juste un composé de Ext.DataView, une entrée de texte, et un bouton de déclenchement optionnel. Il n'y a pas une option officielle pour ce que vous voulez et le piratage pour le faire faire ce que vous voulez serait vraiment douloureux. Alors, le plus simple d'action (autre que de trouver et d'utiliser une autre bibliothèque avec un composant qui fait exactement ce que vous voulez) est de construire votre propre avec les composants ci-dessus:

1. Créer une zone de texte. Vous pouvez utiliser un Ext.form.TextField si vous le souhaitez et observer l'événement keyup.
2. Créez un DataView lié à votre magasin, en le rendant à n'importe quel élément DOM souhaité. En fonction de ce que vous voulez, écoutez l'événement 'selectionchange' et prenez les mesures nécessaires en réponse à la sélection. par exemple, setValue sur un élément Ext.form.Hidden (ou élément HTML brut type = "hidden").
3. Dans votre écouteur d'événement de touche, appelez la méthode de filtrage du magasin (voir doc), en passant le nom du champ et la valeur du champ de texte. par exemple, store.filter (« nom », nouvelle RegEx (valeur + «* »))

Il est un peu plus de travail, mais il est beaucoup plus court que d'écrire votre propre composant à partir de zéro ou de piratage ComboBox à se comporter comme tu veux.

Answer 3

@Thevs

Je pense que vous étiez sur la bonne voie.

Ce que j'ai fait était substituer la méthode initList de Combobox.

Ext.override(Ext.form.ComboBox, { 
    initList : function(){ 

Si vous regardez le code, vous pouvez voir le bit où il rend la liste de suggestions à une vue de données.Il suffit donc de définir l'appliquer à l'élément dom vous voulez:

  this.view = new Ext.DataView({ 
      //applyTo: this.innerList, 
      applyTo: "contentbox", 

Answer 4

@qui

Ok. Je pensais que vous vouliez un champ DOM supplémentaire (en plus du champ combo existant).

Mais votre solution remplacerait une méthode dans la classe ComboBox, n'est-ce pas? Cela conduirait à toutes vos combo-boîtes rendraient au même DOM. L'utilisation d'un plugin ne remplacerait qu'une seule instance particulière.

Answer 5

@qui

Une autre chose à considérer est que initList ne fait pas partie de l'API. Cette méthode pourrait disparaître ou le comportement pourrait changer de manière significative dans les futures versions de Ext. Si vous n'avez jamais l'intention de mettre à niveau, vous n'avez pas besoin de vous inquiéter.