[CLOSED] Applying InputMask dynamically on the client

**vadym.f** · May 13, 2013, 7:55 PM

Hi,

I'm looking for a way to apply an InputMask pattern dynamically on the client. The code below kind of works but it produces a mess and the results are incorrect. I'm also puzzled by the addPlugins() method. The initial type of the plugins object is Object but addPlugins() initializes an array.

        var applyMaskPlugin = function (myMask) {
            TextField1.plugins = null;
            if (!Ext.isEmpty(myMask)) {
                var plugin = new Ext.ux.netbox.InputTextMask({ mask: myMask });
                TextField1.plugins = plugin;
                // TextField1.addPlugins(plugin);
                TextField1.initPlugin(plugin);
            }
        };

                                        <ext:TextField ID="TextField1" runat="server" SelectOnFocus="true"
                                            ValidateOnEvent="true" EnableKeyEvents="true" AllowBlank="false" Width="270">
                                        </ext:TextField>

**Baidaly** · May 14, 2013, 12:32 AM

Hello!

Please, read the following thread: http://forums.ext.net/showthread.php?11541

**vadym.f** · May 14, 2013, 12:16 PM

Thanks for the pointers! My code sample incorporating your suggestions is below. There're two issues with it as I can tell:

View Mask placeholders disappear after changing the mask. They will resurface only after the first input key.
After changing the mask, any invalid input key pushes the cursor to the last position in the view mask.

Please advise what's wrong with this configuration.

<%@ 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 change = function () {
            if (!DisplayFieldZipExtensionDash.isVisible()) {
                TextPostalCode.setWidth(160);
                TextPostalCode.width = 160;
                DisplayFieldZipExtensionDash.show();
                TextFieldZipExtension.show();

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

                TextPostalCode.setValue(null);
                InputTextMaskPostalCode.changeMask("L9L 9L9", false);
            }

            CompositeField1.doLayout();
        };


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

            field.getEl().purgeAllListeners();

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

            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);
        };
        Ext.ux.InputTextMask = Ext.ux.netbox.InputTextMask;
    </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>
                                                <ux:InputTextMask ID="InputTextMaskPostalCode" runat="server" ClearWhenInvalid="true"
                                                    ValidateRequestMode="Disabled" Visible="true" Mask="L9L 9L9">
                                                </ux:InputTextMask>
                                            </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 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 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="Change Mask">
                                    <Listeners>
                                        <Click Handler="change();" />
                                    </Listeners>
                                </ext:Button>
                            </Buttons>
                        </ext:FormPanel>
                    </Items>
                </ext:Panel>
            </Items>
        </ext:Viewport>
    </form>
</body>
</html>

**Daniil** · May 14, 2013, 12:41 PM

Please try to replace

<ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="Script" />

with

<ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />

Does it help?

**vadym.f** · May 14, 2013, 1:07 PM

No, I can't tell the difference. I stepped into the code and it looks like after changing the mask processMaskFocus handler isn't executed any more. Maybe, field.getEl().purgeAllListeners(); doesn't clear the listeners cleanly?

**Daniil** · May 15, 2013, 4:19 AM

I think the purgeAllListeners does the job, but you are facing the same problem as here:
http://forums.ext.net/showthread.php?13752#post57226

A solution is in the next post.

**vadym.f** · May 15, 2013, 12:24 PM

Much appreciated Daniil!

Below's the updated version of the changeMask() function. BTW, what would be the call to unmask the field if an empty mask is passed to the changeMask function? I would think something like this but the view mask still shows up.

            if (Ext.isEmpty(newMask)) {
                field.plugins = null;
                field.getEl().unmask();
                return;
            }

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

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

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

            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);
        };

**Daniil** · May 16, 2013, 5:43 AM

The unmask method is from another opera:)
http://docs.sencha.com/extjs/3.4.0/#...-method-unmask

I think something similar to the changeMask method should be done to clear a mask.

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

The viewMask characters continue to show up although the input isn't limited. Some object state doesn't get cleaned up properly after assigning plugins to null.

**Daniil** · May 16, 2013, 11:35 AM

Please try:

field.clear();

Thread: [CLOSED] Applying InputMask dynamically on the client

Thread Tools

Search Thread

Display

[CLOSED] Applying InputMask dynamically on the client

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

Thread: [CLOSED] Applying InputMask dynamically on the client

[CLOSED] Applying InputMask dynamically on the client

Similar Threads

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us