爲什麼ExtJS組件本身不能調用markInvalid（）？

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