You shouldn't be using input mask here, cause it is not flexible enough for your case.
It seems this is a read-only field which is not having user input, right? So you'll be setting its value i.e. by a js function or database feed with the final value in the format you specified.
That said, when you fill the value, you should use a number formatter. See if this example fits your scenario:
<%@ Page Language="C#" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
<script type="text/javascript">
var formatFieldNumber = function (item, newValue) {
var formattedValue;
if (newValue != null && typeof(newValue) == "string" && newValue.length > 0) {
// Strip the number from anything not an actual number
formattedValue = newValue.replace(/[^0-9.]/g, '');
// If the number has more than 4 digits, then start formatting it
if (formattedValue.length > 1) {
formattedValue = Ext.util.Format.number(formattedValue, '0,000.000');
}
// Update the field with the formatted number
if (formattedValue != newValue) {
item.setValue(formattedValue);
App.statusBar.setText("Provided value: " + newValue + " - Formatted value: " + formattedValue);
}
}
}
var mkRandNum = function () {
// From 1E-3 to 1E+10
var integerDigits = Math.floor((Math.random() * 13) + 1) - 3;
// Return string with the formatted random number
return (Math.random() * Math.pow(10, integerDigits)).toString();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<ext:ResourceManager runat="server" />
<ext:TextField ID="txtTotalAmount" Text="0" LabelWidth="180" ClientIDMode="Static" runat="server" Flex="1" FieldLabel="Total Amount" LabelAlign="Left" />
<ext:Button runat="server" Text="Fill new value" OnClientClick="formatFieldNumber(App.txtTotalAmount, mkRandNum());" />
<ext:Label runat="server" ID="statusBar" Text="Provided value: N/A - Formatted value: N/A" />
</div>
</form>
</body>
</html>
I hope this helps!
