Combo 在 focusleave 事件后触发 select 事件

Question

你能告诉别人当焦点离开时如何防止在组合框中触发 select 事件吗？

Answer 1

这是一个错误

Correspond theme on Sencha Forum

Answer 2

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

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

在没有 forceSelection 的情况下使用 select 侦听器
将更改侦听器与 forceSelection 一起使用

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

Test the workaround in fiddle

Answer 3

我在 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>
                }
            }

Combo 在 focusleave 事件后触发 select 事件

Combo fires select event after focusleave event

combobox

extjs

extjs4

extjs5

extjs6