Sep 21, 2016, 7:05 PM
[CLOSED] it is possible to implement "InputMask" dynamically ??
Hi Community !
Please check the code sample below:
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
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.