Wie erhalte ich ein extjs-Kombinationsfeld, das wie ein normales HTML-Auswahlfeld wirkt?

Question

ExtJS bietet eine schicke Combo-Box mit vielen Funktionen - tippen Sie auf "Weiter", um eine zufällige Texteingabe zu ermöglichen und alle Einträge in der Dropdown-Liste auszublenden, die nicht mit dem bereits eingegebenen Text beginnen.

Ich möchte diese Funktionen nicht. Ich möchte eine Auswahlbox, die sich ziemlich genau so verhält, wie man es von einer normalen Auswahlbox erwarten würde, in vanilla html.

Ich möchte es an einen Datenspeicher gebunden, und ich möchte alle anderen extjs Konfiguration Goodies, die mit der Combo-Box kommen. Ich will einfach nicht, dass Benutzer/Tester ausflippen, wenn sie auf eine Auswahlbox treffen, die ihr bestehendes mentales Paradigma, wie diese Dinge funktionieren, durchbricht.

Also, wie kann ich eine extjs-Kombinationsfeld mehr wie eine Auswahlbox handeln? Oder verwende ich das falsche Widget insgesamt?

Answer 1

Sie können dieses Verhalten nur erhalten, indem Sie die richtige Konfiguration zu verwenden, wenn Sie das Ext.form.ComboBox Objekt instanziiert:

var selectStyleComboboxConfig = { 
    fieldLabel: 'My Dropdown', 
    name: 'type', 
    allowBlank: false, 
    editable: false, 
    // This is the option required for "select"-style behaviour 
    triggerAction: 'all', 
    typeAhead: false, 
    mode: 'local', 
    width: 120, 
    listWidth: 120, 
    hiddenName: 'my_dropdown', 
    store: [ 
     ['val1', 'First Value'], 
     ['val2', 'Second Value'] 
    ], 
    readOnly: true 
}; 
var comboBox = new Ext.form.ComboBox(selectStyleComboboxConfig); 

Ersetzen Sie die mode: 'local' und store Argument in Ihrem Fall, wenn Sie es möchten sein gebunden an eine Ext.data.JsonStore zum Beispiel.

Answer 2

Haben Sie versucht ? Nicht sicher, ob dies nahe ist, was Sie wollen.

var combo = new Ext.form.ComboBox({ 
    typeAhead: false, 

    ... 

}); 

Answer 3

var buf = []; 
buf.push('<option>aA1</option>'); 
buf.push('<option>aA2</option>'); 
buf.push('<option>bA3</option>'); 
buf.push('<option>cA4</option>'); 

var items = buf.join(''); 
new Ext.Component({ 
    renderTo: Ext.getBody(), 
    autoEl: { 
     tag:'select', 
     cls:'x-font-select', 
     html: items 
    } 
}); 

Answer 4

Die derzeit akzeptierte Lösung funktioniert gut, aber wenn jemand eine ComboBox will, die auch Tastatureingaben wie eine einfache HTML-Select-Box behandelt (zB jedes Mal, wenn Sie „P“ drücken wird wählt das nächste Element in die Liste mit "P") beginnen, könnte die folgenden hilfreich sein:

{ 
    xtype: 'combo', 
    fieldLabel: 'Price', 
    name: 'price', 
    hiddenName: 'my_dropdown', 
    autoSelect: false, 
    allowBlank: false, 
    editable: false, 
    triggerAction: 'all', 
    typeAhead: true, 
    width:120, 
    listWidth: 120, 
    enableKeyEvents: true, 
    mode: 'local', 
    store: [ 
     ['val1', 'Appaloosa'], 
     ['val2', 'Arabian'], 
     ['val3', 'Clydesdale'], 
     ['val4', 'Paint'], 
     ['val5', 'Palamino'], 
     ['val6', 'Quarterhorse'], 
    ], 
    listeners: { 
     keypress: function(comboBoxObj, keyEventObj) { 
      // Ext.Store names anonymous fields (like in array above) "field1", "field2", etc. 
      var valueFieldName = "field1"; 
      var displayFieldName = "field2"; 

      // Which drop-down item is already selected (if any)? 
      var selectedIndices = this.view.getSelectedIndexes(); 
      var currentSelectedIndex = (selectedIndices.length > 0) ? selectedIndices[0] : null; 

      // Prepare the search criteria we'll use to query the data store 
      var typedChar = String.fromCharCode(keyEventObj.getCharCode()); 
      var startIndex = (currentSelectedIndex == null) ? 0 : ++currentSelectedIndex; 

      var matchIndex = this.store.find(displayFieldName, typedChar, startIndex, false); 

      if(matchIndex >= 0) { 
       this.select(matchIndex); 
      } else if (matchIndex == -1 && startIndex > 0) { 
       // If nothing matched but we didn't start the search at the beginning of the list 
       // (because the user already had somethign selected), search again from beginning. 
       matchIndex = this.store.find(displayFieldName, typedChar, 0, false);         
       if(matchIndex >= 0) { 
        this.select(matchIndex); 
       } 
      } 

      if(matchIndex >= 0) { 
       var record = this.store.getAt(matchIndex); 
       this.setValue(record.get(valueFieldName)); 
      } 
     } 
    } 
} 

Answer 5

verwenden Sie einfach Ext.merge Funktion

Vom doc: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext-method-merge