在ExtJs 4.1 textareafield上设置错误消息

时间:2014-05-19 11:41:13

标签: javascript extjs extjs4.1

请检查fiddle。我有一个简单的textareafield。如果用户尝试将数据粘贴到包含5行以上的textarea中,我想通过将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 个答案:

答案 0 :(得分:1)

您可以使用textarea上的markInvalid函数来实现适用于常规验证的行为,这基本上就是您所描述的所需行为。

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

我已更新了您的fiddle,因此您可以查看它。