Как мне заставить поле со списком extjs действовать как обычное поле выбора html?
Вопрос
ExtJS предоставляет необычное поле со списком, в котором есть множество функций - ввод текста вперед, позволяющий вводить произвольный текст, скрывающий все записи в выпадающем списке, которые не совпадают с уже введенным текстом.
Мне не нужны эти функции.Мне нужно поле выбора, которое ведет себя почти точно так же, как можно было бы ожидать от обычного поля выбора в ванильном html.
Я действительно хочу, чтобы он был привязан к хранилищу данных, и я действительно хочу все остальные преимущества конфигурации extjs, которые поставляются с полем со списком.Я просто не хочу, чтобы пользователи / тестировщики сходили с ума, когда они сталкиваются с полем выбора, которое нарушает их существующую ментальную парадигму того, как эти вещи работают.
Итак, как я могу заставить поле со списком extjs действовать больше как поле выбора?Или я вообще использую не тот виджет?
Решение
Вы можете добиться такого поведения, просто используя правильную конфигурацию при создании экземпляра 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
например.
Другие советы
Принятое в настоящее время решение отлично работает, но если кому-то нужен 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));
}
}
}
}
Ты пробовал typeAhead = false
?Не слишком уверен, близко ли это к тому, что вы хотите.
var combo = new Ext.form.ComboBox({
typeAhead: false,
...
});
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
}
});
Просто используй Ext.merge
функция
Из документа: http://docs.sencha.com/extjs/4.2.1 /#!/api/Ext-метод-слияние