Comment puis-je obtenir une zone de liste déroulante ExtJS d'agir comme une boîte normale, sélectionnez html?

Question

ExtJS fournit un combo-box de fantaisie qui a beaucoup de fonctionnalités - de type avance, ce qui permet la saisie de texte aléatoire, cachant toutes les entrées dans la liste déroulante qui ne l'étoile pas avec le texte qui a déjà été saisi <. / p>

Je ne veux pas ces caractéristiques. Je veux une boîte de sélection qui se comporte à peu près exactement comme on peut s'y attendre d'une boîte de sélection normale serait en html vanille.

Je ne veux lié à une banque de données, et je ne veux que tous les autres goodies de configuration extjs qui viennent avec la zone de liste déroulante. Je ne veux pas que les utilisateurs / testeurs paniquer quand ils rencontrent une boîte de sélection qui brise leur paradigme mental actuel de la façon dont ces choses fonctionnent.

Alors, comment puis-je obtenir une zone de liste déroulante ExtJS d'agir plus comme une boîte de sélection? Ou suis-je utiliser le widget tout à fait mal?

Answer 1

Vous pouvez obtenir ce comportement en utilisant simplement la configuration appropriée lorsque vous instancier l'objet 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); 

Remplacer le mode: 'local' et argument store dans votre cas si vous souhaitez qu'il soit lié à un Ext.data.JsonStore par exemple.

Answer 2

La solution actuellement acceptée fonctionne très bien, mais si quelqu'un veut un ComboBox qui gère également l'entrée du clavier comme une boîte de sélection HTML ordinaire (par exemple, chaque fois que vous appuyez sur « P » est sélectionne l'élément suivant dans la liste commençant par « P » ), ce qui suit peut être 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

Avez-vous essayé typeAhead = false? Pas trop sûr si cela est proche de ce que vous voulez.

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

Il suffit d'utiliser la fonction Ext.merge

A partir de la doc: http: // docs .sencha.com / ExtJS / 4.2.1 / #! / api / Ext méthode de fusion