如何使extjs的组合框表现得像普通的html选择框？

Question

ExtJS提供了一个高级的组合框(combo-box)，具有许多功能——预输入、允许随意文本输入，隐藏在下拉列表中不以已输入文本开头的所有条目。

我不想要这些功能。我想要一个选择框(select box)，它的行为与普通的HTML中的选择框一样。

我确实希望它绑定到数据存储器，并且我确实希望使用所有其他与combo box相关的ExtJS配置工具。我只是不希望用户/测试人员在遇到一个打破他们现有心理范式的选择框时感到恐慌。

那么我怎样才能使ExtJS组合框的行为更像一个选择框呢？或者说，我完全使用了错误的小部件(widget)吗？

- Spike Williams

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); 

如果您希望将其与 Ext.data.JsonStore绑定，那么请在您的情况下替换 mode: 'local' 和 store参数。

- loginx

---

谢谢 - 我已经找到了其中一些，但是我遗漏了一个重要的部分"triggerAction：'all'"。如果没有它，下拉菜单将隐藏除所选项之外的所有项目。 - Spike Williams

看起来这是针对ExtJS3版本的。下面是适用于Ext4的更改： 默认情况下，triggerAction为'all'; 删除了typeAhead 将mode重命名为queryMode - kirilloid

Answer 2

目前已经被广泛接受的解决方案非常好，但是如果有人想要一个ComboBox也像普通的HTML select box一样处理键盘输入（例如，每次按“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));
            }
        }
    }
}

- clint

---

我花了很长时间才找到这个解决方案，而且它是唯一一个实际可行的（在Ext 2.3.0中）！谢谢！ - Ivo Limmen

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
    }
 });

- Kristian

---

谢谢，我想要一种创建真正的 select 选项卡的方法，我通过这种方式成功了。 - Emmanuel

Answer 4

你尝试过typeAhead = false吗？不太确定这是否接近你想要的。

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

    ...

});

- aDev

Answer 5

只需使用Ext.merge函数

从文档中获取：http://docs.sencha.com/extjs/4.2.1/#!/api/Ext-method-merge

- vampolo