logo标签列表

当forceSelection设置为TRUE时，如何重新清空ComboBox（ExtJS 4）

comboboxextjs4
20

我有一个下拉框，forceSelection配置设置为true。

这个下拉框是可选的，可以为空。

如果用户选择其中一个选项，然后重新清空下拉框，它不想要变成空的。

下拉框总是恢复之前选择的值。

这很荒谬。当用户删除这个值时，它应该是空的。

如何解决这个问题？我错过了哪些配置？

11个回答
29

我用“change”监听器解决了这个问题。示例代码片段：

addListener('change', function() {
  if (this.getValue() === null) {
    this.reset();
  }
});
当您删除所选值时，ComboBox的值会被设置为null。因此，您可以仅检查该值并将ComboBox的值恢复为默认值。
2
不错！这是我迄今为止见过的最优雅的解决方案。 - Carlos Valenzuela
4
您可以使用事件的参数 - addListener('change'，function（me，newVal）{if（newVal === null）{me.reset();}}）; - phatskat
1
注意：如果您的ComboBox具有multiSelect: true，请不要执行newValue === null，而应该执行newValue.length === 0（因为它显然是一个选择数组）。 - XåpplI'-I0llwlg'I -
1
谢谢这个。小优化：由于newValue作为第二个参数提供给“change”处理程序，因此无需调用getValue()。 - David Easley
1
注意：combo.reset() 实际上“将当前字段值重置为最初加载的值”。因此，如果最初加载的值不为空，则此解决方法将无效。 - David Easley
@DavidEasley 在 reset() 方法调用后添加 this.lastSelection = [];。如果该字段已经加载了一个值，它将清除该字段。 - Awesome
1

我也遇到了与组合框相同的问题，不幸的是，我想到的最好的解决方案是使用一个图像/按钮来清除所选值，然后使用jQuery进行以下连接：

        $('#imgId').click(function () { 
            var combo = Ext.getCmp('cmpId');
            combo.setValue(null);
            combo.setRawValue(null);
        });

不是最理想的，但我认为它相当干净和用户友好。希望能有所帮助。

1
请以以下内容作为您的基础组合框：
Ext.define("Ext.ux.CleanableComboBox", {
    extend: "Ext.form.ComboBox",
    xtype: 'c-combobox',
    initComponent: function () {
        this.callParent(arguments);
        if (this.allowBlank) {
            this.addListener('change', function () {
                if (!this.getValue() || this.getValue().length === 0) {
                    this.reset();
                }
            });
        }
    }
})
1

你能把forceSelection替换成allowEmpty: false吗？在我看来，forceSelection已经完全做到了它应该做的事情 - 强制用户从列表中选择某些内容。另一个选项是在列表中添加一个额外的项目 - 比如None。这样用户就可以选择它。

1
谢谢@innerJL。但我认为那不是一个优雅的解决方案。如果有这么多可选的组合框，那么用户只选择“无”选项就会很忙碌。我对forceSelection的理解是：从列表中选择一个或什么也不选（留空）。 - Fitrah M
1

我也遇到了这个问题。

组合框始终恢复先前选择的值。

它不是很多恢复值，而是用户在删除值后重新选择它。即：使用 forceSelection: true 时，组合框坚持下拉其菜单，这意味着当用户返回组合框以删除项目时，组合框菜单会下拉，并突出显示最初选择的项目，然后用户删除组合框中的值并切换到下一个，组合框查看下拉列表中突出显示的项目并将其填入字段，完成，重新选择。

相反，如果用户删除值，然后按 ESC 键关闭组合框下拉菜单，然后切换到下一个，该值将不会自动填充。

我想这是一种启用仅键盘控制的功能，以便您无需单击即可下拉菜单。

幸运的是，我的用户很快就理解了这一点，并利用了 ESC 键。我还添加了 preventMark: true 配置来处理发生此错误时的错误消息。

我想，如果你真的不能这样做，你可以添加一个监听器到change事件，甚至是validitychange事件，检查字段是否为空，然后在它为空时折叠菜单。这应该可以防止在移动到另一个字段时重新选择，就像使用ESC键关闭它一样。

我发现，如果你删除了该值，按下ESC键，并切换到下一个字段，使用ExtJS 4.1.1a，组合框仍会填入一个值。需要添加更改监听器才能使组合框表现正常。 - Mike Post
0
在4.2中，您应该只覆盖组合框的assertValue方法。
而不是：
if (me.forceSelection) {

你应该放置：

if (me.forceSelection && (!Ext.isEmpty(value) || !me.allowBlank)) {
0

尝试使用这个。将lastSelection=[]的值填入空值中

     Ext.override(Ext.form.field.ComboBox, {
        onChange : function(newVal, oldVal) {
            var me = this;
             me.lastSelection=[];

            me.callParent(arguments);
        },
    });
0

在组合框的配置中添加

listeners: {
    'change': function (combo, newValue) {
        if (newValue === null)
            combo.reset();
        }
    }

PS：灵感来自@aur1mas

0

是的，我有同样类型的下拉框，但我使用 Editable="false" 和 ForceSelection="true"。当我用键盘选择值并按回车键时，它会选择最后一个值。

0

试试这个

listeners:{change:{fn:function(combo, value){combo.clearValue();}}}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接