如何在 extjs 中显示文本字段的前面 space 警告消息？

Question

我尝试在文本字段中使用正则表达式文本验证。但是，当用户在文本字段中的任何位置留下 space 时，就会显示警告消息。但我需要显示一条警告消息 "Front Space shall be restricted"，仅当用户在文本字段中以前面的 space 开头时。我该怎么做？

Answer 1

解法：

您可以使用 'keyup' 事件或 'validator' 配置选项 Ext.form.field.Text:

示例：

<html>
    <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css"> 
    <script type="text/javascript" src="../ext/ext-all-debug.js"></script>
    <script type="text/javascript">
    Ext.onReady(function(){

        Ext.QuickTips.init();
        Ext.FocusManager.enable();

        Ext.define('Test.Window', {
            extend: 'Ext.window.Window',

            title: 'Test',
            closeAction: 'destroy',
            border: false,
            width: 560,
            height: 500,
            modal: true,
            closable: true,
            resizable: false,

            initComponent: function() {
                var me = this;
                me.callParent(arguments);

                me.edit1 = Ext.create('Ext.form.field.Text', {
                    labelWidth: 200,
                    width: 300,
                    fieldLabel: 'Test edit (onkeyup + tooltip)', 
                    enableKeyEvents: true,
                    listeners: {
                        keyup: function (f, e) {
                            var text = f.getValue();
                            if (text.substr(0, 1) == ' ') {
                                var posXY = f.el.getXY();
                                var tooltip =  Ext.create('Ext.tip.ToolTip', {
                                    anchor: 'top',
                                    anchorToTarget: false,
                                    targetXY: [posXY[0] + f.getWidth(), posXY[1]],
                                    hideDelay: 5000,
                                    closable: false,
                                    html: 'Front Space shall be restricted.'
                                });
                                tooltip.show();
                            }

                        }
                    }
                });

                me.edit2 = Ext.create('Ext.form.field.Text', {
                    labelWidth: 200,
                    width: 300,
                    fieldLabel: 'Test edit (validator + quicktip)', 
                    enableKeyEvents: true,
                    msgTarget: 'side',
                    validator: function (value) {
                        if (value.substr(0, 1) == ' ') {
                            return 'Front Space shall be restricted';
                        } else {
                            return true;
                        }
                    }
                });

                me.edit3 = Ext.create('Ext.form.field.Text', {
                    labelWidth: 200,
                    width: 300,
                    fieldLabel: 'Test edit (onkeyup + message)', 
                    enableKeyEvents: true,
                    listeners: {
                        keyup: function (f, e) {
                            var text = f.getValue();
                            if (text.substr(0, 1) == ' ') {
                                var msg = Ext.Msg.show(
                                    {
                                    msg: "Front Space shall be restricted"
                                    }
                                );
                                setTimeout(
                                    function() {
                                        msg.hide();
                                    }, 
                                    2000
                                );
                            }

                        }
                    }
                });

                me.add(me.edit1);
                me.add(me.edit2);
                me.add(me.edit3);
            }
        }); 

        var win = new Test.Window({

        });
        win.show();

    });
    </script>   
    <title>Test</title>
    </head>
    <body>
    </body>
</html>

备注：

示例使用 ExtJS 4.2，但我认为它可以与其他版本一起使用。

可以找到有用的问题和答案here。

如何在 extjs 中显示文本字段的前面 space 警告消息？

How to display front space alert message for a text field in extjs?

extjs

extjs4

extjs4.1

extjs4.2

extjs5