[CLOSED] Applying InputMask dynamically on the client

**vadym.f** · May 16, 2013, 11:57 AM

Sorry, that doesn't make a difference.

**Daniil** · May 16, 2013, 3:14 PM

Please try this.

Ext.ux.netbox.InputTextMask.prototype.changeMask = function (newMask, newClearWhenInvalid) {
    var maskPlugin = this;
    var field = maskPlugin.field;

    //added
    field.un('render', maskPlugin.assignEl, maskPlugin);
    field.un('blur', maskPlugin.removeValueWhenInvalid, maskPlugin);
    field.un('focus', maskPlugin.processMaskFocus, maskPlugin);
 
    field.getEl().purgeAllListeners();
    field.initEvents();
 
    if (Ext.isArray(field.plugins)) {
        field.plugins.pop(maskPlugin);
    }
    else {
        field.plugins = null;
    }

    //added
    if (newMask == null) {
        return;
    }
 
    maskPlugin = new Ext.ux.netbox.InputTextMask({ mask: newMask, clearWhenInvalid: newClearWhenInvalid });
 
    this.viewMask = maskPlugin.viewMask;
    this.rawMask = maskPlugin.rawMask;
    this.maskArray = maskPlugin.maskArray;
 
    if (Ext.isArray(field.plugins)) {
        field.plugins.push(maskPlugin);
    }
    else {
        field.plugins = maskPlugin;
    }
 
    maskPlugin.init(field);
};

**vadym.f** · May 16, 2013, 3:38 PM

Thanks much for bearing with me Daniil! This works, if only for the first mask change action. After that, it gets messed up so at this point I believe I should start pursuing a different design approach. Probably, toggling visibility of several fields to display the Postal Code with various statically assigned masks will work better. I will have to manually bind data to those fields since they can't share the same Postal Code DataIndex of the form, but it's minor details. In the mean time, here's the latest code sample. You may mark this thread as closed.

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<%@ Register Assembly="Ext.Net.UX" Namespace="Ext.Net.UX" TagPrefix="ux" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="Script" />
    <ext:ResourcePlaceHolder ID="ResourcePlaceHolder2" runat="server" Mode="Style" />
    <script type="text/javascript">
        var resize = function () {
            if (!DisplayFieldZipExtensionDash.isVisible()) {
                TextPostalCode.setWidth(160);
                TextPostalCode.width = 160;
                DisplayFieldZipExtensionDash.show();
                TextFieldZipExtension.show();

                TextPostalCode.setValue(null);
                InputTextMaskPostalCode.changeMask(null, false);
            }
            else {
                TextPostalCode.setWidth(270);
                TextPostalCode.width = 270;
                DisplayFieldZipExtensionDash.hide();
                TextFieldZipExtension.hide();

                TextPostalCode.setValue(null);
                //InputTextMaskPostalCode.changeMask("L9L 9L9", false);
                InputTextMaskPostalCode.changeMask("X[ABCEGHJKLMNPRSTV\\XY]X9X[A-Z]X 9X[A-Z]X9", false);
            }

            CompositeField1.doLayout();
        };


        Ext.namespace('Ext.ux.netbox');
        Ext.ux.netbox.InputTextMask.InputTextMaskExtend = Ext.extend(Object, {
            constructor:
            function (config) {
                Ext.apply(this, config);

                var mask = config.mask;
                var clearWhenInvalid = config.clearWhenInvalid;
                if (clearWhenInvalid === undefined) {
                    this.clearWhenInvalid = true;
                } else {
                    this.clearWhenInvalid = clearWhenInvalid;
                }
                this.rawMask = mask;
                this.viewMask = '';
                this.maskArray = [];
                var mai = 0;
                var regexp = '';
                for (var i = 0; i < mask.length; i++) {
                    if (regexp) {
                        if (regexp == 'X') {
                            regexp = '';
                        }
                        if (mask.charAt(i) == 'X' && mask.charAt(i - 1) != '\\') {
                            this.maskArray[mai] = regexp;
                            mai++;
                            regexp = '';
                        }
                        else if (mask.charAt(i) != '\\') {
                            regexp += mask.charAt(i);
                        }
                    }
                    else if (mask.charAt(i) == '\\') {
                        continue;
                    }
                    else if (mask.charAt(i) == 'X' && mask.charAt(i - 1) == '\\') {
                        this.viewMask += mask.charAt(i);
                        this.maskArray[mai] = RegExp.escape(mask.charAt(i));
                        mai++;
                    }
                    else if (mask.charAt(i) == 'X' && mask.charAt(i - 1) != '\\') {
                        regexp += 'X';
                        this.viewMask += '_';
                    } else if (mask.charAt(i) == '9' || mask.charAt(i) == 'L' || mask.charAt(i) == 'l' || mask.charAt(i) == 'A') {
                        this.viewMask += '_';
                        this.maskArray[mai] = mask.charAt(i);
                        mai++;
                    } else {
                        this.viewMask += mask.charAt(i);
                        this.maskArray[mai] = RegExp.escape(mask.charAt(i));
                        mai++;
                    }
                }

                this.specialChars = this.viewMask.replace(/(L|l|9|A|_|X)/g, '');
            }
        });

        Ext.ux.netbox.InputTextMask.InputTextMaskExtend.prototype = Ext.ux.netbox.InputTextMask.prototype;
        Ext.ux.netbox.InputTextMask.InputTextMaskExtend.prototype.changeMask = function (newMask, newClearWhenInvalid) {
            var maskPlugin = this;
            var field = maskPlugin.field;

            //added
            field.un('render', maskPlugin.assignEl, maskPlugin);
            field.un('blur', maskPlugin.removeValueWhenInvalid, maskPlugin);
            field.un('focus', maskPlugin.processMaskFocus, maskPlugin);

            field.getEl().purgeAllListeners();
            field.initEvents();

            if (Ext.isArray(field.plugins)) {
                field.plugins.pop(maskPlugin);
            }
            else {
                field.plugins = null;
            }

            //added
            if (newMask == null) {
                return;
            }

            maskPlugin = new Ext.ux.netbox.InputTextMask.InputTextMaskExtend({ mask: newMask, clearWhenInvalid: newClearWhenInvalid });

            this.viewMask = maskPlugin.viewMask;
            this.rawMask = maskPlugin.rawMask;
            this.maskArray = maskPlugin.maskArray;

            if (Ext.isArray(field.plugins)) {
                field.plugins.push(maskPlugin);
            }
            else {
                field.plugins = maskPlugin;
            }

            maskPlugin.init(field);
        };
        Ext.reg('Ext.ux.netbox.InputTextMask.InputTextMaskExtend', Ext.ux.netbox.InputTextMask.InputTextMaskExtend);

    </script>
</head>
<body>
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <form id="Form1" runat="server">
        <ext:Viewport ID="ViewPort1" Layout="BorderLayout" runat="server">
            <Items>
                <ext:Panel ID="Panel1" runat="server" Region="Center" Border="false"
                    Layout="FitLayout" AutoScroll="false">
                    <Items>
                        <ext:FormPanel ID="FormPanel1" runat="server"
                            LabelAlign="Left" Padding="10" ButtonAlign="Left" AutoScroll="false"
                            Title="Details" Border="true" Frame="false" TrackResetOnLoad="true">
                            <Items>
                                <ext:CompositeField ID="CompositeField1" runat="server" FieldLabel="Postal Code">
                                    <Items>
                                        <ext:TextField ID="TextPostalCode" runat="server" SelectOnFocus="true"
                                            ValidateOnEvent="true" EnableKeyEvents="true" Width="270">
                                            <Plugins>
                                                <ext:GenericPlugin ID="InputTextMaskPostalCode" runat="server" InstanceName="Ext.ux.netbox.InputTextMask.InputTextMaskExtend" Mask="X[ABCEGHJKLMNPRSTV\XY]X9X[A-Z]X 9X[A-Z]X9" />
                                            </Plugins>
                                        </ext:TextField>
                                        <ext:DisplayField ID="DisplayFieldZipExtensionDash" runat="server" Text="-" Hidden="true" Width="5">
                                        </ext:DisplayField>
                                        <ext:TextField ID="TextFieldZipExtension" runat="server" SelectOnFocus="true"
                                            ValidateOnEvent="false" EnableKeyEvents="true" AllowBlank="true" Width="95" Hidden="true">
                                            <Plugins>
                                                <ux:InputTextMask ID="InputTextMaskZipExtension" runat="server" ClearWhenInvalid="true"
                                                    ValidateRequestMode="Disabled" Visible="true" Mask="9999">
                                                </ux:InputTextMask>
                                            </Plugins>
                                        </ext:TextField>
                                        <ext:ToolbarSpacer Width="40">
                                        </ext:ToolbarSpacer>
                                        <ext:DisplayField ID="DisplayField1" runat="server" Text="Phone:" Width="90">
                                        </ext:DisplayField>
                                        <ext:TextField ID="TextPhone" runat="server" SelectOnFocus="true"
                                            ValidateOnEvent="false" EnableKeyEvents="true" AllowBlank="true" Width="120">
                                        </ext:TextField>
                                        <ext:ToolbarSpacer Width="10">
                                        </ext:ToolbarSpacer>
                                        <ext:DisplayField ID="DisplayField2" runat="server" Text="Extension:" Width="60">
                                        </ext:DisplayField>
                                        <ext:TextField ID="TextPhoneExtension" runat="server"
                                            SelectOnFocus="true" ValidateOnEvent="false" EnableKeyEvents="true" AllowBlank="true"
                                            Width="65">
                                        </ext:TextField>
                                    </Items>
                                </ext:CompositeField>
                            </Items>
                            <Buttons>
                                <ext:Button ID="Button1" runat="server" Text="Resize">
                                    <Listeners>
                                        <Click Handler="resize();" />
                                    </Listeners>
                                </ext:Button>
                            </Buttons>
                        </ext:FormPanel>
                    </Items>
                </ext:Panel>
            </Items>
        </ext:Viewport>
    </form>
</body>
</html>

**Daniil** · May 17, 2013, 4:18 AM

I can confirm, the changeMask method needs some tweaking.

Though, your alternative approach is fine. Since it suites your needs, I hold off with the changeMask.

Thread: [CLOSED] Applying InputMask dynamically on the client

Thread Tools

Search Thread

Display

Similar Threads

[CLOSED] How to create Ext.net grid panel dynamically at client side

[CLOSED] InputMask

[CLOSED] How to set regex dynamically on the client?

Setting ShowHeaderCheckbox TRUE dynamically in client side.

[CLOSED] dynamically modifying submenu items on the client side

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources