Come faccio ad avere una casella combinata extjs di agire come un normale html casella di selezione,?

Question

ExtJS fornisce una combo-box di fantasia che ha un sacco di funzioni - tipo avanti, consentendo l'immissione di testo casuale, nascondendo tutte le voci dell'elenco a discesa che non stella con il testo che è già stato inserito <. / p>

Non voglio queste caratteristiche. Voglio una casella di selezione che si comporta più o meno come esattamente ci si aspetterebbe un normale casella di selezione sarebbe in vaniglia html.

Io voglio legato ad un archivio dati, e voglio tutte le altre chicche di configurazione extjs che vengono con la casella combinata. E 'solo che non voglio utenti / tester andando fuori di testa quando incontrano una casella di selezione che si rompe loro paradigma mentale esistente di come funzionano queste cose.

Quindi, come posso ottenere una casella combinata extjs ad agire più come una casella di selezione? O sto usando il widget di sbagliato tutto?

Answer 1

È possibile ottenere che il comportamento semplicemente utilizzando la configurazione corretta quando si crea un'istanza dell'oggetto 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); 

Sostituire la mode: 'local' e l'argomento store nel tuo caso, se vuoi che sia legato ad una Ext.data.JsonStore per esempio.

Answer 2

La soluzione attualmente accettato grandi opere, ma se qualcuno vuole una ComboBox che gestisce anche l'input da tastiera come una casella di selezione semplice HTML (ad esempio, ogni volta che si preme "P" è seleziona l'elemento successivo nella lista che inizia con "P" ), la seguente potrebbe essere utile:

{
    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

Hai provato typeAhead = false? Non troppo sicuro se questo è vicino a quello che si desidera.

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

Basta usare la funzione Ext.merge

Dal doc: http: // docs .sencha.com / ExtJS / 4.2.1 / #! / api / Ext-metodo-merge