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

【问题标题】：ExtJS: How to let user enter a value in Combobox that is not in storeExtJS：如何让用户在 Combobox 中输入不在商店中的值
【发布时间】：2015-11-10 14:40:04
【问题描述】：

我有一个组合框，它是各种地址的列表。选择任何地址时，选择事件会在地图上绘制此地址。我想以这样的方式更改此程序，如果用户输入的地址不属于 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
                    }
                }
            }

【问题讨论】：

用户如何表明他们想要绘制地址？
您要么必须要求用户明确表明他们想要绘制地址（例如按 Enter 或单击某些东西），要么您的组合需要更加聪明和体贴，检查是否是用户已经输入的是一个有效的地址，可以绘制，一旦出现这种情况就绘制它。
@Drake -“您的组合需要更加聪明和体贴，检查用户输入的是否是可以绘制的有效地址并在这种情况下绘制它” - 如何我这样做？
这将涉及在用户键入时对后端应用程序进行后台 AJAX 调用。它会检查地址是否有效，在这种情况下，“绘制它”响应将被发送回组合。另外，请检查this example。您可以在下拉列表中显示与用户输入匹配的有效地址，并让他们选择他们想要绘制的内容。
@Drake - 目前，我不需要担心输入的有效性。我所需要的是，如果用户试图在组合中输入的值，商店不存在，仍然将值发送到绘图函数。我不确定哪种事件可以捕获此操作并获取用户输入的文本

标签： events select extjs combobox listener

【解决方案1】：

用户可以按回车键来指示地址是选择或输入。目前，specialkey 事件不能总是捕获它，因为在输入而不是输入输入的值时，它选择存储中的第一个值

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

【讨论】：

谢谢@Drake！这就是我实现的code listeners: { keyup: function(me, e, eOpts){ if (e.getKey() === e.ENTER) { //plot address } element: 'inputEl' }, select : function(combo, records, eOpts){ //绘图地址 } }
@KavitaC //这里调用地址绘图方法是什么意思？