Clearing ExtJS champ d'entrée de liste déroulante

Question

j'ai un Ext.form.ComboBox avec les propriétés suivantes:

fieldLabel: 'Regiune', 
valueField: 'id', 
displayField: 'reg', 
id: 'cbRegR', 
typeAhead: true, 
store: new Ext.data.JsonStore({...}), 
mode: 'local', 
emptyText: '', 
listeners:{...} 

Le problème est que je supprimer manuellement le champ de saisie de la liste déroulante après la sélection d'une valeur dans la liste déroulante pour voir tous les éléments de la liste. Le sujet est la liste affiche uniquement les éléments qui commencent par des lettres dans le champ de saisie. Comment puis-je effacer le champ de saisie de la liste déroulante d'expansion? J'ai essayé ce qui suit, mais il ne fonctionne pas:

listeners: { 'expand': function() { cbRegR.clearValue(); } } 

semble être facile, mais ce n'est pas pour moi .. Toutes les idées claires? Merci d'avance.

Answer 1

Ajout de la propriété de configuration à votre combobox

triggerAction: 'all' 

pourrait faire l'affaire, sans qu'il soit nécessaire d'enregistrer un événement d'expansion gestionnaire ou effacement de la valeur de la zone de liste déroulante

Answer 2

L'événement d'expansion est le bon, mais vous devez faire attention à la portée.

listeners: { 
'expand': function() { 
    cbRegR.clearValue(); 
}, 
scope:this 
} 

Le réglage de la portée aide-t-il?

Answer 3

C'est un comportement intrinsèque des Ext JS ComboBox-es de filtrer les éléments de la liste en fonction de la valeur du champ, comme vous le savez déjà.

Vous pouvez percevoir de manière visible la méthode expand(), en ajoutant des éléments pour effacer la valeur avant de rendre la liste. EG:

Ext.override(Ext.form.ComboBox, { 

    expand : function(){ 
     if(this.isExpanded() || !this.hasFocus){ 
      return; 
     } 
     //ADDITIONS HERE: 
     this.clearValue(); 
     this.doQuery("", true); 
     //ADDITIONS END HERE 

     if(this.title || this.pageSize){ 
      this.assetHeight = 0; 
      if(this.title){ 
       this.assetHeight += this.header.getHeight(); 
      } 
      if(this.pageSize){ 
       this.assetHeight += this.footer.getHeight(); 
      } 
     } 

     if(this.bufferSize){ 
      this.doResize(this.bufferSize); 
      delete this.bufferSize; 
     } 
     this.list.alignTo.apply(this.list, [this.el].concat(this.listAlign)); 

     // zindex can change, re-check it and set it if necessary 
     this.list.setZIndex(this.getZIndex()); 
     this.list.show(); 
     if(Ext.isGecko2){ 
      this.innerList.setOverflow('auto'); // necessary for FF 2.0/Mac 
     } 
     this.mon(Ext.getDoc(), { 
      scope: this, 
      mousewheel: this.collapseIf, 
      mousedown: this.collapseIf 
     }); 
     this.fireEvent('expand', this); 
    } 

}); 

Answer 4

L'utilisation cbRegR ne fonctionnera pas, car il est une variable non définie. Soit utiliser

listeners: { 'expand': function() { Ext.getCmp('cbRegR').clearValue(); } } 

ou une approche plus sophistiquée:

listeners: { 'expand': function(self) { self.clearValue(); } }