¿Cómo consigo un extjs cuadro combinado para actuar como una normal, html cuadro de selección?

Question

ExtJS ofrece un combo-caja de lujo que tiene un montón de características - el tipo por delante, lo que permite la entrada de texto al azar, ocultando todas las entradas en la lista desplegable que no estrella con el texto que ya se ha introducido <. / p>

No quiero estas características. Quiero un cuadro de selección que se comporta casi exactamente como cabría esperar una caja de selección normal sería la vainilla html.

Yo lo quiero que enlaza a un almacén de datos, y yo quiero todas las otras golosinas configuración extjs que vienen con el cuadro combinado. Sólo que no desea que los usuarios / probadores flipando cuando se encuentran con una caja de selección que se rompe el paradigma existente mental de cómo funcionan estas cosas.

Entonces, ¿cómo puedo obtener una extjs cuadro combinado para actuar más como una caja de selección? O estoy usando el widget de mal en total?

Answer 1

Usted puede conseguir que el comportamiento sólo mediante el uso de la configuración apropiada cuando una instancia del objeto Ext.form.ComboBox:

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

Reemplazar el mode: 'local' y el argumento store en su caso si desea que se una a un Ext.data.JsonStore por ejemplo.

Answer 2

La solución aceptada actualmente funciona muy bien, pero si alguien quiere un cuadro combinado que también se ocupa de la entrada de teclado como una caja de selección de la versión HTML (por ejemplo, cada vez que se pulsa "P" es selecciona el siguiente elemento de la lista que comienza con "P" ), el siguiente podría ser útil:

{
    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

¿Usted intentó typeAhead = false? No estoy seguro de si esto es cerca de lo que desea.

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

Función sólo tiene que utilizar Ext.merge

Desde el doc: http: // docs .sencha.com / extjs / 4.2.1 / #! / api / Ext-método de combinación de