如何使用DEL或BACKSPACE键从组合框中删除焦点条目？

Question

我有一个Combobox连接到一个Store有LocalStorage Proxy 。 我要存储在Enter进入Store的Combobox TextField中Enter的搜索条件。

现在，我希望能够在组合Combobox Expanded并且使用Cursor Keys突出显示一个Item但未选中该Item时检测到KeyDown ，因此用户可以按DELETE并将其从Store删除，然后从列表中删除。

我已经可以使用以下代码捕获KeyDown事件，但是在检查Chrome调试控制台中的API文档和对象后，我不知道如何获得对Expanded下拉菜单中突出显示的内容的引用，因此我可以将其从Store删除。

Answer 1

您目前无法使用任何选择原因，因为您没有选择任何内容（除非您打开一个组合选择器，其中该组合已经设置了值），下面的示例工作将向您展示如何完成JSFiddle的技巧 ：

// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
    fields: ['abbr', 'name'],
    data : [
        {"abbr":"AL", "name":"Alabama"},
        {"abbr":"AK", "name":"Alaska"},
        {"abbr":"AZ", "name":"Arizona"}
        //...
    ]
});

// Create the combo box, attached to the states data store
Ext.create('Ext.form.ComboBox', {
    fieldLabel: 'Choose State',
    store: states,
    queryMode: 'local',
    displayField: 'name',
    valueField: 'abbr',
    renderTo: Ext.getBody(),
    listeners: {
        boxready: function(self) {
            self.createPicker().on({
                itemmouseenter: function(v,rec){self.hoveredRecord = rec},
                itemmouseleave: function(v,rec){if(self.hoveredRecord == rec) self.hoveredRecord = null; }
            })  
        },
        specialkey: function(self, e, opt) {
            if ( e.getKey() == e.ESC ) {
                self.store.remove(self.hoveredRecord);
            }
        }
    }
});

请注意，此示例仅涵盖ESC键，并且该组合的默认行为是在该按键上关闭选择器（您可以覆盖它以保持打开状态）

它能做什么：

由于没有选择任何东西，因此选择器的选择模型在这里对我们没有多大帮助，我们需要知道哪个项目（rec）当前处于“活动”状态。 现在，选择器是一个绑定列表，包含我们需要的所有事件。 我决定使用itemmouseenter和itemmouseleave因为我们会在这里得到记录。 其余的很简单。 每当鼠标输入一个项目时，我都会在组合框中存储一个记录引用，并在我们离开时将其删除。 现在，我在组合上捕获了ESC事件，记录并删除了它。