2014-05-19 20 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