[CLOSED] it is possible to implement "InputMask" dynamically ??

  1. #1

    [CLOSED] it is possible to implement "InputMask" dynamically ??

    Hi Community !

    Please check the code sample below:

    
    <%@ Page Language="C#" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            this.Store1.DataSource = new object[]
            {
                new object[] { "Option1", "Phone"},
                new object[] { "Option2", "All symbols after '?' are optional."},
                new object[] { "Option3", "~ is custom mask symbol (+ or -)"},
                new object[] { "Option4", "No Input Mask"},
            };
        }
        protected void ComboBox1_Select(object sender, DirectEventArgs e)
        {
            try
            {
                TextField1.Plugins.Remove(new Ext.Net.InputMask { });
                TextField1.Clear();
                TextField1.Reset();
    
                Ext.Net.InputMask theInputMask = new InputMask();
                
                switch (ComboBox1.SelectedItem.Value)
                {
                    case "Option1":
                        theInputMask.Mask = "(999) 999-9999";
                        theInputMask.UnmaskOnBlur = false;
                        theInputMask.ClearWhenInvalid = true;
                        TextField1.Plugins.Add(theInputMask);
                        break;
    
                    case "Option2":
                        theInputMask.Mask = "(999) 999-9999?+99999";
                        theInputMask.UnmaskOnBlur = false;
                        theInputMask.ClearWhenInvalid = true;
                        TextField1.Plugins.Add(theInputMask);
                        break;
    
                    case "Option3":
                        theInputMask.Mask = "~9.99";
                        theInputMask.UnmaskOnBlur = false;
                        theInputMask.ClearWhenInvalid = true;
                        theInputMask.MaskSymbols.Add(new MaskSymbol() { Name = "~", Regex = "[+-]" });
                        TextField1.Plugins.Add(theInputMask);
                        break;
    
                    case "Option4":
                        break;                                  
                }
            }
            catch (Exception)
            {
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head id="Head1" runat="server">
        <title>Input Mask - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    </head>
    
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" IDMode="Explicit" Theme="Neptune" />
    
            <ext:Window ID="Window1" runat="server"
                    Title="Input Mask - Ext.NET Examples"
                    Width="450"
                    Height="170"
                    Closable="false"
                    Layout="Fit">
                <BottomBar>
                    <ext:StatusBar ID="FormStatusBar" runat="server" DefaultText="Ready">
                        <Plugins>
                            <ext:ValidationStatus ID="ValidationStatus1"
                                runat="server"
                                FormPanelID="StatusForm"
                                ValidIcon="Accept"
                                ErrorIcon="Exclamation" />
                        </Plugins>
                    </ext:StatusBar>
                </BottomBar>
                <Items>
                    <ext:FormPanel ID="StatusForm" runat="server"
                            LabelWidth="75"
                            ButtonAlign="Right"
                            Border="false"
                            Padding="10">
                        <Defaults>
                            <ext:Parameter Name="LabelWidth" Value="200" />
                        </Defaults>
                        <Items>
                            <ext:ComboBox ID="ComboBox1"
                                runat="server"
                                FieldLabel="Selected Input Mask"
                                LabelWidth="120"
                                Width="380"
                                Editable="false"
                                DisplayField="InputMask"
                                ValueField="Option"
                                QueryMode="Local"
                                ForceSelection="true"
                                TriggerAction="All"
                                EmptyText="Select a Option...">
                                <Store>
                                    <ext:Store ID="Store1" runat="server">
                                        <Model>
                                            <ext:Model ID="Model1" runat="server">
                                                <Fields>
                                                    <ext:ModelField Name="Option" />
                                                    <ext:ModelField Name="InputMask" />
                                                </Fields>
                                            </ext:Model>
                                        </Model>
                                    </ext:Store>
                                </Store>
                                <DirectEvents>
                                    <Select OnEvent="ComboBox1_Select"></Select>
                                </DirectEvents>
                            </ext:ComboBox>
                            <ext:TextField ID="TextField1" runat="server"
                                    FieldLabel="Field Input Mask"
                                    LabelWidth="120"
                                    Width="380"
                                    EnableKeyEvents="true">
                            </ext:TextField>     
                        </Items>
                    </ext:FormPanel>
                </Items>
            </ext:Window>
        </form>
    </body>
    </html>
    it is possible to implement "InputMask" dynamically ??

    According to the example, when you select an item from the list, it is dynamically loaded one InputMask in the TextField control.

    Can you help with the code?

    I accept suggestions ideas or comments
    Last edited by fabricio.murta; Sep 23, 2016 at 12:12 AM.
  2. #2
    Hello Mauricio!

    I will give you the hints, should be easy to make it work!

    - Instead of creating and removing the whole plugin, just change it. Define the plugin in the ASPX markup with no mask, and maybe disabled by default
    - Define all common settings (like UnmaskOnBlur) in the ASPX markup, for simplicity
    - On the code behind, enable the plugin if the option is not "Option4"
    - Now, instead of setting every setting (given the plugin ID as TheInputMask) just set the mask and clear the mask symbols on options 1 and 2. Like this:

    TheInputMask.Call("setMask", <mask_here>);
    TheInputMask.MaskSymbols.Clear();
    - For the Option3, you will just be adding the MaskSymbol object like you already did on your sample, instead of clearing

    And that should just do it! Let us know if this does not help at all!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hi FabrÃ*cio !!

    Thank you ... excellent idea

    You're providing a great support ! Keep up the great work.

    Please close the thread.

    Saludos
    Mauricio.
  4. #4
    Hello Mauricio!

    Thanks for the compliment! Always trying my best! And thanks for the feedback and also glad the suggestion worked for you!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 1
    Last Post: Apr 06, 2016, 12:05 PM
  2. Replies: 3
    Last Post: Jan 28, 2016, 6:13 PM
  3. Replies: 6
    Last Post: May 31, 2013, 3:04 AM
  4. Replies: 5
    Last Post: May 02, 2012, 5:37 PM
  5. Replies: 4
    Last Post: Oct 11, 2011, 2:42 AM

Posting Permissions