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:
[code lang="js" firstline="1" toolbar="true" collapse="false" wraplines="false"]
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
}]
});
});
[/code]
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!