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

Question

I tried with regex text validation in a text field. But the alert message is shown when the user leaves a space anywhere in the text field. But I need to display an alert message "Front Space shall be restricted", only when the user starts with a front space in a text field. How can i do it?

Zhorov Zhorov · Accepted Answer · 2018-03-13T11:26:50

Solution:

You can use 'keyup' event or 'validator' config option of Ext.form.field.Text:

Example:

<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>

Notes:

Example uses ExtJS 4.2, but I think it will work with the other vesrions.

A useful question and answers can be found here.

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

1 Answers