Ir para conteúdo


Foto

Mascara no form. [RESOLVIDO]


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

#1 Rodrigo, Kptão Nascimento

Rodrigo, Kptão Nascimento

    Member Avançado

  • Expert User
  • 2472 posts
  • LocationTres Coroas, RS

Postado 10 October 2007 - 14:10

Dae gurizada, blz?

To precisando de uma ajudinha aki...
to fazendo um formulário mas precisava de uma mascara nos campos, tipo de telefone cep, etc.

tem varias por ae, mas se alguem tem alguma mais EXTzada ai seria melhor...

Vlw
Sempre que um tópico for resolvido clique no botão MARCAR COMO RESOLVIDO localizado ao lado do botão RESPONDER.

http://blog.rkn.com.br
http://twitter.com/blogrkn

Atualize seu navegador
http://imasters.uol....br/crossbrowser

#2 Fabyo

Fabyo

    Member Avançado

  • Administrators
  • 678 posts
  • LocationSão Paulo

Postado 10 October 2007 - 15:08

Eu uso Jquery com Ext, entao eu uso um plugin do jquery muito show

http://digitalbush.c...ed-input-plugin

sei que nao é o que vc queria mas da uma olhada nesse plug-in é muito show e pratico de usar

#3 Rodrigo, Kptão Nascimento

Rodrigo, Kptão Nascimento

    Member Avançado

  • Expert User
  • 2472 posts
  • LocationTres Coroas, RS

Postado 10 October 2007 - 15:47

muito bom esse plugin, mas não quero usar jquery no meu projeto, jah fiz todo ele sem a jquery seria sacanagem usar soh por causa de umas mascara, não consigo acreditar q ninguem faz um pra Ext ainda...
hehe

Bom, seguimos na luta
vlw
Sempre que um tópico for resolvido clique no botão MARCAR COMO RESOLVIDO localizado ao lado do botão RESPONDER.

http://blog.rkn.com.br
http://twitter.com/blogrkn

Atualize seu navegador
http://imasters.uol....br/crossbrowser

#4 ReapeR

ReapeR

    Member Avançado

  • Expert User
  • 854 posts
  • LocationBlumenau - SC

Postado 10 October 2007 - 16:35

Fizeram sim... e foi um brasileiro x))

link: http://extjs.com/for...ead.php?t=10417

#5 Rodrigo, Kptão Nascimento

Rodrigo, Kptão Nascimento

    Member Avançado

  • Expert User
  • 2472 posts
  • LocationTres Coroas, RS

Postado 10 October 2007 - 16:42

Olá ReapeR.

Pois eh, essa eu tava quebrando a cabeça...
funciona perfeitamente... até tem uma melhor basiada nessa...
melhorada pra ser um "componente"

http://www.merkurboy...-MaskFormatter/

mas meu problema fica cabeludo quando eu tenho q dar um setValue no campo...
isso sobreescreve a mascara, e nada mais funciona...

to tentando modificar esse componente ai de cima e criar uma função setValue2 ou algo assim...

toquase lah galera...
vlw
Sempre que um tópico for resolvido clique no botão MARCAR COMO RESOLVIDO localizado ao lado do botão RESPONDER.

http://blog.rkn.com.br
http://twitter.com/blogrkn

Atualize seu navegador
http://imasters.uol....br/crossbrowser

#6 Fabyo

Fabyo

    Member Avançado

  • Administrators
  • 678 posts
  • LocationSão Paulo

Postado 11 October 2007 - 12:22

é eu achei esse link hj da mascara feito com ext e ia postar aqui, mas blz eu tbm na versao ext 2.0 to tentando me livrar do Jquery nao que ele seja ruim é que quero deixar o sistema mais enxuto e rapido, sem precisar usar adaptadores.



#7 Rodrigo, Kptão Nascimento

Rodrigo, Kptão Nascimento

    Member Avançado

  • Expert User
  • 2472 posts
  • LocationTres Coroas, RS

Postado 11 October 2007 - 13:50

bom, fiz umas modificações no MaskFormattedTextField para q seja possivel setar um valor no campo depois de criado sem sobreescrever a macara.
usando um metodo chamado setValueToMask()

ahh, por momento o setValueToMask() só aceita caracteres numéricos, se tua mascara for para caractéres alphanumericos dai temos problemas, assim q tiver um tempinho arrumo e posto novamente.

quem quiser o arquivo tah ae

http://rapidshare.co...xtField.js.html

e um exemplo:

                this.form.column(
{width:145, labelWidth:30, style:'margin-left:5px;'},
new Ext.ux.MaskFormattedTextField({
fieldLabel: 'CEP',
name: 'cep',
width: 85,
allowBlank: true,
blankText: 'Este campo é obrigatório',
mask: "##.###-###",
invalidMessage: "Valor inválido. Ex: 00.000-00"
})
)

              this.form.findField('cep').setValueToMask('95660000');// ou
              this.form.findField('cep').setValueToMask('95.660-000');// tanto faz, ele vai ignorar os caracteres de mascara


Também fiz um para campo data...

http://rapidshare.co...teField.js.html

exemplo:

new Ext.ux.MaskFormattedDateField({
fieldLabel: 'Data de Validade',
name: 'dt_validade',
width: 215,
allowBlank: false,
blankText: 'Este campo é obrigatório',
regex: /^[0-9]{2}\/[0-9]{2}\/[0-9]{4}$/,
regexText: 'Data inválida. Ex: 01/01/2001'
})

this.form.findField('dt_validade').setValue('10/10/2007');


Também precisei de um textField q limitasse a quantidade de digitos...
como o da Ext soh da uma mensagem de q o campo ultrapassou o tamnaho maximo
fiz uma extenção q não deixa q seja digitado mais caracteres além daqueles passados

exemplo:

new Ext.ux.TextField({
fieldLabel: 'Cópias',
name: 'nro_copias',
width: 215,
maxValue: 5,
allowBlank: false,
blankText: 'Este campo é obrigatório',
maskRe:/^[0-9]$/
}),


o campo maxValue é onde tu diz qual o tamanho maximo desse campo.

arquivo: http://rapidshare.co...xtField.js.html


Bom, isso resolve meus problemas, espero q ajude alguém
Sempre que um tópico for resolvido clique no botão MARCAR COMO RESOLVIDO localizado ao lado do botão RESPONDER.

http://blog.rkn.com.br
http://twitter.com/blogrkn

Atualize seu navegador
http://imasters.uol....br/crossbrowser

#8 Fabyo

Fabyo

    Member Avançado

  • Administrators
  • 678 posts
  • LocationSão Paulo

Postado 11 October 2007 - 14:40

Vou testar, mas eu testei o MaskFormattedTextField  original e nao sei se ta certo ou eu fiz alguma coisa errada, mas ele nao funcionou legal

por exemplo eu entro num campo e apago toda mascara com "del" ou "return" dai depois o campo trava nao aceita mais nenhum caracter

[Editado]

Descobri o que era, se eu rodo ele fora de um servidor Web ele da esse pau, mas testei ele em localhost e funcionou perfeito.

sobre o que o Rodrigo falou do maxValue, pra quem nao for usar o plug da mascara pode fazer assim:

Ext.form.TextField.prototype.maskRe2 = null;
	Ext.form.TextField.prototype.filterKeys = function(e,f){
	    var k = e.getKey();
	    if(!Ext.isIE && (e.isNavKeyPress() || k == e.BACKSPACE || (k == e.DELETE && e.button == -1))){
	        return;
	    }
	    var c = e.getCharCode();
	    var s = f.value+String.fromCharCode(c);
	    if(!this.maskRe.test(s || '')){
	        e.stopEvent();
	    }else if(this.maskRe2 && !this.maskRe2.test(s || '')){
	        e.stopEvent();
	    }
	};

e no formulario:

maskRe:/^[a-zA-Z]{0,10}$/,

pra quem nao entende de expressoes regulares essa regra em cima permite letras minusculas e maiusculas e no maximo 10 carateres, dai basta montar a regra de acordo do seu uso



#9 Rodrigo, Kptão Nascimento

Rodrigo, Kptão Nascimento

    Member Avançado

  • Expert User
  • 2472 posts
  • LocationTres Coroas, RS

Postado 11 October 2007 - 15:36

Boa Fabyo...

Mas aquele maxValue não é do plugin da mascara, é outro, apenas com maximo de tamanho.
mas achei legal teu codigo.

mas pra quem quiser usar o plug ali de cima é só adicionar ele na pagina principal e trocar o "form" por "ux" e acrescentar o maxValue.

exemplo:

new Ext.form.TextFiled({
  ...
})
//por
new Ext.ux.TextFiled({
  maxValue:10, 
  ...
})

esse funciona blezinha, só acrescenta essa funcionalidade, mais nada e pesa 1kb.

Tinhamos q criar uma seção de User eXtencions no fórum.

abraços
Sempre que um tópico for resolvido clique no botão MARCAR COMO RESOLVIDO localizado ao lado do botão RESPONDER.

http://blog.rkn.com.br
http://twitter.com/blogrkn

Atualize seu navegador
http://imasters.uol....br/crossbrowser

#10 Fabyo

Fabyo

    Member Avançado

  • Administrators
  • 678 posts
  • LocationSão Paulo

Postado 11 October 2007 - 15:39

Boa ideia vamos criar sim

sobre a mascara ainda, acho que tem uns erros por exemplo se eu faço isso:

mask: "#####-##?", funciona

mas isso: mask: "#####-???", da erro

estranho ne?


#11 Rodrigo, Kptão Nascimento

Rodrigo, Kptão Nascimento

    Member Avançado

  • Expert User
  • 2472 posts
  • LocationTres Coroas, RS

Postado 11 October 2007 - 15:45

é realmente, mas como eu tava meio apertado aki pra terminar fiz funcionar do geito q eu precisava, só com numeros hehehe
mascara com outros wildcards eu não teste, quando der um tempinho dou uma olhada nisso, e faço ela funcionar sem erros, espero hehehe

mas vai relatando os erros aki q ajuda um monte xD

vlw
Sempre que um tópico for resolvido clique no botão MARCAR COMO RESOLVIDO localizado ao lado do botão RESPONDER.

http://blog.rkn.com.br
http://twitter.com/blogrkn

Atualize seu navegador
http://imasters.uol....br/crossbrowser

#12 ReapeR

ReapeR

    Member Avançado

  • Expert User
  • 854 posts
  • LocationBlumenau - SC

Postado 12 October 2007 - 11:24

Também precisei de um textField q limitasse a quantidade de digitos...
como o da Ext soh da uma mensagem de q o campo ultrapassou o tamnaho maximo
fiz uma extenção q não deixa q seja digitado mais caracteres além daqueles passados


Em um form, eu tive q setar o limite dos campos também, mas resolvi fácil mudando o autoCreate do campo.

autoCreate: {tag: "input", type: "text", autocomplete: "on", maxLength: 25},


#13 EthraZa

EthraZa

    Member Avançado

  • Expert User
  • 542 posts
  • LocationSão Paulo

Postado 13 October 2007 - 15:39

Pra dar uma controlada no campo de Data, tb da pra usar essa opção:
maskRe : /[\d\/]/ // only allow numbers and '/'

Mandriva Linux in LAMPE (Linux/Apache/MySql/Php/Ext)

#14 lc.brito

lc.brito

    Member Avançado

  • Membros
  • PipPipPip
  • 47 posts

Postado 03 August 2014 - 00:12

Pra quem estiver procurando algo sobre no Ext 4 tem uma config que usei aí abaixo resolveu:

enforceMaxLength: true, //Para forçar o campo travar no tamanho máximo senão ele só da a mensagem de validação, o default é false
maxLength: 5 //No meu contexto 





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

0 membros, 1 visitantes, 0 membros anônimos