Apr 13, 2021, 6:42 AM
Utilize ValidationStatus on thousand separator number field
I have a simple form. contain Name, DOB, Income.
I would like to utilize ValidationStatus on my simple form.
I have overide number field function with thousand separator formated text.
unfortunately validatation status cannot detect the numberfield already inputed.
How to use validation status on thousand separator number field.
Thanks
I would like to utilize ValidationStatus on my simple form.
I have overide number field function with thousand separator formated text.
unfortunately validatation status cannot detect the numberfield already inputed.
How to use validation status on thousand separator number field.
Thanks
<%@ Page Language="C#" %>
<script runat="server">
protected void FormSave(object sender, DirectEventArgs e)
{
FormStatusBar.SetStatus(new StatusBarStatusConfig { Text = "Form saved!", IconCls = " ", Clear2 = true });
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<script type="text/javascript">
Ext.override(Ext.form.Field, {
fireKey: function (e) {
if (e.keyCode == e.ENTER) {
e.stopEvent();
}
this.fireEvent('keypress', this, e);
if (e.isSpecialKey())
this.fireEvent('specialkey', this, e);
this.fireEvent('keydown', this, e);
this.fireEvent('keyup', this, e);
},
setCursorPosition: function (pos) {
var el = this.inputEl.dom;
if (typeof (el.selectionStart) === "number") {
el.focus();
el.setSelectionRange(pos, pos);
} else if (el.createTextRange) {
var range = el.createTextRange();
range.move("character", pos);
range.select();
} else {
throw 'setCursorPosition() not supported';
}
},
getCursorPosition: function () {
var el = this.inputEl.dom;
if (typeof (el.selectionStart) === "number") {
return el.selectionStart;
} else if (document.selection && el.createTextRange) {
var range = document.selection.createRange();
range.collapse(true);
range.moveStart("character", -el.value.length);
return range.text.length;
} else {
throw 'getCursorPosition() not supported';
}
}
});
Ext.override(Ext.form.field.Number, {
currencySymbol: null,
useThousandSeparator: true,
alwaysDisplayDecimals: true,
hideTrigger: true,
fieldStyle: 'text-align: right;',
enableKeyEvents: true,
onKeyUp: function (e, o) {
if (this.getRawValue() != this.getFormattedValue(this.getRawValue())) {
posbef = this.getCursorPosition();
lengthbef = this.getRawValue().length;
this.setRawValue(this.getFormattedValue(this.getRawValue()));
this.setCursorPosition(posbef + this.getRawValue().length - lengthbef);
}
},
setValue: function (value) {
if (value == 0) {
this.setRawValue("0");
}
else {
this.setRawValue(this.getFormattedValue(value));
}
},
getFormattedValue: function (value) {
if (value == null || value == '') {
return value;
}
else {
var neg = null;
value = this.removeFormat(value);
value = (neg = value < 0) ? value * -1 : value;
if (this.useThousandSeparator) {
value = value.toString();
var ps = value.split(Ext.util.Format.decimalSeparator);
if (ps[1] != undefined) {
if (ps[1].length > this.decimalPrecision)
ps[1] = ps[1].substring(0, this.decimalPrecision);
}
var whole = ps[0];
var r = /(\d+)(\d{3})/;
var ts = ',';
while (r.test(whole))
whole = whole.replace(r, '$1' + ts + '$2');
value = whole + (ps[1] != undefined ? Ext.util.Format.decimalSeparator + ps[1] : '');
}
return Ext.String.format('{0}{1}{2}', (neg ? '-' : ''), (Ext.isEmpty(this.currencySymbol) ? '' : this.currencySymbol + ' '), value);
}
},
/**
* overrides parseValue to remove the format applied by this class
*/
parseValue: function (value) {
//Replace the currency symbol and thousand separator
if (value == 'N/A')
return null;
else {
return this.removeFormat(value);
}
},
// /**
// * Remove only the format added by this class to let the superclass validate with it's rules.
// * @param {Object} value
// */
onBlur: function () {
if (this.getRawValue() == null || this.getRawValue() == '')
this.setRawValue('N/A');
},
removeFormat: function (value) {
if (Ext.isEmpty(value) || !this.hasFormat())
return value;
else {
value = value.toString().replace(this.currencySymbol + ' ', '');
value = this.useThousandSeparator ? value.replace(new RegExp('[' + Ext.util.Format.thousandSeparator + ']', 'g'), '') : value;
console.log(value)
return value;
}
},
// /**
// * Remove the format before validating the the value.
// * @param {Number} value
// */
getErrors: function (value) {
return Ext.form.field.Number.superclass.getErrors.call(this, this.removeFormat(value));
},
hasFormat: function () {
return this.decimalSeparator != '.' || (this.useThousandSeparator == true && this.getRawValue() != null) || !Ext.isEmpty(this.currencySymbol) || this.alwaysDisplayDecimals;
},
// /**
// * Display the numeric value with the fixed decimal precision and without the format using the setRawValue, don't need to do a setValue because we don't want a double
// * formatting and process of the value because beforeBlur perform a getRawValue and then a setValue.
// */
onFocus: function () {
this.setRawValue(this.getRawValue().replace('N/A', ''));
this.callParent(arguments);
}
});
</script>
<title>StatusBar Advanced - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
<style>
.list {
list-style-image: none;
list-style-position: outside;
list-style-type: square;
padding-left: 16px;
}
.list li {
font-size: 11px;
padding: 3px;
}
</style>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:Panel
runat="server"
Title="StatusBar with Integrated Form Validation"
Width="350"
Height="220"
Layout="Fit">
<Items>
<ext:FormPanel
ID="StatusForm"
runat="server"
LabelWidth="75"
ButtonAlign="Right"
Border="false"
Padding="10">
<Defaults>
<ext:Parameter Name="Anchor" Value="95%" />
<ext:Parameter Name="AllowBlank" Value="false" Mode="Raw" />
<ext:Parameter Name="SelectOnFocus" Value="true" Mode="Raw" />
<ext:Parameter Name="MsgTarget" Value="side" />
</Defaults>
<Items>
<ext:TextField runat="server" FieldLabel="Name" BlankText="Name is required" />
<ext:DateField runat="server" FieldLabel="Birthdate" BlankText="Birthdate is required" />
<ext:NumberField runat="server" FieldLabel="Income" BlankText="Income is required" />
</Items>
<Buttons>
<ext:Button runat="server" Text="Save" Icon="Disk">
<DirectEvents>
<Click
OnEvent="FormSave"
Before="var valid= #{StatusForm}.getForm().isValid(); if (valid) {#{FormStatusBar}.showBusy('Saving form...');} return valid;">
<EventMask
ShowMask="true"
MinDelay="1000"
Target="CustomTarget"
CustomTarget="={#{StatusForm}.getEl()}" />
</Click>
</DirectEvents>
</ext:Button>
</Buttons>
</ext:FormPanel>
</Items>
<BottomBar>
<ext:StatusBar ID="FormStatusBar" runat="server" DefaultText="Ready">
<Plugins>
<ext:ValidationStatus
runat="server"
FormPanelID="StatusForm"
ValidIcon="Accept"
ErrorIcon="Exclamation" />
</Plugins>
</ext:StatusBar>
</BottomBar>
</ext:Panel>
</form>
</body>
</html>
Last edited by fendiyono; Apr 13, 2021 at 7:06 AM.
