ExtJS：如何让用户在 Combobox 中输入一个不在商店中的值

Question

我有一个组合框，它是各种地址的列表。当任何地址被 selected 时，select 事件会在地图上绘制该地址。我想以这种方式更改此程序，如果用户输入的地址不是 Combo 商店的一部分，则该地址仍应绘制在地图上。我不需要修改组合商店。如何才能做到这一点？什么事件监听器可以触发这样的事件？我需要切换到文本字段吗？

{
                xtype: 'combobox',
                name: 'address1',
                style: {
                    marginLeft: '15px'
                },
                store: Ext.create('MyStore'),
                valueField: 'address',
                displayField: 'address',
                triggerAction: 'all',
                emptyText: 'Select Address',
                typeAhead: true,
                minChars: 2,
                typeAheadDelay: 100,
                queryMode: 'remote',
                width: 300,
                queryParam: 'searchAddress',
                hideTrigger:true,
                listeners: {                        
                    select: function(combo, records, eOpts){
                        //Plot the address from records[0].data.address
                    }
                }
            }

Answer 1

The user can press enter key to indicate that the address is either selected or types in. Currently, the specialkey event can't always capture it because on enter rather than taking the typed in value, it selects the first value in store

如果显示下拉列表，

specialkey 确实不会被捕获。这是因为事件是在 keydown 上模拟的，下拉列表有意停止，如 here.

所示

还有一些方法可以对用户输入做出反应：

方法一

像这样使用自定义 onFieldMutation 方法：

Ext.define('MyCombo', {
    extend: 'Ext.form.ComboBox',
    onFieldMutation: function(e) {
        if (e.getKey() === e.ENTER) {
            // Call address plotting method here
        }
        return this.callParent(arguments);
    }
});

方法二

使用keyup:

listeners: {
    keyup: {
        fn: function(e) {
            if (e.getKey() === e.ENTER) {
                // Call address plotting method here
            }
        },
        element: 'inputEl'
    }
}

查看两种方法的实际应用：https://fiddle.sencha.com/#fiddle/sdf

ExtJS：如何让用户在 Combobox 中输入一个不在商店中的值

ExtJS: How to let user enter a value in Combobox that is not in store

events

select

combobox

extjs

listener