Wie erhalte ich eine extjs Box wie ein normales zu handeln Combo, html-Box wählen?

Question

ExtJS bietet eine schicke Combo-Box, die viele Funktionen hat - vor Typ, so dass für zufällige Texteingabe, wird alle Einträge in der Dropdown-Liste versteckt, die mit dem Text nicht Stern, der bereits eingegeben wurde <. / p>

Ich will nicht, diese Funktionen. Ich möchte eine Auswahlbox, dass verhält sich ziemlich genau wie ein normaler Auswahlbox würde in Vanille html erwarten würde.

Ich will es auf einen Datenspeicher gebunden ist, und ich möchte alle anderen extjs Konfiguration Goodies, die mit dem Kombinationsfeld kommen. Ich will nur nicht, Benutzer / Testern ausgeflippt, wenn sie eine Auswahlbox, dass Pausen ihre bestehenden geistigen Paradigma, wie diese Dinge Arbeit begegnen.

Wie kann ich eine extjs Box Combo mehr wie ein Auswahlfeld zu handeln? Oder bin ich Widget ganz die falsche Verwendung?

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

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

Answer 2

Die derzeit akzeptierte Lösung funktioniert gut, aber wenn jemand eine ComboBox will, dass Griffe auch Tastatureingaben wie eine einfache HTML-Select-Box (zB jedes Mal, wenn Sie „P“ ist wählt das nächste Element in der Liste, beginnend mit „P“ drücken ), 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 3

Haben Sie versucht typeAhead = false? Nicht sicher, ob dies ist in der Nähe, was Sie wollen.

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

    ...

});

Answer 4

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 5

Just Verwendung Ext.merge Funktion

Aus der doc: http: // docs .sencha.com / extjs / 4.2.1 / #! / api / Ext-Methode-merge