Question

我有一个3.0.0 ExtJS Web应用程序，其中我需要有一个Ext.form.NumberField，有一个监听器需要能够标记NumberField本身无效。

麻烦的是，当我尝试从侦听器函数中调用markInvalid（）函数时，这不起作用。当我从其他地方调用它时它工作正常 - 但不是从数字字段本身的监听器内部调用它。

这是代码......

var myNumberField = new Ext.form.NumberField({

    id: "myNumberField",

    listeners : {
        'render': function(c) {


            c.getEl().on('keyup', function() {

                this.markInvalid("Marking this invalid!!");
            }, c);

         }
    },
});

这很奇怪 - 如果我在任何其他地方设置组件，markInvalid工作正常。我甚至可以从另一个组件的监听器设置好 - 我只是不能在组件本身中设置它。它瞬间闪烁无效，然后返回。

拜托 - 我真的以我的智慧结束了这一点。任何帮助将不胜感激!!

提前致谢，蒂姆

Answer 1

那是因为keyup是默认的validationEvent，所以会发生的事情是该字段被标记为无效，然后处理其他验证并清除无效标记（你可以看到标记来了马上去吧，不是吗？）。

一种解决方案可能是在按键时禁用自动验证（该字段仍为validate on blur，您可能也想禁用它）：

var myNumberField = new Ext.form.NumberField({
    id: "myNumberField",

    validationEvent: false, // disable keyup validation

    listeners : {
        'render': function(c) {
            c.getEl().on('keyup', function(e) {
                // the mark will stay!
                this.markInvalid("Marking this invalid!!");
            }, c);
        }
    }
});

但是，禁用内置验证（例如allowBlank，minValue等）可能并不理想。在这种情况下，如果您没有自己标记该字段，则可以恢复正常的验证过程。以下是如何执行此操作的示例：

var myNumberField = new Ext.form.NumberField({
    renderTo: Ext.getBody(),

    id: "myNumberField",

    validationEvent: false, // disable normal keyup validation

    allowBlank: false, // example built-in validator

    listeners : {
        'render': function(c) {
            c.getEl().on('keyup', function(e) {
                // if 'v' is pressed, then validate (the field will be marked
                // as invalid if blank, else invalid will be clear)
                if (e.getKey() === e.V) {
                    this.validate();
                } 
                // if it's another key, we'll mark the field as invalid 
                // and stop
                else {
                    this.markInvalid("Marking this invalid!!");
                }
            }, c);
        }
    }
});

为什么ExtJS组件本身不能调用markInvalid（）？

1 个答案: