2014-05-19 17 views
0

請檢查這個fiddle。我有一個簡單的textareafield。如果用戶嘗試將數據粘貼到包含5行以上的textarea中,我想通過顯示textareafield紅色&的邊框顯示一些消息來顯示錯誤消息。在ExtJs 4.1 textareafield上設置錯誤信息

Ext.onReady(function() { 
    Ext.create('Ext.window.Window', { 
     height: 60, 
     layout: 'anchor', 
     minHeight: 60, 
     width: 200, 
     items: [{ 
      grow: true, 
      anchor: '100%', 
      flex: 1, 
      enableKeyEvents: true, 
      xtype: 'textareafield', 
      id: 'txtFld', 
      listeners: { 
       keydown: function (txtArea, e, eOpts) { 
        //console.log(e.getKey()); 
        if (e.keyCode == 13 && txtArea.value.split("\n").length >= 5) { 
         console.log('unable to stop :('); 
         e.stopEvent(); 
         return false; 
        } 
       }, 
       paste: { 
        element: 'inputEl', 
        delay: 1, 
        fn: function (event, inputEl) { 

         if (event.type == "paste") { 
          if (inputEl.value.split("\n").length > 5) { 

           var enteredValues = inputEl.value.split("\n"); 
           var modifiedText = inputEl.value.split("\n").slice(0, 5); 
           inputEl.value = modifiedText.join("\n"); 
           // How to show Show error message stating some of the values are ignored ???? 


          } 
         } 
        } 
       } 
      } 
     }] 
    }).show(); 
}); 

回答

1

您可以使用文本域的markInvalid函數來實現其適用於常規檢驗和這基本上是你所描述的期望行爲的行爲。

Ext.getCmp('txtFld').markInvalid('Some content was removed'); 

我已更新您的fiddle,以便您可以查看它。

+0

感謝馬特的快速回復。我面臨的問題是即使我使用markInvalid()設置消息,系統第一次不顯示錯誤消息。第一次後,我能夠顯示錯誤信息。我使用的是與小提琴中共享的代碼相同的代碼,但無法在共享的小提琴中再現。 – SharpCoder

+0

我發現錯誤,如下面的鏈接所示:http://jsfiddle.net/webfriend13/yZHnm/29/在第34行而不是像'Ext.getCmp('txtFld')設置值。setValue(modifiedText.join(「 \ n「));'我使用'inputEl.value = modifiedText.join(」\ n「);'這就是爲什麼系統第一次沒有設置紅色之字形邊框。 – SharpCoder

+0

哦,是的,我也改變了這一點。對不起,不提。 – matt