ExtJS 4: Validação CPF / CNPJ de Acordo com Opção Selecionada
Tempos atrás postei um post sobre duas extensões de campos de forms do ExtJS 4 para CPF e CNPJ já com validação. Só que reparei que uma dúvida comum que as pessoas tem é como ter apenas um campo (CPF ou CNPJ) e deixar que o usuário escolha qual campo usar. E ainda assim, fazer com que as validações funcionem.
Bem, por este motivo criei um exemplo. Fique á vontade para usar no seu projeto ou fazer melhorias! 
O exemplo já utiliza o ComponentQuery e não utiliza o Ext.getCmp (arg!). Tentei seguir as melhores práticas para este exemplo!
O exemplo funciona assim:
CPF selecionado:
CNPJ selecionado:
Vamos ao código então!
Código:
Ext.Loader.setConfig({enabled: true});
Ext.require([
'Ux.CpfField',
'Ux.CnpjField'
]);
Ext.onReady(function() {
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
title: 'Exemplo Campos CPF e CNPJ',
width: 250,
bodyPadding: 5,
fieldDefaults: {
labelAlign: 'left',
labelWidth: 50,
anchor: '100%',
msgTarget: 'under'
},
defaultType: 'textfield',
items: [
{
xtype : 'radiogroup',
fieldLabel : 'Tipo de Pessoa',
columns: 2,
items: [
{
boxLabel : 'Física',
name : 'tipoPessoa',
inputValue: 'cpf',
checked : true
}, {
boxLabel : 'Jurídica',
name : 'tipoPessoa',
inputValue: 'cnpj'
}
],
onChange: function(field){
var novoValor = field.tipoPessoa;
if (!Ext.isArray(novoValor)) {
if (novoValor == 'cpf') {
var cpf = Ext.ComponentQuery.query('cpffield')[0];
var cnpj = Ext.ComponentQuery.query('cnpjfield')[0];
cpf.setVisible(true);
cnpj.setVisible(false);
} else {
var cpf = Ext.ComponentQuery.query('cpffield')[0];
var cnpj = Ext.ComponentQuery.query('cnpjfield')[0];
cpf.setVisible(false);
cnpj.setVisible(true);
}
}
}
},
{
fieldLabel: 'CPF',
name: 'cpf',
xtype: 'cpffield',
hidden: false
},{
fieldLabel: 'CNPJ',
name: 'cpnj',
xtype: 'cnpjfield',
hidden: true
}]
});
});
Download do código fonte:
Você pode fazer o download do código fonte completo no meu repositório do github: https://github.com/loiane/extjs4-validacao-cpf-cnpj
Demo:
Quer ver esse exemplo funcionando? Clique no link: http://www.loiane.com/extjs/extjs4-validacao-cpf-cnpj/
Até a próxima!
Oi, Loiane, legal o post! Mas tentei usar o seu link (http://www.loiane.com/extjs/extjs4-validacao-cpf-cnpj/) pra testar um cnpj e não consegui.
Oi Daniel,
Infelizmente não desenvolvi o plugin, tem que reportar o erro na thread do fórum do extjs para acertarem o problema!
[]s
Muito bem Loiane, ficou legal, se você permite uma mudança de um iniciante como eu ai vai:
Eu não criaria as variáveis cpf e cnpj nas linhas 43,44 e 48,49 eu colocaria direto
Ext.ComponentQuery.query(‘cpffield’)[0].setVisible(true);
Ext.ComponentQuery.query(‘cnpjfield’)[0].setVisible(false);
Para quem desejar desenvolver plugin validador de cpf e cnpj os links abaixo ajudam muito:
http://imasters.com.br/artigo/2410/javascript/algoritmo_do_cpf/
http://imasters.com.br/artigo/2451
Opa Heberval,
Vlw pelas dicas e pelas mudanças!
[]‘s
Não é melhor criar um ‘vtype’ e trocá-lo dinamicamente dependendo do valor do campo ‘tipoPessoa’?
Isso mataria boa parte da lógica e tornaria o esse ‘vtype’ reaproveitável para outros projetos.
Acabei de ver o código fonte dos campos ‘cpf’ e ‘cnpj’, e eles já contém os vtypes para suas respectivas validações. Achei interessante, mas dificulta o uso desses vtypes em outros tipos de campo.
Oi Eduardo,
Usei uma extensão do textfield para cpf e cnpj que já vem com validação, por isso o vtype é específico para esses casos…
E complementando o seu comentário anterior, não dá pra mudar o vtype dinamicamente no ExtJS. É uma configuração required e não pode mudar; uma vez que o campo recebe um vtype, ele vai ficar por todo o ciclo do component com essa configuração – por isso que nesse exemplo criei 2 campos e usei as propriedades de hidden para mostrar/esconder, de acordo com a opção escolhida.
[]‘s
Acho que nesse caso seria mais facil modificar a extensão pra suportar ambas.
Unica alteração q fiz foi:
listeners: {
change: function (field, newValue, oldValue, eOpts) {
var novoValor = newValue;
var cpf = field.up(‘form’).getForm().findField(‘cpffield’);
var cnpj = field.up(‘form’).getForm().findField(‘cnpjfield’);
if (novoValor == ‘F’) {
cpf.setVisible(true);
cnpj.setVisible(false);
} else {
cpf.setVisible(false);
cnpj.setVisible(true);
}
}
}