1 Attachment(s)
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.
Attachment 25524
unfortunately validatation status cannot detect the numberfield already inputed.
How to use validation status on thousand separator number field.
Thanks
Code:
<%@ 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>
