Come faccio a ottenere una casella combinata extjs in modo che si comporti come una normale casella di selezione html?

Question

ExtJS offre una fantastica casella combinata con molte funzionalità: digita in anticipo, consentendo l'inserimento casuale di testo, nascondendo tutte le voci nell'elenco a discesa che non sono contrassegnate dal testo che è già stato inserito.

Non voglio queste funzionalità. Voglio una casella di selezione che si comporti praticamente esattamente come ci si aspetterebbe una normale casella di selezione in vanilla html.

Voglio collegarlo a un archivio dati e voglio tutte le altre chicche di configurazione extjs fornite con la casella combinata. Semplicemente non voglio che gli utenti/i tester stiano impazzendo quando incontrano una casella di selezione che rompe il loro paradigma mentale esistente su come funzionano queste cose.

Quindi, come posso ottenere una casella combinata di extjs per agire più come una casella di selezione? O sto usando il widget sbagliato del 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 l'argomento mode: 'local' e store nel tuo caso, se vuoi che sia associato ad un Ext.data.JsonStore per esempio.

Answer 2

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

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

    ... 

}); 

Answer 3

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 4

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 l'elenco che inizia con "P"), quanto segue 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 5

Basta usare Ext.merge funzione

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