组合在 focusleave 事件后触发 select 事件答案

【问题标题】：Combo fires select event after focusleave event组合在 focusleave 事件后触发 select 事件
【发布时间】：2016-11-23 17:11:48
【问题描述】：

你能告诉别人当焦点离开时如何防止组合框上的火灾选择事件吗？

【问题讨论】：

标签： extjs combobox extjs4 extjs5 extjs6

【解决方案1】：

我在extjs 6.5.2 modern 中遇到了同样的问题。我正在使用combobox 和queryMode: 'remote'、forceSelection: true、自定义itemTpl，并且我正在使用select 事件选择一个项目。 @Jzf 的解决方案对我不起作用（我也使用了 change 事件）所以我不得不暂停 focusleave 上的 select 事件并在 focusenter 上恢复它。

这不是一个非常干净的解决方法，但它对我的情况有用。这是我的combobox 的完整代码：

            {
                xtype: 'combobox',
                store: Ext.create('demo.store.search.SearchComboStore'),
                valueField: 'id',
                displayField: 'name',
                queryMode: 'remote',
                queryParam: 'name',
                triggerAction: 'all',
                allQuery: '',
                minChars: 1,
                forceSelection: true,
                matchFieldWidth: false,
                //[modern] added floated picker config here in order to set the minWidth property for the floated picker
                floatedPicker: {
                    minWidth: (Ext.getBody().getWidth() / 2)
                },
                itemTpl:
                    '<div class="ucResultsTable" style="width:' + (Ext.getBody().getWidth() / 2) + 'px">' +
                        '<div class="ucResultsTableCell" style="width:15%"><b>{value1}</b></div>' +
                        '<div class="ucResultsTableCell" style="width:15%">{value2}</div>' +
                        '<div class="ucResultsTableCell" style="width:15%">{value3}</div>' +
                        '<div class="ucResultsTableCell" style="width:15%">{value4}</div>' +
                        '<div class="ucResultsTableCell" style="width:15%">{value5}</div>' +
                    '</div>',
                listeners: {
                    select: function (comboBox, records, eOpts) {
                        var container = comboBox.up('app-container-panel');
                        container.fireEvent('selectComboItem', container, records.data);
                    },
                    //<Workaround> 
                    //blur/focusleave is firing select event
                    //and changes the record selection
                    focusleave: function (comboBox) {
                        comboBox.suspendEvent('select');
                    },
                    focusenter: function (comboBox) {
                        comboBox.resumeEvent('select');
                    }
                    //</Workaround>
                }
            }

【讨论】：

【解决方案2】：

出现问题是因为组合强制选择，即使用户实际上没有选择另一个值。

有几种方法可以解决此问题。

使用不带 forceSelection 的选择侦听器
将更改侦听器与 forceSelection 结合使用

两种方式，用户都必须从组合列表中选择一个项目（这可能是您首先使用 forceSelection 配置的原因）。

Test the workaround in fiddle

【讨论】：

【解决方案3】：

这是一个错误

Correspond theme on Sencha Forum

【讨论】：