Как мне получить поле со списком extjs, чтобы действовать как обычный, html-флажок?

Question

ExtJS представляет собой причудливое поле со списком, которое имеет множество функций: введите вперед, позволяя случайный ввод текста, скрывая все записи в раскрывающемся списке, которые не отображаются с текстом, который уже был введен.

Мне не нужны эти функции. Я хочу, чтобы поле выбора выглядело точно так же, как можно было бы ожидать, что нормальный флажок select будет использоваться в vanilla html.

Я хочу, чтобы он был привязан к хранилищу данных, и мне нужны все остальные фиды, которые поставляются вместе со списком. Я просто не хочу, чтобы пользователи/тестеры волновались, когда они сталкивались с блоком выбора, который нарушает их существующую ментальную парадигму о том, как это работает.

Так как я могу получить поле со списком extjs, чтобы действовать больше как поле выбора? Или я использую неправильный виджет?

Answer 1

Вы можете получить такое поведение только с помощью правильной настройки при создании экземпляра объекта 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); 

Заменить mode: 'local' и store аргумент в вашем случае, если вы хотите, чтобы это было связанный, например, с номером Ext.data.JsonStore.

Answer 2

Вы попробовали typeAhead = false? Не слишком уверен, что это близко к тому, что вы хотите.

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

Принятая в настоящее время решение работает, но если кто-то хочет ComboBox, который также обрабатывает ввод с клавиатуры, как поле выбора обычный HTML (например, каждый раз, когда вы нажимаете «P» будет выбирает следующий пункт в список, начиная с "P"), следующий может быть полезным:

{ 
    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

Просто используйте функцию Ext.merge

Из дока: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext-method-merge