Ir para conteúdo


Foto

Ux.InputTextMask for ExtJS4


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

#1 Nom4d3

Nom4d3

    Member Avançado

  • Membros
  • PipPipPip
  • 952 posts
  • LocationAraras/SP/Brasil

Postado 04 April 2011 - 16:03

Bom, estou migrando algumas das minhas aplicações para o ExtJS4 e alguns plugins estão sendo removidos pra utilizar os nativos, outros substituidos e alguns eu estou tendo que migrar para se adaptar às alterações do ExtJS4 e à nova estrutura de classes.

Um plugin importante que ainda não da pra fazer nativamente é o lance de máscaras, o Ux.InputTextMask. Como sei que muita gente usa, entao segue ele ae.

/**
 * InputTextMask script used for mask/regexp operations.
 * Mask Individual Character Usage:
 * 9 - designates only numeric values
 * L - designates only uppercase letter values
 * l - designates only lowercase letter values
 * A - designates only alphanumeric values
 * X - denotes that a custom client script regular expression is specified</li>
 * All other characters are assumed to be "special" characters used to mask the input component.
 * Example 1:
 * (999)999-9999 only numeric values can be entered where the the character
 * position value is 9. Parenthesis and dash are non-editable/mask characters.
 * Example 2:
 * 99L-ll-X[^A-C]X only numeric values for the first two characters,
 * uppercase values for the third character, lowercase letters for the
 * fifth/sixth characters, and the last character X[^A-C]X together counts
 * as the eighth character regular expression that would allow all characters
 * but "A", "B", and "C". Dashes outside the regular expression are non-editable/mask characters.
 * @constructor
 * @param (String) mask The InputTextMask
 * @param (boolean) clearWhenInvalid True to clear the mask when the field blurs and the text is invalid. Optional, default is true.
 */

Ext.define('Ux.InputTextMask', {
   constructor: function(mask, clearWhenInvalid) {
      if(clearWhenInvalid === undefined)
         this.clearWhenInvalid = true;
      else
         this.clearWhenInvalid = clearWhenInvalid;
      this.rawMask = mask;
      this.viewMask = '';
      this.maskArray = new Array();
      var mai = 0;
      var regexp = '';
      for(var i=0; i<mask.length; i++){
         if(regexp){
            if(regexp == 'X'){
               regexp = '';
            }
            if(mask.charAt(i) == 'X'){
               this.maskArray[mai] = regexp;
               mai++;
               regexp = '';
            } else {
               regexp += mask.charAt(i);
            }
         } else if(mask.charAt(i) == 'X'){
            regexp += 'X';
            this.viewMask += '_';
         } else if(mask.charAt(i) == '9' || mask.charAt(i) == 'L' || mask.charAt(i) == 'l' || mask.charAt(i) == 'A') {
            this.viewMask += '_';
            this.maskArray[mai] = mask.charAt(i);
            mai++;
         } else {
            this.viewMask += mask.charAt(i);
            this.maskArray[mai] = RegExp.escape(mask.charAt(i));
            mai++;
         }
      }

      this.specialChars = this.viewMask.replace(/(L|l|9|A|_|X)/g,'');
      return this;
   },

   init: function(field) {
      this.field = field;

      if (field.rendered){
         this.assignEl();
      } else {
         field.on('render', this.assignEl, this);
      }

      field.on('blur',this.removeValueWhenInvalid, this);
      field.on('focus',this.processMaskFocus, this);
   },

   assignEl: function() {
      this.inputTextElement = this.field.inputEl.dom;
      this.field.inputEl.on('keypress', this.processKeyPress, this);
      this.field.inputEl.on('keydown', this.processKeyDown, this);
      if(Ext.isSafari || Ext.isIE){
         this.field.inputEl.on('paste',this.startTask,this);
         this.field.inputEl.on('cut',this.startTask,this);
      }
      if(Ext.isGecko || Ext.isOpera){
         this.field.inputEl.on('mousedown',this.setPreviousValue,this);
      }
      if(Ext.isGecko){
        this.field.inputEl.on('input',this.onInput,this);
      }
      if(Ext.isOpera){
        this.field.inputEl.on('input',this.onInputOpera,this);
      }
   },
   onInput: function(){
      this.startTask(false);
   },
   onInputOpera: function(){
      if(!this.prevValueOpera){
         this.startTask(false);
      }else{
         this.manageBackspaceAndDeleteOpera();
      }
   },

   manageBackspaceAndDeleteOpera: function(){
      this.inputTextElement.value=this.prevValueOpera.cursorPos.previousValue;
      this.manageTheText(this.prevValueOpera.keycode,this.prevValueOpera.cursorPos);
      this.prevValueOpera=null;
   },

   setPreviousValue: function(event){
      this.oldCursorPos=this.getCursorPosition();
   },

   getValidatedKey: function(keycode, cursorPosition) {
      var maskKey = this.maskArray[cursorPosition.start];
      if(maskKey == '9'){
         return keycode.pressedKey.match(/[0-9]/);
      } else if(maskKey == 'L'){
         return (keycode.pressedKey.match(/[A-Za-z]/))? keycode.pressedKey.toUpperCase(): null;
      } else if(maskKey == 'l'){
         return (keycode.pressedKey.match(/[A-Za-z]/))? keycode.pressedKey.toLowerCase(): null;
      } else if(maskKey == 'A'){
         return keycode.pressedKey.match(/[A-Za-z0-9]/);
      } else if(maskKey){
         return (keycode.pressedKey.match(new RegExp(maskKey)));
      }
      return(null);
   },

   removeValueWhenInvalid: function() {
      if(this.clearWhenInvalid && this.inputTextElement.value.indexOf('_') > -1){
         this.inputTextElement.value = '';
      }
   },

   managePaste: function() {
      if(this.oldCursorPos==null){
        return;
      }
      var valuePasted=this.inputTextElement.value.substring(this.oldCursorPos.start,this.inputTextElement.value.length-(this.oldCursorPos.previousValue.length-this.oldCursorPos.end));
      if(this.oldCursorPos.start<this.oldCursorPos.end){
         this.oldCursorPos.previousValue =
            this.oldCursorPos.previousValue.substring(0,this.oldCursorPos.start)+
            this.viewMask.substring(this.oldCursorPos.start,this.oldCursorPos.end)+
            this.oldCursorPos.previousValue.substring(this.oldCursorPos.end,this.oldCursorPos.previousValue.length);
         valuePasted=valuePasted.substr(0,this.oldCursorPos.end-this.oldCursorPos.start);
      }
      this.inputTextElement.value=this.oldCursorPos.previousValue;
      keycode = {
         unicode: '',
         isShiftPressed: false,
         isTab: false,
         isBackspace: false,
         isLeftOrRightArrow: false,
         isDelete: false,
         pressedKey: ''
      }
      var charOk=false;
      for(var i=0;i<valuePasted.length;i++){
         keycode.pressedKey=valuePasted.substr(i,1);
         keycode.unicode=valuePasted.charCodeAt(i);
         this.oldCursorPos=this.skipMaskCharacters(keycode,this.oldCursorPos);
         if(this.oldCursorPos===false){
            break;
         }
         if(this.injectValue(keycode,this.oldCursorPos)){
            charOk=true;
            this.moveCursorToPosition(keycode, this.oldCursorPos);
            this.oldCursorPos.previousValue=this.inputTextElement.value;
            this.oldCursorPos.start=this.oldCursorPos.start+1;
         }
      }
      if(!charOk && this.oldCursorPos!==false){
         this.moveCursorToPosition(null, this.oldCursorPos);
      }
      this.oldCursorPos=null;
   },

   processKeyDown: function(e){
      this.processMaskFormatting(e,'keydown');
   },

   processKeyPress: function(e){
      this.processMaskFormatting(e,'keypress');
   },

   startTask: function(setOldCursor){
      if(this.task==undefined){
         this.task=new Ext.util.DelayedTask(this.managePaste,this);
     }
      if(setOldCursor!== false){
         this.oldCursorPos=this.getCursorPosition();
     }
     this.task.delay(0);
   },

   skipMaskCharacters: function(keycode, cursorPos){
      if(cursorPos.start!=cursorPos.end && (keycode.isDelete || keycode.isBackspace))
         return(cursorPos);
      while(this.specialChars.match(RegExp.escape(this.viewMask.charAt(((keycode.isBackspace)? cursorPos.start-1: cursorPos.start))))){
         if(keycode.isBackspace) {
            cursorPos.dec();
         } else {
            cursorPos.inc();
         }
         if(cursorPos.start >= cursorPos.previousValue.length || cursorPos.start < 0){
            return false;
         }
      }
      return(cursorPos);
   },

   isManagedByKeyDown: function(keycode){
      if(keycode.isDelete || keycode.isBackspace){
         return(true);
      }
      return(false);
   },

   processMaskFormatting: function(e, type) {
      this.oldCursorPos=null;
      var cursorPos = this.getCursorPosition();
      var keycode = this.getKeyCode(e, type);
      if(keycode.unicode==0){//?? sometimes on Safari
         return;
      }
      if((keycode.unicode==67 || keycode.unicode==99) && e.ctrlKey){//Ctrl+c, let's the browser manage it!
         return;
      }
      if((keycode.unicode==88 || keycode.unicode==120) && e.ctrlKey){//Ctrl+x, manage paste
         this.startTask();
         return;
      }
      if((keycode.unicode==86 || keycode.unicode==118) && e.ctrlKey){//Ctrl+v, manage paste....
         this.startTask();
         return;
      }
      if((keycode.isBackspace || keycode.isDelete) && Ext.isOpera){
        this.prevValueOpera={cursorPos: cursorPos, keycode: keycode};
        return;
      }
      if(type=='keydown' && !this.isManagedByKeyDown(keycode)){
         return true;
      }
      if(type=='keypress' && this.isManagedByKeyDown(keycode)){
         return true;
      }
      if(this.handleEventBubble(e, keycode, type)){
         return true;
      }
      return(this.manageTheText(keycode, cursorPos));
   },

   manageTheText: function(keycode, cursorPos){
      if(this.inputTextElement.value.length === 0){
         this.inputTextElement.value = this.viewMask;
      }
      cursorPos=this.skipMaskCharacters(keycode, cursorPos);
      if(cursorPos===false){
         return false;
      }
      if(this.injectValue(keycode, cursorPos)){
         this.moveCursorToPosition(keycode, cursorPos);
      }
      return(false);
   },

   processMaskFocus: function(){
      if(this.inputTextElement.value.length == 0){
         var cursorPos = this.getCursorPosition();
         this.inputTextElement.value = this.viewMask;
         this.moveCursorToPosition(null, cursorPos);
      }
   },

   isManagedByBrowser: function(keyEvent, keycode, type){
      if(((type=='keypress' && keyEvent.charCode===0) ||
         type=='keydown') && (keycode.unicode==Ext.EventObject.TAB ||
         keycode.unicode==Ext.EventObject.RETURN ||
         keycode.unicode==Ext.EventObject.ENTER ||
         keycode.unicode==Ext.EventObject.SHIFT ||
         keycode.unicode==Ext.EventObject.CONTROL ||
         keycode.unicode==Ext.EventObject.ESC ||
         keycode.unicode==Ext.EventObject.PAGEUP ||
         keycode.unicode==Ext.EventObject.PAGEDOWN ||
         keycode.unicode==Ext.EventObject.END ||
         keycode.unicode==Ext.EventObject.HOME ||
         keycode.unicode==Ext.EventObject.LEFT ||
         keycode.unicode==Ext.EventObject.UP ||
         keycode.unicode==Ext.EventObject.RIGHT ||
         keycode.unicode==Ext.EventObject.DOWN)){
            return(true);
      }
      return(false);
   },

   handleEventBubble: function(keyEvent, keycode, type) {
      try {
         if(keycode && this.isManagedByBrowser(keyEvent, keycode, type)){
            return true;
         }
         keyEvent.stopEvent();
         return false;
      } catch(e) {
         alert(e.message);
      }
   },

   getCursorPosition: function() {
      var s, e, r;
      if(this.inputTextElement.createTextRange){
         r = document.selection.createRange().duplicate();
         r.moveEnd('character', this.inputTextElement.value.length);
         if(r.text === ''){
            s = this.inputTextElement.value.length;
         } else {
            s = this.inputTextElement.value.lastIndexOf(r.text);
         }
         r = document.selection.createRange().duplicate();
         r.moveStart('character', -this.inputTextElement.value.length);
         e = r.text.length;
      } else {
         s = this.inputTextElement.selectionStart;
         e = this.inputTextElement.selectionEnd;
      }
      return this.CursorPosition(s, e, r, this.inputTextElement.value);
   },

   moveCursorToPosition: function(keycode, cursorPosition) {
      var p = (!keycode || (keycode && keycode.isBackspace ))? cursorPosition.start: cursorPosition.start + 1;
      if(this.inputTextElement.createTextRange){
         cursorPosition.range.move('character', p);
         cursorPosition.range.select();
      } else {
         this.inputTextElement.selectionStart = p;
         this.inputTextElement.selectionEnd = p;
      }
   },

   injectValue: function(keycode, cursorPosition) {
      if (!keycode.isDelete && keycode.unicode == cursorPosition.previousValue.charCodeAt(cursorPosition.start))
         return true;
      var key;
      if(!keycode.isDelete && !keycode.isBackspace){
         key=this.getValidatedKey(keycode, cursorPosition);
      } else {
         if(cursorPosition.start == cursorPosition.end){
            key='_';
            if(keycode.isBackspace){
               cursorPosition.dec();
            }
         } else {
            key=this.viewMask.substring(cursorPosition.start,cursorPosition.end);
         }
      }
      if(key){
         this.inputTextElement.value = cursorPosition.previousValue.substring(0,cursorPosition.start)
            + key +
            cursorPosition.previousValue.substring(cursorPosition.start + key.length,cursorPosition.previousValue.length);
         return true;
      }
      return false;
   },

   getKeyCode: function(onKeyDownEvent, type) {
      var keycode = {};
      keycode.unicode = onKeyDownEvent.getKey();
      keycode.isShiftPressed = onKeyDownEvent.shiftKey;

      keycode.isDelete = ((onKeyDownEvent.getKey() == Ext.EventObject.DELETE && type=='keydown') || ( type=='keypress' && onKeyDownEvent.charCode===0 && onKeyDownEvent.keyCode == Ext.EventObject.DELETE))? true: false;
      keycode.isTab = (onKeyDownEvent.getKey() == Ext.EventObject.TAB)? true: false;
      keycode.isBackspace = (onKeyDownEvent.getKey() == Ext.EventObject.BACKSPACE)? true: false;
      keycode.isLeftOrRightArrow = (onKeyDownEvent.getKey() == Ext.EventObject.LEFT || onKeyDownEvent.getKey() == Ext.EventObject.RIGHT)? true: false;
      keycode.pressedKey = String.fromCharCode(keycode.unicode);
      return(keycode);
   },

   CursorPosition: function(start, end, range, previousValue) {
      var cursorPosition = {};
      cursorPosition.start = isNaN(start)? 0: start;
      cursorPosition.end = isNaN(end)? 0: end;
      cursorPosition.range = range;
      cursorPosition.previousValue = previousValue;
      cursorPosition.inc = function(){cursorPosition.start++;cursorPosition.end++;};
      cursorPosition.dec = function(){cursorPosition.start--;cursorPosition.end--;};
      return(cursorPosition);
   }
});

Ext.applyIf(RegExp, {
   escape: function(str) {
      return new String(str).replace(/([.*+?^=!:${}()|[\]\/\\])/g, '\\$1');
   }
});


Exemplo de utilização:
Ext.define('App.myForm', {
   extend: 'Ext.form.FormPanel',
   requires: ['Ux.InputTextMask'],

   initComponent : function() {
      Ext.apply(this, {
         items: this.buildForm()
      });

      App.myForm.superclass.initComponent.call(this);
   },

   buildForm: function() {
      return [
         { fieldLabel: 'Telefone', name: 'telefone', allowBlank: false, xtype: 'textfield', plugins: [new Ux.InputTextMask('(99) 9999-9999')] },
         { fieldLabel: 'Celular', name: 'celular', allowBlank: false, xtype: 'textfield', plugins: [new Ux.InputTextMask('(99) 9999-9999')] }
      ];
   }
});


#2 Fabio Jr. Policeno

Fabio Jr. Policeno

    Member Avançado

  • Expert User
  • 2933 posts
  • LocationCuritiba - PR

Postado 04 April 2011 - 16:11

Muito bom Nom4d3, parabéns por inaugurar o tópico Exemplos Ext JS 4.x.

Com certeza será muito útil, até para um exemplo simples de formulário, com requires, etc. Muito bom mesmo!
Produtos/Serviços Ext JS
Porque dEle, por Ele, para Ele são todas as coisas

#3 Legolas

Legolas

    Ext JS - Admin

  • Administrators
  • 3496 posts
  • LocationBelo Horizonte

Postado 04 April 2011 - 16:35

Muito bom meu caro este plugin é o que eu mais utilizo nos meus projetos, foi uma boa add.
Parabéns.

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


#4 Daybson

Daybson

    Novato

  • Membros
  • PipPip
  • 19 posts
  • LocationFortaleza/CE

Postado 05 March 2012 - 11:11

Finalmente consegui um plugin que funcionasse para mascarás, muito bom mesmo e bem fácil a utilização. ;D

#5 Maicon Schelter

Maicon Schelter

    Member Avançado

  • Membros
  • PipPipPip
  • 111 posts
  • LocationBlumenau - SC

Postado 14 March 2012 - 13:03

Muito bom.
Maicon Schelter
Analista de Sistemas

Twitter - SoundCloud

#6 Márlon

Márlon

    Member Avançado

  • Membros
  • PipPipPip
  • 31 posts
  • LocationRio de Janeiro

Postado 11 July 2012 - 14:01

Plugin perfeito!

Excelente trabalho @Nom4d3!
Até aqui nos ajudou o Senhor.

#7 rccintra

rccintra

    Member Avançado

  • Membros
  • PipPipPip
  • 431 posts

Postado 30 August 2012 - 14:57

Boa Tarde,

Como faço para trabalhar com esse plugin ?


Abraços!

#8 rccintra

rccintra

    Member Avançado

  • Membros
  • PipPipPip
  • 431 posts

Postado 06 September 2012 - 10:02

Bom Dia,

Alguém?? alguma idéia?


Abraços,
Rafael

#9 Legolas

Legolas

    Ext JS - Admin

  • Administrators
  • 3496 posts
  • LocationBelo Horizonte

Postado 10 September 2012 - 10:34

rccintra, é basicamente como o @Nom4d3 demonstrou no início deste só q vc tem q ter o arquivo da UX em seus scripts para q funcione, existe também outro plugin TextMask feito pelo @Rodrigo Kptão Nascimento que também utilizo bastante.
Espero q 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)


#10 rccintra

rccintra

    Member Avançado

  • Membros
  • PipPipPip
  • 431 posts

Postado 10 September 2012 - 10:43

Bom Dia,

O que gostaria de saber no caso desses plugins é que para utilizar o mesmo em varios forms, grids, etc da minha aplicação, eu vou criar um arquivo separado ? (de que tipo controller, view,...)

E utilizando essas mascaras como o valor será salvo no banco de dados? Com mascara?


Abraços !



#11 Legolas

Legolas

    Ext JS - Admin

  • Administrators
  • 3496 posts
  • LocationBelo Horizonte

Postado 10 September 2012 - 13:21

Bom Dia,

O que gostaria de saber no caso desses plugins é que para utilizar o mesmo em varios forms, grids, etc da minha aplicação, eu vou criar um arquivo separado ? (de que tipo controller, view,...)

E utilizando essas mascaras como o valor será salvo no banco de dados? Com mascara?

rccintra, o conceito seria de plugin mesmo, assim vc teria um só arquivo do Plugin em alguma pasta (talvez a de UX da sua aplicação) e nos campos ou colunas vc iria mencionar a classe do plugin. Veja o código do exemplo do @Rodrigo, pois lá ele carrega o arquivo e qdo tem algum campo q necessite deste plugin ele só menciona.
Seria isso mesmo a sua dúvida?

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


#12 rccintra

rccintra

    Member Avançado

  • Membros
  • PipPipPip
  • 431 posts

Postado 10 September 2012 - 13:44

Sim blz vou testar...

Obrigado,
Rafael

#13 Legolas

Legolas

    Ext JS - Admin

  • Administrators
  • 3496 posts
  • LocationBelo Horizonte

Postado 10 September 2012 - 14:00

Sim blz vou testar...

Obrigado,
Rafael

Por nda precisando é só postar.

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


#14 Siepi

Siepi

    Member Avançado

  • Membros
  • PipPipPip
  • 95 posts

Postado 10 September 2012 - 23:10

Fino demais! Obrigado por compartilhar.
E, quando o viram, o adoraram; mas alguns duvidaram. Mt28.16

#15 guns87

guns87

    Member Avançado

  • Membros
  • PipPipPip
  • 121 posts

Postado 14 September 2012 - 10:14

rccintra, é basicamente como o @Nom4d3 demonstrou no início deste só q vc tem q ter o arquivo da UX em seus scripts para q funcione, existe também outro plugin TextMask feito pelo @Rodrigo Kptão Nascimento que também utilizo bastante.
Espero q lhe ajude.


Legolas sabe como que eu faço para não passar a mascara do TextMask para o banco de dados e tem como aplicar esta mascara na coluna do grid?

#16 Legolas

Legolas

    Ext JS - Admin

  • Administrators
  • 3496 posts
  • LocationBelo Horizonte

Postado 14 September 2012 - 13:38

Legolas sabe como que eu faço para não passar a mascara do TextMask para o banco de dados e tem como aplicar esta mascara na coluna do grid?

guns87, para resgatar o valor sem a máscara vc pode utilizar o método "getValueWithoutMask()" do plugin.
seuCampoComMascara.getValueWithoutMask();
Sobre utilizar a mascara nas colunas esse mesmo exemplo tem um Grid com a mascara aplicada.

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


#17 guns87

guns87

    Member Avançado

  • Membros
  • PipPipPip
  • 121 posts

Postado 14 September 2012 - 13:50

Legolas sabe como que eu faço para não passar a mascara do TextMask para o banco de dados e tem como aplicar esta mascara na coluna do grid?
guns87, para resgatar o valor sem a máscara vc pode utilizar o método "getValueWithoutMask()" do plugin.


Mas como trabalho em MVC ele já manda o record que vem do form tem como tratar isso no forma para que quando for pegar o dado já venha sem mascara?

#18 guns87

guns87

    Member Avançado

  • Membros
  • PipPipPip
  • 121 posts

Postado 14 September 2012 - 14:58

Legolas sabe como que eu faço para não passar a mascara do TextMask para o banco de dados e tem como aplicar esta mascara na coluna do grid?
guns87, para resgatar o valor sem a máscara vc pode utilizar o método "getValueWithoutMask()" do plugin.


Mas como trabalho em MVC ele já manda o record que vem do form tem como tratar isso no forma para que quando for pegar o dado já venha sem mascara?


resolvio problema da mascara no php fazendo um replace antes de mandar a
salvar.

mas o grid os exemplos que tem ali é telefone e cep para valores reais não funciona fica desconfigurado. tipo 5,00 reais fica 5.___.___.___,00

#19 Legolas

Legolas

    Ext JS - Admin

  • Administrators
  • 3496 posts
  • LocationBelo Horizonte

Postado 15 September 2012 - 20:53

resolvio problema da mascara no php fazendo um replace antes de mandar a salvar.

mas o grid os exemplos que tem ali é telefone e cep para valores reais não funciona fica desconfigurado. tipo 5,00 reais fica 5.___.___.___,00

guns87, tem como utilizar sim, porém field da sua Store deve ser do tipo float, pois o plugin do @Rodrigo Kptão Nascimento espera isso. Veja o exemplo abaixo de como pode ser feito:
Ext.Loader.setConfig({
     enabled: true
    ,paths  : {
        'Ext.ux' : '../ux'
    }
});

Ext.require(['Ext.ux.TextMaskPlugin'])

Ext.onReady(function() {
    Ext.define('Product', {
         extend: 'Ext.data.Model'
        ,fields: [
            { name: 'cod', type: 'string' }
           ,{ name: 'name', type: 'string' }
           ,{ name: 'price', type: 'float' } // TIPO DO FIELD
        ]
    });

    // create the data store
    var store = Ext.create('Ext.data.Store', {
        model: 'Product',
        data: [
             { cod: 'PRD-001', name: 'Computador', price: '71.72' }
            ,{ cod: 'PRD-002', name: 'Notebook', price: '102.80' }
            ,{ cod: 'PRD-003', name: 'Mochila para Notebook', price: '55.99' }
        ]
    });

    // create the Grid
    var grid = Ext.create('Ext.grid.Panel', {
         height: 120
        ,width: 490
        ,title: 'Mascara em Grid com TextMaskPlugin'
        ,renderTo: Ext.getBody()
        ,store: store
        ,columns: [{
             text: 'Código'
            ,width: 80
            ,dataIndex: 'cod'
        }, {
             text: 'Produto'
            ,flex: 1
            ,dataIndex: 'name'
        }, {
             text: 'Valor com mascara'
            ,dataIndex: 'price'
            ,renderer: Ext.util.Format.maskRenderer('R$ #9.999,00', true) // INFORMANDO O MÉTODO PARA RENDERIZAR O DADO
        }]
    });
});
Note o renderer da coluna, pois estou chamando o método passando a mascara e informando que está é do tipo moeda. Assim tendo o resultado da imagem que segue. Espero que 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)


#20 cassio.augusto

cassio.augusto

    Iniciante

  • Membros
  • Pip
  • 5 posts
  • LocationBelo Horizonte

Postado 02 May 2014 - 10:32

Aplausos para você nomade!

Precisei do plugin na migração do 3 para o 4 e deu tudo certo.

Obrigado pela ajuda!




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

0 membros, 0 visitantes, 0 membros anônimos