Question

我有一个组合框，forceSelection config设置为true。

组合框是可选的。它可以是空的。

如果用户选择其中一个选项，然后重新清空组合框，则不希望为空。

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

太荒谬了。用户删除值时应该为空。

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

Answer 1

我用'change'监听器解决了这个问题。示例代码段

addListener('change', function() {
  if (this.getValue() === null) {
    this.reset();
  }
});

删除所选值时，ComboBox值将设置为null。所以你可以检查一下这个价值＆amp;将ComboBox值恢复为默认值。

Answer 2

你能用allowEmpty替换forceSelection：false吗？在我看来，forceSelection正在完成它应该做的事情 - 它强制用户从列表中选择一些东西。另一种选择是在列表中添加一个额外的项目 - 例如，无。所以用户可以选择它。

Answer 3

我也遇到了与组合相同的问题，不幸的是我提出的最好的解决方案是用于清除所选值的img /按钮，然后使用jQuery挂钩以下内容：

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

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

Answer 4

我也遇到了这个问题。

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

在删除该值后，重新 >即：使用forceSelection: true组合框坚持放下其菜单，这意味着当用户返回组合框以删除项目时，组合框菜单会下拉，最初选中的项目会突出显示，然后是用户将组合框和制表符中的值删除到下一个组合框，组合框会查看下拉列表中突出显示的项目，并将其填入字段，瞧，重新选择。

相反，如果用户删除了该值，则按ESC键关闭组合下拉菜单，然后按然后选项卡切换到该值不会填充的下一个。

我认为这是一项启用键盘控制的功能，因此您无需点击下拉菜单。

幸运的是，我没有花太多时间让我的用户理解这一点并使用ESC键。我还添加了preventMark: true配置来处理发生这种情况时的错误消息。

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

Answer 5

使用以下作为基础组合框：

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();
                }
            });
        }
    }
})

Answer 6

我相信如果你将allowBlank和forceSelection设置为true，那么你应该真的没有选择（或者你不会将allowBlank设置为true ）。

这是一个全局MOD，可以让所有组合框以这种方式运行。

Ext.onReady(function(){   

    // Allows no selection on comboboxes that has both allowBlank and
    // forceSelection set to true    
    Ext.override( Ext.form.field.ComboBox, {

        onChange: function(newVal, oldVal)
        {
            var me = this;

            if ( me.allowBlank && me.forceSelection && newVal === null )
                me.reset();

            me.callParent( arguments );
        },        

    });
});

或者，当用户清空该字段时，此MOD也会关闭选择器并使用null触发select事件：

Ext.override( Ext.form.field.ComboBox, {

    onKeyUp: function( aEvent ) {
        var me            = this,
            iKey          = aEvent.getKey();
            isValidKey    = !aEvent.isSpecialKey() || iKey == aEvent.BACKSPACE || iKey == aEvent.DELETE,
            iValueChanged = me.previousValue != this.getRawValue();

        me.previousValue = this.getRawValue();

        // Prevents the picker showing up when there's no selection
        if ( iValueChanged &&
             isValidKey &&
             me.allowBlank &&
             me.forceSelection &&
             me.getRawValue() === '' )
        {
            // Resets the field
            me.reset();

            // Set the value to null and fire select
            me.setValue( null );
            me.fireEvent('select', me, null );

            // Collapse the picker
            me.collapse();
            return;
        }                
        me.callParent( arguments );        
    },

});

Answer 7

在4.2中，你应该覆盖组合框的assertValue方法。

而不是：

if (me.forceSelection) {

你应该把：

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

Answer 8

是的我有相同类型的组合框，但我使用Editable =“false”和ForceSelection =“true”。当我用键盘选择值并按Enter键时，它会选择最后一个值。

Answer 9

尝试使用此功能。将lastSelection = []的值填入空值

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

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

Answer 10

在combo的配置中添加

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

PS：来自@ aur1mas的想法

Answer 11

试试这个

listeners:{change:{fn:function(combo, value){combo.clearValue();}}}

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

11 个答案: