如何让extjs组合框像普通的html选择框一样？

Question

ExtJS提供了一个花哨的组合框,它具有许多功能 - 提前输入,允许随机输入文本,隐藏下拉列表中所有未加入已输入文本的条目.

我不想要这些功能.我想要一个选择框,其行为几乎与人们期望普通选择框在vanilla html中完全相同.

我确实希望它绑定到数据存储,我确实想要组合框附带的所有其他extjs配置好东西.我只是不希望用户/测试人员遇到一个选择框时会吓坏他们,这些选择框打破了他们现有的这些工作方式的心理范式.

那么如何才能让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

目前公认的解决方案的伟大工程,但如果有人想一个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));
            }
        }
    }
}