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

Posted 2023-02-26

【中文标题】如何让 extjs 组合框像普通的 html 选择框一样工作？

【英文标题】：How do I get an extjs combo box to act like a normal, html select box?

【发布时间】：2010-01-20 15:48:47

【问题描述】：

ExtJS 提供了一个花哨的组合框，它有很多功能 - 提前输入，允许随机输入文本，隐藏下拉列表中所有不以已经输入的文本加星标的条目。

我不想要这些功能。我想要一个选择框，它的行为与普通 html 中的普通选择框非常相似。

我确实希望它绑定到数据存储，并且我确实希望组合框附带的所有其他 extjs 配置好东西。我只是不希望用户/测试人员在遇到一个选择框破坏了他们现有的这些事情如何工作的思维范式时吓坏了。

那么我怎样才能让 extjs 组合框更像一个选择框呢？还是我完全使用了错误的小部件？

【参考方案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，请替换您的情况。

【讨论】：

谢谢 - 我找到了其中的一些，但“triggerAction: 'all'”是我错过的重要的一个。没有它，下拉菜单会隐藏除所选项目之外的所有项目。

看起来这是 ExtJS3 的。以下是 Ext4 的更改：triggerAction 默认为“全部”； typeAhead 被移除 mode 重命名为 queryMode

【参考方案2】：

当前接受的解决方案效果很好，但如果有人想要一个像普通 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', 'Ar***'],
        ['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));
            
        
    

【讨论】：

我花了很长时间才找到这个解决方案，它是唯一真正有效的解决方案（在 Ext 2.3.0 中）！谢谢！

【参考方案3】：

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

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

    ...

);

【参考方案4】：

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

【讨论】：

谢谢，我想要一种方法来创建一个真正的select 标签，我成功了。

【参考方案5】：

只需使用Ext.merge函数

来自文档：http://docs.sencha.com/extjs/4.2.1/#!/api/Ext-method-merge