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

Posted 2023-02-22

【中文标题】ExtJS：如何让用户在 Combobox 中输入不在商店中的值

【英文标题】：ExtJS: How to let user enter a value in Combobox that is not in store

【发布时间】：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 - 目前，我不需要担心输入的有效性。我所需要的是，如果用户试图在组合中输入的值，商店不存在，仍然将值发送到绘图函数。我不确定哪种事件可以捕获此操作并获取用户输入的文本

【参考方案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 //这里调用地址绘图方法是什么意思？