Question

我的Combobox与Store LocalStorage Proxy相关联。我将Combobox TextField Enter中输入的搜索条件存储到Store。

现在，我希望能够在KeyDown为Combobox时检测到Expanded，并Item突出显示Cursor Keys但尚未选中，以便用户可以按DELETE并从Store中删除该项目，然后从列表中删除。

我已经能够使用以下代码捕获KeyDown事件，但是在检查API文档和Chrome调试控制台中的对象时，我无法弄清楚如何获取对已在Expanded下拉列表中突出显示，因此我可以将其从Store中删除。

Answer 1

此时您无法使用任何选择原因（除非您打开组合选择器，其中组合已经设置了值）以下示例工作并且应该向您展示如何完成它{ {3}}：

// 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事件，记录并删除它。

如何使用DEL或BACKSPACE键从Combobox中删除聚焦条目？

1 个答案: