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

我有一个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就可以正常工作。我甚至可以从另一个组件的监听器中设置好它-我只是不能在组件本身中设置它。它会闪烁一瞬间，然后返回

求你了，我真的是束手无策了。任何帮助都将不胜感激

提前感谢,，

---

Tim

这是因为keyup是默认设置，所以发生的情况是字段被标记为无效，然后其他验证被处理，无效标记被清除。您可以看到标记立即出现和消失，不是吗

一种解决方案是在按键时禁用自动验证。字段仍将显示，您可能也要禁用该选项：

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

---

谢谢-最好的解释。你真棒！