PDA

View Full Version : [CLOSED] Mask money pt-BR



luiz
Jan 19, 2014, 8:22 PM
Hi,

Is there something like that (http://rkn.com.br/git/ExtJS4-TextMask/)?
See the example value (Valor: R$ 0,00).
If not how I can use it in a textfield?

Daniil
Jan 20, 2014, 4:46 AM
Hi @luiz,

Is the InputMask not what you are looking for?
http://examples2.ext.net/#/Form/TextField/InputMask/

luiz
Jan 20, 2014, 11:59 AM
Hi Daniil,


Is the InputMask not what you are looking for?

I think no. The mask plugin the "ext.net (extjs)" is fixed.

The plugin I sent can do this:

1,00
1,99
19,90
199,00
1.990,00
1.990,59
19.909,90
1990.992.100,22

It formats the value.

Maybe I did not know how to configure the plugin you suggested.

Thanks!

Daniil
Jan 20, 2014, 2:51 PM
I think you are right, there is no such the functionality in the InputMask plugin.

You could try a similar approach that we discussed here:
http://forums.ext.net/showthread.php?27858

Or you can try to use TextMaskPlugin.js (that you referred to). It should be compatible with the ExtJS version used in Ext.NET. The latest Ext.NET releases - v2.3 and v2.4 - are both based on ExtJS 4.2.1 (the last public release).

luiz
Jan 20, 2014, 9:37 PM
Hi Daniil,



You could try a similar approach that we discussed here:
http://forums.ext.net/showthread.php?27858

This example is very different.


Or you can try to use TextMaskPlugin.js (that you referred to).
I think try to solve without modifying ext.net scripts is less "dangerous".


The latest Ext.NET releases - v2.3 and v2.4 - are both based on ExtJS 4.2.1 (the last public release).
I upgraded to this version 4.2.1 and continued working.

Is possible use this plugin otherwise?

That would really be a plugin?

Thanks for you help!

Daniil
Jan 21, 2014, 4:14 AM
I think try to solve without modifying ext.net scripts is less "dangerous".


Well, you won't need to modify the existing Ext.NET scripts.



Is possible use this plugin otherwise?


You can use it via a GenericPlugin:
http://forums.ext.net/showthread.php?10034&p=40035&viewfull=1#post40035



That would really be a plugin?


Sorry, I don't understand the question. Please elaborate.

luiz
Jan 22, 2014, 4:31 PM
Hi Daniil,


Well, you won't need to modify the existing Ext.NET scripts.

I don't understand!

Daniil
Jan 23, 2014, 2:51 AM
Well, could you, please, clarify why you are going to modify the Ext.NET scripts? Using a third-party plugin should not require that.

luiz
Jan 28, 2014, 11:02 AM
Hi Daniil,

Can you provide an example using ext.net componetes for this (http://exemplos.aureliosaraiva.com/fieldmoney/exemplo.html) example?

Thanks!

Daniil
Jan 28, 2014, 11:26 AM
Unfortunately, we don't have such an example and such the functionality. Though, it should be possible. We could assist if you want to implement such the functionality.

Though, maybe, it is better to use the FieldMoney component if it is exactly what you need?

luiz
Jan 28, 2014, 11:41 AM
Hi Daniil,


Though, maybe, it is better to use the FieldMoney component if it is exactly what you need?
yes.

I tried using the xtype.

<ext:TextField ID="text" runat="server" RenderXType="true">

</ext:TextField>

In the original example is this way.

labelAlign : 'top',
anchor : '100%',
xtype : 'field-money',
showSymbol : true,
symbol : 'R$ ',
thousands : '.',
decimal : ',',
fieldLabel : 'Exemplo 3'

I am confused in using these components.

Daniil
Jan 28, 2014, 2:31 PM
You can use a GenericComponent in code behind.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.Form.Controls.Add(new GenericComponent<TextField>()
{
GenericInstanceOf = "Ext.ux.form.FieldMoney",
GenericXType = "field-money"
});
}
}
</script>

<!DOCTYPE html>
<html>
<head runat="server">
<title>Ext.NET v2 Example</title>

<script src="resources/js/FieldMoney.js"></script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
</form>
</body>
</html>


Or you can implement your own control deriving from the TextField class. At a minimum you will need to override the InstanceOf, XType and Resources (if you don't want to attach the FieldMoney.js manually) properties. Here is a small tutorial:
http://forums.ext.net/showthread.php?18103&p=78126&viewfull=1#post78126

luiz
Jan 28, 2014, 5:53 PM
Hi Daniil,

I implemented my own control deriving from the TextField class.

I have a question.

How to create a property that exists in javascript?

For example:

Java Script:

decimal : '.',
precision : 2,

I want to add them in my control.

Thanks!

Daniil
Jan 29, 2014, 3:05 AM
You should override the ConfigOptions property. Please see the guide, there is the Listeners property goes to JavaScript.

luiz
Jan 29, 2014, 11:29 AM
Hi

I tried to do so:

My custom control:

[Browsable(false)]
[EditorBrowsable(EditorBrowsableState.Never)]
[DesignerSerializationVisibility(DesignerSerializat ionVisibility.Hidden)]
[XmlIgnore]
[JsonIgnore]
public override ConfigOptionsCollection ConfigOptions
{
get
{
ConfigOptionsCollection list = base.ConfigOptions;

list.Add("precision", new ConfigOption("precision", new SerializationOptions("precision", JsonMode.Object), null, this.Precision));

return list;
}
}

[Meta]
[ConfigOption]
[Category("5. Field")]
[DefaultValue(2)]
[Description("")]
public virtual int Precision
{
get
{
return this.State.Get<int>("precision", 2);
}
set
{
this.State.Set("precision", value);
}
}



Not work.

Any idea?

Thanks!

Daniil
Jan 29, 2014, 11:53 AM
Please provide a full test case.

luiz
Jan 29, 2014, 12:10 PM
The component works, but the news properties do not!



AssemblyInfo


[assembly: WebResource("TesteMascara.Scripts.FieldMoney.js", "text/javascript")]


JS

Ext.define('Ext.ux.form.FieldMoney', {
extend : 'Ext.form.field.Text',
alias : 'widget.field-money',
symbol : 'US$ ',
showSymbol : false,
symbolStay : false,
thousands : ',',
decimal : '.',
precision : 2,
defaultZero : true,
allowZero : false,
allowNegative : false,

onRender : function() {
this.callParent(arguments);
var name = this.name || this.inputEl.dom.name;
this.hiddenField = this.inputEl.insertSibling({
tag : 'input',
type : 'hidden',
name : name,
value : this._parseValue(this.value)
});
this.hiddenName = name;

this.inputEl.dom.removeAttribute('name');
this.inputEl.on({
keyup : {
scope : this,
fn : this._onUpdateHidden
},
blur : {
scope : this,
fn : this._onUpdateHidden
}
}, Ext.isIE ? 'after' : 'before');
this.setValue = Ext.Function.createSequence(this.setValue, this._onUpdateHidden, this);
},
_parseValue : function(v) {

var v = this.getValue();

v = v.replace(/\D/g, "");
if(v.length==0){
return 0;
}
if(this.precision > 0) {
return parseFloat(v.substr(0, (v.length - this.precision)) + "." + v.substr((v.length - this.precision)));
} else {
return parseFloat(v);
}

},
_onUpdateHidden : function() {
this.hiddenField.dom.value = this._parseValue(this.getValue());
},
initEvents : function() {

var input = this.inputEl;

input.on('keypress', this._onKeypress, this);
input.on('keydown', this._onKeydown, this);
input.on('blur', this._onBlur, this);
input.on('focus', this._onFocus, this);

this.callParent();
},

_onFocus : function(e) {
var input = this.inputEl;

var mask = this._getDefaultMask();
if(input.getValue() == mask) {
input.getValue('');
} else if(input.getValue() == '' && this.defaultZero) {
input.dom.value = (this._setSymbol(mask));
} else {
input.dom.value = (this._setSymbol(input.getValue()));
}
if(this.createTextRange) {
var textRange = this.createTextRange();
textRange.collapse(false);
// set the cursor at the end of the input
textRange.select();
}
},
_onBlur : function(e) {
if(Ext.isIE) {
this._onKeypress(e);
}

var input = this.inputEl;

if(input.getValue() == '' || input.getValue() == this._setSymbol(this._getDefaultMask()) || input.getValue() == this.symbol) {
if(!this.allowZero)
input.dom.value = '';
else if(!this.symbolStay)
input.dom.value = (this._getDefaultMask());
else
input.dom.value = (this._setSymbol(this._getDefaultMask()));
} else {
if(!this.symbolStay)
input.dom.value = (input.getValue().replace(this.symbol, ''));
else if(this.symbolStay && input.getValue() == this.symbol)
input.dom.value = (this._setSymbol(this._getDefaultMask()));
}
},
_onKeydown : function(e) {
e = e || window.event;
var k = e.getCharCode() || e.getKey() || e.which, input = this.inputEl;
if(k == undefined)
return false;
//needed to handle an IE "special" event
if(input.getAttribute('readonly') && (k != 13 && k != 9))
return false;
// don't allow editing of readonly fields but allow tab/enter

var x = input.dom;
var selection = this._getInputSelection(x);
var startPos = selection.start;
var endPos = selection.end;

if(k == 8) {// backspace key
e.preventDefault();

if(startPos == endPos) {
// Remove single character
x.value = x.value.substring(0, startPos - 1) + x.value.substring(endPos, x.value.length);
startPos = startPos - 1;
} else {
// Remove multiple characters
x.value = x.value.substring(0, startPos) + x.value.substring(endPos, x.value.length);
}
this._maskAndPosition(x, startPos);
return false;
} else if(k == 9) {// tab key
return true;
} else if(k == 46 || k == 63272) {// delete key (with special case for safari)
preventDefault(e);
if(x.selectionStart == x.selectionEnd) {
// Remove single character
x.value = x.value.substring(0, startPos) + x.value.substring(endPos + 1, x.value.length);
} else {
//Remove multiple characters
x.value = x.value.substring(0, startPos) + x.value.substring(endPos, x.value.length);
}
this._maskAndPosition(x, startPos);
return false;
} else {// any other key
return true;
}
},
_onKeypress : function(e) {
e = e || window.event;
var k = e.getCharCode() || e.getKey() || e.which, input = this.inputEl;
if(k == undefined)
return false;
//needed to handle an IE "special" event
if(input.getAttribute('readonly') && (k != 13 && k != 9))
return false;
// don't allow editing of readonly fields but allow tab/enter

if(k < 48 || k > 57) {// any key except the numbers 0-9
if(k == 45) {// -(minus) key
this.setValue(this._changeSign(input));
return false;
}
if(k == 43) {// +(plus) key
input.val(input.getValue().replace('-', ''));
return false;
} else if(k == 13 || k == 9) {// enter key or tab key
return true;
} else if(k == 37 || k == 39) {// left arrow key or right arrow key
return true;
} else {// any other key with keycode less than 48 and greater than 57
e.preventDefault();
return true;
}
} else if(input.getValue().length == input.getAttribute('maxlength')) {
return false;
} else {
e.preventDefault();

var key = String.fromCharCode(k);
var x = input.dom;

var selection = this._getInputSelection(x);
var startPos = selection.start;
var endPos = selection.end;
x.value = x.value.substring(0, startPos) + key + x.value.substring(endPos, x.value.length);
this._maskAndPosition(x, startPos + 1);
return false;
}
},
_getDefaultMask : function() {
var n = parseFloat('0') / Math.pow(10, this.precision);
return (n.toFixed(this.precision)).replace(new RegExp('\\.', 'g'), this.decimal);
},
_maskValue : function(v) {
var input = this.inputEl;
v = v.replace(this.symbol, '');

var strCheck = '0123456789';
var len = v.length;
var a = '', t = '', neg = '';

if(len != 0 && v.charAt(0) == '-') {
v = v.replace('-', '');
if(this.allowNegative) {
neg = '-';
}
}

if(len == 0) {
if(!this.defaultZero)
return t;
t = '0.00';
}

for(var i = 0; i < len; i++) {
if((v.charAt(i) != '0') && (v.charAt(i) != this.decimal))
break;
}

for(; i < len; i++) {
if(strCheck.indexOf(v.charAt(i)) != -1)
a += v.charAt(i);
}

var n = parseFloat(a);
n = isNaN(n) ? 0 : n / Math.pow(10, this.precision);
t = n.toFixed(this.precision);
i = this.precision == 0 ? 0 : 1;
var p, d = (t=t.split('.'))[i].substr(0, this.precision);
for( p = ( t = t[0]).length; (p -= 3) >= 1; ) {
t = t.substr(0, p) + this.thousands + t.substr(p);
}

return (this.precision > 0) ? this._setSymbol(neg + t + this.decimal + d + Array((this.precision + 1) - d.length).join(0)) : this._setSymbol(neg + t);
},
_setSymbol : function(v) {
if(this.showSymbol) {
if(v.substr(0, this.symbol.length) != this.symbol)
return this.symbol + v;
}
return v;
},
_maskAndPosition : function(x, startPos) {
var input = this.inputEl, originalLen = input.getValue().length;

input.dom.value = this._maskValue(x.value);
var newLen = input.getValue().length;
startPos = startPos - (originalLen - newLen);
this._setCursorPosition(startPos);
},
_changeSign : function(i) {
if(this.allowNegative) {
var vic = i.getValue();
if(i.getValue() != '' && i.getValue().charAt(0) == '-') {
return i.getValue().replace('-', '');
} else {
return '-' + i.getValue();
}
} else {
return i.getValue();
}
},
_getInputSelection : function(el) {
var start = 0, end = 0, normalizedValue, range, textInputRange, len, endRange;

if( typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") {
start = el.selectionStart;
end = el.selectionEnd;
} else {
range = document.selection.createRange();

if(range && range.parentElement() == el) {
len = el.value.length;
normalizedValue = el.value.replace(/\r\n/g, "\n");

// Create a working TextRange that lives only in the input
textInputRange = el.createTextRange();
textInputRange.moveToBookmark(range.getBookmark()) ;

// Check if the start and end of the selection are at the very end
// of the input, since moveStart/moveEnd doesn't return what we want
// in those cases
endRange = el.createTextRange();
endRange.collapse(false);

if(textInputRange.compareEndPoints("StartToEnd", endRange) > -1) {
start = end = len;
} else {
start = -textInputRange.moveStart("character", -len);
start += normalizedValue.slice(0, start).split("\n").length - 1;

if(textInputRange.compareEndPoints("EndToEnd", endRange) > -1) {
end = len;
} else {
end = -textInputRange.moveEnd("character", -len);
end += normalizedValue.slice(0, end).split("\n").length - 1;
}
}
}
}

return {
start : start,
end : end
};
},
_setCursorPosition : function(pos) {
var elem = this.inputEl;
if(elem.setSelectionRange) {
elem.focus();
elem.setSelectionRange(pos, pos);
} else if(elem.createTextRange) {
var range = elem.createTextRange();
range.collapse(true);
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();
}
}
});

Ext.ComponentMgr.registerType("field-money", Ext.ux.form.FieldMoney);


My control:

using System.Collections.Generic;
using System.ComponentModel;
using System.Xml.Serialization;
using Ext.Net;
using Newtonsoft.Json;

namespace TesteMascara
{
public class TextFieldMoney : TextField
{
public override string XType
{
get
{
return "field-money";
}
}

public override string InstanceOf
{
get
{
return "Ext.ux.form.FieldMoney";
}
}

protected override List<ResourceItem> Resources
{
get
{
List<ResourceItem> resources = base.Resources;
resources.Capacity += 1;
resources.Add(new ClientScriptItem(typeof(TextFieldMoney), "TesteMascara.Scripts.FieldMoney.js", ""));
return resources;
}
}

[Browsable(false)]
[EditorBrowsable(EditorBrowsableState.Never)]
[DesignerSerializationVisibility(DesignerSerializat ionVisibility.Hidden)]
[XmlIgnore]
[JsonIgnore]
public override ConfigOptionsCollection ConfigOptions
{
get
{
ConfigOptionsCollection list = base.ConfigOptions;

list.Add("precision", new ConfigOption("precision", new SerializationOptions("precision", JsonMode.Object), null, this.Precision));
list.Add("thousands", new ConfigOption("thousands", new SerializationOptions("thousands", JsonMode.Object), null, this.Thousands));
list.Add("decimal", new ConfigOption("decimal", new SerializationOptions("decimal", JsonMode.Object), null, this.Decimal));

return list;
}
}

[Meta]
[ConfigOption]
[Category("5. Field")]
[DefaultValue(2)]
[Description("")]
public virtual int Precision
{
get
{
return this.State.Get<int>("precision", 2);
}
set
{
this.State.Set("precision", value);
}
}

[Meta]
[ConfigOption]
[Category("5. Field")]
[DefaultValue('.')]
[Description("")]
public virtual char Thousands
{
get
{
return this.State.Get<char>("thousands", '.');
}
set
{
this.State.Set("thousands", value);
}
}

[Meta]
[ConfigOption]
[Category("5. Field")]
[DefaultValue(',')]
[Description("")]
public virtual char Decimal
{
get
{
return this.State.Get<char>("decimal", ',');
}
set
{
this.State.Set("decimal", value);
}
}
}
}

My test:


<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="TesteMascara.aspx.cs" Inherits="TesteMascara.TesteMascara" %>

<%@ Register Assembly="TesteMascara" Namespace="TesteMascara" TagPrefix="cc" %>


<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<cc:TextFieldMoney ID="TextFieldMoney" runat="server" FieldLabel="Mascara" Decimal="," Thousands="." />
</asp:Content>

Thanks!

Daniil
Jan 29, 2014, 1:06 PM
You are using Decimal=",", but it is a default value here:

[DefaultValue(',')]
and here

return this.State.Get<char>("decimal", ',');

If a property's value is a default value, it is not rendered to client.

Also I would suggest to use string instead of char.

So, this will be working:

public virtual string Decimal
{
get
{
return this.State.Get<string>("decimal", "");
}
set
{
this.State.Set("decimal", value);
}
}

list.Add("decimal", new ConfigOption("decimal", null, "", this.Decimal));

luiz
Jan 29, 2014, 2:35 PM