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

extjs3

Question

ExtJS proporciona un elegante cuadro combinado que tiene muchas características: escriba con anticipación, lo que permite la entrada aleatoria de texto, ocultando todas las entradas en la lista desplegable que no marcan con el texto que ya se ha ingresado.

No quiero estas características Quiero un cuadro de selección que se comporte exactamente igual a lo que se esperaría de un cuadro de selección normal en vainilla html.

Quiero que esté vinculado a una tienda de datos, y quiero todos los demás extras de configuración extjs que vienen con el cuadro combinado. Simplemente no quiero que los usuarios / probadores se vuelvan locos cuando se encuentran con un cuadro de selección que rompe su paradigma mental existente de cómo funcionan estas cosas.

Entonces, ¿cómo puedo obtener un cuadro combinado extjs para actuar más como un cuadro de selección? ¿O estoy usando el widget incorrecto por completo?

Answer 1

¿Has typeAhead = false ? No estoy muy seguro de si esto está cerca de lo que quieres.

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

    ...

});

Answer 2

La solución actualmente aceptada funciona muy bien, pero si alguien quiere un ComboBox que también maneje la entrada del teclado como un cuadro de selección de HTML simple (por ejemplo, cada vez que presiona "P" selecciona el siguiente elemento en la lista que comienza con "P"), 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

Puede obtener ese comportamiento solo con la configuración adecuada al crear 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); 

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

Answer 4

Solo use la función Ext.merge

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

Answer 5

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