Ir para conteúdo


Foto

Formado de Moeda em xtype: 'textfield' ou 'numberfield'

Moeda Formatar Validação

Melhor Resposta Wemerson Januario , 06 April 2015 - 19:04

Espero que ajude!


    /* * GNU General Public License Usage
     * This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file.  Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
     *
     * http://www.gnu.org/licenses/lgpl.html
     *
     * @description: This class provide additional format to numbers by extending Ext.form.field.Number
     *
     * @author: Greivin Britton
     * @email: brittongr@gmail.com
     * @version: 2 compatible with ExtJS 4 (And ExtJS 5 - chamacs)
     */
    Ext.define('Ext.ux.form.NumericField', {
      extend: 'Ext.form.field.Number',//Extending the NumberField
      alias: 'widget.numericfield',//Defining the xtype	
      currencySymbol: 'R$ ',
      useThousandSeparator: true,
      thousandSeparator: '.',
      alwaysDisplayDecimals: true,

      // MOD - chamacs
      // @private
      isCurrency : false,

      // MOD - pmiguelmartins
      currencySymbolPos : 'left', // left , right

      // MOD - chamacs
      //fieldStyle: 'text-align: right;',

      // MOD - chamacs
      allowExponential : false,

      /**
       * initComponent
       */
      initComponent: function(){
        if (this.useThousandSeparator && this.decimalSeparator == ',' && this.thousandSeparator == ',') {
          this.thousandSeparator = '.';
        }
        else if (this.allowDecimals && this.thousandSeparator == '.' && this.decimalSeparator == '.') {
          this.decimalSeparator = ',';
        }

        // MOD - chamacs
        this.isCurrency = !Ext.isEmpty(this.currencySymbol);

        this.callParent(arguments);
      },

      /**
       * setValue
       */
      setValue: function(value){
        // MOD - chamacs
        Ext.ux.form.NumericField.superclass.setValue.apply(this, [value != null ? value.toString().replace('.', this.decimalSeparator) : value]);

        this.setRawValue(this.getFormattedValue(this.getValue()));
      },

      /**
       * getFormattedValue
       */
      getFormattedValue: function(value){
        if (Ext.isEmpty(value) || !this.hasFormat()) {
          return value;
        }
        else {
          var neg = null;

          value = (neg = value < 0) ? value * -1 : value;
          value = this.allowDecimals && this.alwaysDisplayDecimals ? value.toFixed(this.decimalPrecision) : value;

          if (this.useThousandSeparator) {
            if (this.useThousandSeparator && Ext.isEmpty(this.thousandSeparator)) {
              throw ('NumberFormatException: invalid thousandSeparator, property must has a valid character.');
            }
            if (this.thousandSeparator == this.decimalSeparator) {
              throw ('NumberFormatException: invalid thousandSeparator, thousand separator must be different from decimalSeparator.');
            }

            value = value.toString();

            var ps = value.split('.');
            ps[1] = ps[1] ? ps[1] : null;

            var whole = ps[0];

            var r = /(\d+)(\d{3})/;

            var ts = this.thousandSeparator;

            while (r.test(whole)) {
              whole = whole.replace(r, '$1' + ts + '$2');
            }

            value = whole + (ps[1] ? this.decimalSeparator + ps[1] : '');
          }

          // MOD - pmiguelmartins - updated by chamacs
          var position1 = this.isCurrency ? this.currencySymbol + ' ' : '';
          var position2 = value;
          if (this.currencySymbolPos === 'right') {
            position1 = value;
            position2 = this.isCurrency ? ' ' + this.currencySymbol : '';
          }
          return Ext.String.format('{0}{1}{2}', (neg ? '-'  : ''), position1, position2);
        }
      },

      /**
       * overrides parseValue to remove the format applied by this class
       */
      parseValue: function(value){
        // MOD - chamacs
        //Replace the currency symbol and thousand separator
        return Ext.ux.form.NumericField.superclass.parseValue.apply(this, [this.removeFormat(value)]);
      },

      /**
       * Remove only the format added by this class to let the superclass validate with it's rules.
       * @param {Object} value
       */
      removeFormat: function(value){
        // MOD - chamacs
        if (Ext.isEmpty(value)) {
          return '';
        }
        else if (!this.hasFormat()) {
          return value;
        }
        else {
          // MOD - bhaidaya
          value = Ext.String.trim(value.toString().replace(this.currencySymbol, ''));

          value = this.useThousandSeparator ? value.replace(new RegExp('[' + this.thousandSeparator + ']', 'g'), '') : value;
          return value;
        }
      },

      /**
       * Remove the format before validating the the value.
       * @param {Number} value
       */
      getErrors: function(value) {
        // MOD - chamacs
        return Ext.ux.form.NumericField.superclass.getErrors.apply(this, [this.removeFormat(value)]);
      },

      /**
       * hasFormat
       */
      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.removeFormat(this.getRawValue()));

        this.callParent(arguments);
      },

      /**
       * MOD - Jeff.Evans
       */
      processRawValue: function(value) {
        return this.removeFormat(value);
      }
    });
Visualizar todo o conteúdo do post


  • Por favor, faça o login para responder
15 respostas neste tópico

#1 Antonio Junior

Antonio Junior

    Member Avançado

  • Membros
  • PipPipPip
  • 52 posts
  • LocationSão Luís

Postado 03 April 2015 - 08:52

Como fazer uma formatação no campo textfield em moeda como exemplo R$ 999.999.999,99 e também validando sempre quando é digitado ou sair do foco do campo.

 

Quem souber uma dica ou rotina fico muito agradecido.



#2 Legolas

Legolas

    Ext JS - Admin

  • Administrators
  • 3497 posts
  • LocationBelo Horizonte

Postado 06 April 2015 - 13:17

Como fazer uma formatação no campo textfield em moeda como exemplo R$ 999.999.999,99 e também validando sempre quando é digitado ou sair do foco do campo.

 

Quem souber uma dica ou rotina fico muito agradecido.

Antonio, sobre a máscara dê uma olhada nessa thread "ExtJS4 - Máscara para campos - MaskText" esse plugin é muito utilizado para isso.

 

Agora sobre a validação isso você pode fazer utilizando VTypes, tem alguns tópicos aqui do fórum que pode lhe ajudar, depois dê uma pesquisada.


"A verdadeira vitória não é derrotar alguém forte... É ser capaz de proteger alguém que você ama de verdade!" (Maito Dai)


#3 Wemerson Januario

Wemerson Januario

    Administrador Ext JS Brasil

  • Administrators
  • 857 posts
  • LocationGoiânia - GO

Postado 06 April 2015 - 19:04   Melhor Resposta

Espero que ajude!


    /* * GNU General Public License Usage
     * This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file.  Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
     *
     * http://www.gnu.org/licenses/lgpl.html
     *
     * @description: This class provide additional format to numbers by extending Ext.form.field.Number
     *
     * @author: Greivin Britton
     * @email: brittongr@gmail.com
     * @version: 2 compatible with ExtJS 4 (And ExtJS 5 - chamacs)
     */
    Ext.define('Ext.ux.form.NumericField', {
      extend: 'Ext.form.field.Number',//Extending the NumberField
      alias: 'widget.numericfield',//Defining the xtype	
      currencySymbol: 'R$ ',
      useThousandSeparator: true,
      thousandSeparator: '.',
      alwaysDisplayDecimals: true,

      // MOD - chamacs
      // @private
      isCurrency : false,

      // MOD - pmiguelmartins
      currencySymbolPos : 'left', // left , right

      // MOD - chamacs
      //fieldStyle: 'text-align: right;',

      // MOD - chamacs
      allowExponential : false,

      /**
       * initComponent
       */
      initComponent: function(){
        if (this.useThousandSeparator && this.decimalSeparator == ',' && this.thousandSeparator == ',') {
          this.thousandSeparator = '.';
        }
        else if (this.allowDecimals && this.thousandSeparator == '.' && this.decimalSeparator == '.') {
          this.decimalSeparator = ',';
        }

        // MOD - chamacs
        this.isCurrency = !Ext.isEmpty(this.currencySymbol);

        this.callParent(arguments);
      },

      /**
       * setValue
       */
      setValue: function(value){
        // MOD - chamacs
        Ext.ux.form.NumericField.superclass.setValue.apply(this, [value != null ? value.toString().replace('.', this.decimalSeparator) : value]);

        this.setRawValue(this.getFormattedValue(this.getValue()));
      },

      /**
       * getFormattedValue
       */
      getFormattedValue: function(value){
        if (Ext.isEmpty(value) || !this.hasFormat()) {
          return value;
        }
        else {
          var neg = null;

          value = (neg = value < 0) ? value * -1 : value;
          value = this.allowDecimals && this.alwaysDisplayDecimals ? value.toFixed(this.decimalPrecision) : value;

          if (this.useThousandSeparator) {
            if (this.useThousandSeparator && Ext.isEmpty(this.thousandSeparator)) {
              throw ('NumberFormatException: invalid thousandSeparator, property must has a valid character.');
            }
            if (this.thousandSeparator == this.decimalSeparator) {
              throw ('NumberFormatException: invalid thousandSeparator, thousand separator must be different from decimalSeparator.');
            }

            value = value.toString();

            var ps = value.split('.');
            ps[1] = ps[1] ? ps[1] : null;

            var whole = ps[0];

            var r = /(\d+)(\d{3})/;

            var ts = this.thousandSeparator;

            while (r.test(whole)) {
              whole = whole.replace(r, '$1' + ts + '$2');
            }

            value = whole + (ps[1] ? this.decimalSeparator + ps[1] : '');
          }

          // MOD - pmiguelmartins - updated by chamacs
          var position1 = this.isCurrency ? this.currencySymbol + ' ' : '';
          var position2 = value;
          if (this.currencySymbolPos === 'right') {
            position1 = value;
            position2 = this.isCurrency ? ' ' + this.currencySymbol : '';
          }
          return Ext.String.format('{0}{1}{2}', (neg ? '-'  : ''), position1, position2);
        }
      },

      /**
       * overrides parseValue to remove the format applied by this class
       */
      parseValue: function(value){
        // MOD - chamacs
        //Replace the currency symbol and thousand separator
        return Ext.ux.form.NumericField.superclass.parseValue.apply(this, [this.removeFormat(value)]);
      },

      /**
       * Remove only the format added by this class to let the superclass validate with it's rules.
       * @param {Object} value
       */
      removeFormat: function(value){
        // MOD - chamacs
        if (Ext.isEmpty(value)) {
          return '';
        }
        else if (!this.hasFormat()) {
          return value;
        }
        else {
          // MOD - bhaidaya
          value = Ext.String.trim(value.toString().replace(this.currencySymbol, ''));

          value = this.useThousandSeparator ? value.replace(new RegExp('[' + this.thousandSeparator + ']', 'g'), '') : value;
          return value;
        }
      },

      /**
       * Remove the format before validating the the value.
       * @param {Number} value
       */
      getErrors: function(value) {
        // MOD - chamacs
        return Ext.ux.form.NumericField.superclass.getErrors.apply(this, [this.removeFormat(value)]);
      },

      /**
       * hasFormat
       */
      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.removeFormat(this.getRawValue()));

        this.callParent(arguments);
      },

      /**
       * MOD - Jeff.Evans
       */
      processRawValue: function(value) {
        return this.removeFormat(value);
      }
    });

  • Legolas e Antonio Junior curtiram isso

Wemerson Januario
http://wemersonjanuario.com.br
Twitter: @januariocoder

 

Treinamento e Consultoria Ext JS. Qualifique-se já!


#4 Antonio Junior

Antonio Junior

    Member Avançado

  • Membros
  • PipPipPip
  • 52 posts
  • LocationSão Luís

Postado 07 April 2015 - 20:39

Muito obrigado amigos vou realizar os teste e simulações!



#5 Marcelo Augusto

Marcelo Augusto

    Member Avançado

  • Membros
  • PipPipPip
  • 232 posts
  • LocationCaicó, Rio Grande do Norte

Postado 06 January 2016 - 10:17

Alguém tem exemplos do uso desse plugin NumericField ou de algum outro plugin que utilize máscara para o formato de moeda?



#6 Legolas

Legolas

    Ext JS - Admin

  • Administrators
  • 3497 posts
  • LocationBelo Horizonte

Postado 13 January 2016 - 15:09

Alguém tem exemplos do uso desse plugin NumericField ou de algum outro plugin que utilize máscara para o formato de moeda?

Marcelo, no link que postei tem um exemplo no arquivo "app.js" que está no Github.


"A verdadeira vitória não é derrotar alguém forte... É ser capaz de proteger alguém que você ama de verdade!" (Maito Dai)


#7 Marcelo Augusto

Marcelo Augusto

    Member Avançado

  • Membros
  • PipPipPip
  • 232 posts
  • LocationCaicó, Rio Grande do Norte

Postado 18 January 2016 - 09:47

Valeu, Legolas. O valor que aparece no campo fica alinhado à direita, qual a propriedade que modifica isso? Teria como mostrar a mesma formatação nas linhas do grid?



#8 Legolas

Legolas

    Ext JS - Admin

  • Administrators
  • 3497 posts
  • LocationBelo Horizonte

Postado 19 January 2016 - 11:07

Marcelo, o alinhamento dos dados se da pela propriedade align da coluna. Mas caso esteja utilizando algo customizado isso pode ser alterado via CSS.

 

Agora sobre a sua dúvida:

Teria como mostrar a mesma formatação nas linhas do grid?

Se entendi direito é ter a mesma formatação do alinhamento do textos, se for isso dê uma olhada no método getRowClass da classe Ext.view.Table, pois utilizando a propriedade "viewConfig" da classe Ext.grid.Panel (como demonstra o link do método getRowClass) você pode passar a função que será chamada para resgatar a classe CSS para a linha.

 

Veja se isso lhe ajude.


"A verdadeira vitória não é derrotar alguém forte... É ser capaz de proteger alguém que você ama de verdade!" (Maito Dai)


#9 Marcelo Augusto

Marcelo Augusto

    Member Avançado

  • Membros
  • PipPipPip
  • 232 posts
  • LocationCaicó, Rio Grande do Norte

Postado 20 January 2016 - 07:24

Legolas, desculpaí, me expressei mal. O problema do alinhamento é no textfield do meu form, que após usar a máscara, o valor que eu digito fica alinhado à direita.

A formatação que eu me referi para o grid é a mesma da máscara. Por exemplo, com a máscara, o meu textfield vai me mostrar R$ 9.999,99. Aí queria saber se teria como utilizar essa mesma formatação na linha do grid, mostrando os dados carregados do banco.  



#10 Legolas

Legolas

    Ext JS - Admin

  • Administrators
  • 3497 posts
  • LocationBelo Horizonte

Postado 21 January 2016 - 14:30

Legolas, desculpaí, me expressei mal. O problema do alinhamento é no textfield do meu form, que após usar a máscara, o valor que eu digito fica alinhado à direita.

Marcelo, se não me engano isso é um comportamento padrão do campo, mas você pode utilizar uma das propriedades fieldCls ou fieldStyle para adicionar um estilo para o alinhamento do texto.

{
    xtype: 'textfield',
    fieldStyle: 'text-align: center;', // AQUI ESTÁ O ESTILO PARA O CAMPO
    name: 'name',
    fieldLabel: 'Name',
    allowBlank: false
}

A formatação que eu me referi para o grid é a mesma da máscara. Por exemplo, com a máscara, o meu textfield vai me mostrar R$ 9.999,99. Aí queria saber se teria como utilizar essa mesma formatação na linha do grid, mostrando os dados carregados do banco.  

Tem sim meu caro, dê uma olhada no arquivo "app.js" do Github na linha #181 tem um exemplo de como utilizar a método maskRenderer para renderizar um dado formatado.


"A verdadeira vitória não é derrotar alguém forte... É ser capaz de proteger alguém que você ama de verdade!" (Maito Dai)


#11 Marcelo Augusto

Marcelo Augusto

    Member Avançado

  • Membros
  • PipPipPip
  • 232 posts
  • LocationCaicó, Rio Grande do Norte

Postado 22 January 2016 - 07:53

Legolas, o fieldStyle e o fieldCls ambos não funcionaram. 

A formatação do grid também não deu certo como eu queria, pois alguns valores ficam não se encaixam no tamanho da máscara. Aí alguns valores ficam nessa formatação, por exemplo: R$ 1.000.___,__



#12 Legolas

Legolas

    Ext JS - Admin

  • Administrators
  • 3497 posts
  • LocationBelo Horizonte

Postado 22 January 2016 - 19:41

Legolas, o fieldStyle e o fieldCls ambos não funcionaram. 

É Marcelo, olhando o código fonte ao renderizar o campo a UX seta esse comportamento:

afterRender: function()
{
    if(this.money)
    {
        this.inputEl.setStyle('text-align', 'right');
    }
    ...
}

 

A formatação do grid também não deu certo como eu queria, pois alguns valores ficam não se encaixam no tamanho da máscara. Aí alguns valores ficam nessa formatação, por exemplo: R$ 1.000.___,__

Agora nesse caso eu nunca tinha visto alguém reportar isso, mas no caso já verificou se o valor do field está correto? Tipo se o campo é do tipo number ou integer, se o valor está formatado, pois tente colocar algum valores de teste como 1234, 1234.56, etc.


"A verdadeira vitória não é derrotar alguém forte... É ser capaz de proteger alguém que você ama de verdade!" (Maito Dai)


#13 Marcelo Augusto

Marcelo Augusto

    Member Avançado

  • Membros
  • PipPipPip
  • 232 posts
  • LocationCaicó, Rio Grande do Norte

Postado 25 January 2016 - 09:03

No model, eu coloquei o campo como float, Legolas. 

Coloquei a formatação da máscara no grid pra ficar assim:

{text: 'Preço', dataIndex: 'preco', width: '5%', renderer: Ext.util.Format.maskRenderer('R$ 9.999.999,99')}, 

Eu acho que tá ficando do jeito que te falei por conta dessa máscara. Mas como eu não sei quantas casas terão os valores a serem informados, coloquei essa daí mesmo. Aí quando um valor tem menos casas do que essa informada, as casas que ficam em branco ele tá completando com os underlines. Eu coloquei um registro que custa R$ 3,00, quando o valor é retornado, aparece R$ 3.___.___,__



#14 Legolas

Legolas

    Ext JS - Admin

  • Administrators
  • 3497 posts
  • LocationBelo Horizonte

Postado 25 January 2016 - 16:15

Marcelo, como sua coluna é dó tipo monetária deve ser passado o segundo parâmetro para o método "maskRenderer", tente assim:

{text: 'Preço', dataIndex: 'preco', width: '5%', renderer: Ext.util.Format.maskRenderer('R$ #9.999.999,99', true)}, 

Desta forma irá renderizar certinho, se tiver qualquer dúvida criei esse fiddle que demonstra a renderização do valor.

Veja no exemplo que criei que os valores estão no formato US e não Pt-BR.

 

Espero que lhe ajude.


  • Marcelo Augusto curtiu isso

"A verdadeira vitória não é derrotar alguém forte... É ser capaz de proteger alguém que você ama de verdade!" (Maito Dai)


#15 Marcelo Augusto

Marcelo Augusto

    Member Avançado

  • Membros
  • PipPipPip
  • 232 posts
  • LocationCaicó, Rio Grande do Norte

Postado 27 January 2016 - 08:20

Onde diz que precisava desse segundo parâmetro, cara? Agora os valores estão aparecendo corretamente..

Muito obrigado pela ajuda (como sempre), Legolas!  



#16 Legolas

Legolas

    Ext JS - Admin

  • Administrators
  • 3497 posts
  • LocationBelo Horizonte

Postado 27 January 2016 - 15:00

Onde diz que precisava desse segundo parâmetro, cara? Agora os valores estão aparecendo corretamente..

Eu lembro que sempre tive que utilizar assim, mas tive que olhar no código da classe TextMaskCore onde é adicionado o método maskRenderer para me lembrar o porque disso.

 

Muito obrigado pela ajuda (como sempre), Legolas!  

Por nada meu caro.


"A verdadeira vitória não é derrotar alguém forte... É ser capaz de proteger alguém que você ama de verdade!" (Maito Dai)





0 usuário(s) está(ão) lendo este tópico

0 membros, 0 visitantes, 0 membros anônimos