Override Store: Função de validação de dados nos campos

Este override permite criar funções de validação para os Fields dos Stores, principalmente para validar Grids editáveis onde o usuário tem a liberdade de inserir dados.

História:

Bom, pra variar tive essa necessidade ao desenvolver uma tela onde havia um Grid editável, era uma tela de contas a pagar e de acordo com meu cliente o usuário deveria ser obrigado a informar 2 campos, “data de pagamento” e “pago”, onde um era um campo de data e outro uma coluna CheckBox, se a “data de pagamento” fosse informada o usuário deveria marcar a coluna “pago” e se a coluna “pago” estivesse marcada o usuário deveria informar a “data de pagamento”.

Assim resolvi criar uma forma de validar os dados diretamente no Store e que funcionasse de forma parecida a validação de campos no formulário de forma que o programador pudesse informar uma função de validação para cada campo ou passar o nome de uma função de validação interna.

Detalhes:

Juntamente aos demais parâmetros que passamos para cada campo no Store podemos passar o seguinte parâmetro:

• validator{Function/String}: Função de validação podendo ser uma função criada pelo programador ou uma string indicando o nome de uma função interna, as funções internas são:
  • notblank: O campo é considerado inválido caso seja igual a (”, null ou undefined).

Novo método no Store:

• validator: este novo método executa a validação de cada registro do Store passando por todos os campos e retorna true caso todos estejam válidos, se algum campo estiver inválido a verificação é interrompida neste primeiro erro e é retornado um objeto contendo o registro (Record) e o campo (Field) do erro.
  • Parâmetros:
    • Nenhum.
  • Retorno:
    • Object
      • record: registro do erro;
      • field: campo do erro.

Override:

Ext.override(Ext.data.Store, {
	validateFn: {
		notblank: function(v){
			return v !== null && v !== '' && v !== undefined;
		}
	},
	validate: function(){
		var r = true;
		var result = null;
		Ext.each(this.fields.items, function(i){
			if(typeof i.validator == 'string'){
				i.validator = this.validateFn[i.validator];
			}
			if(typeof i.validator == 'function'){
				Ext.each(this.data.items, function(d){
					r = i.validator(d.get(i.name), d);
					result = {record: d, field: i};
					return r;
				},this)
				return r;
			}
		},this)
		return r || result;
	}
})

Exemplo:

Ext.onReady(function(){
	var win = new Ext.Window({
		height: 240,
		width: 620,
		layout: 'fit',
		title: 'Override Store - Função de validação de dados nos campos',
		items:[{
			xtype: 'editorgrid',
			id: 'gridExemplo',
			store: new Ext.data.JsonStore({
				fields:[
					{
						name: 'nome'
					},{
						name: 'sobrenome',
						displayName: 'Sobrenome',
						validator: 'notblank'
					}
				],
				data: [
					{nome: 'Rodrigo', sobrenome:'Nascimento'},
					{nome: 'Vera'   , sobrenome:'Elizabete'},
					{nome: 'Jéssica', sobrenome:'Fischer'},
					{nome: 'Tiago'  , sobrenome:''}
				]
			}),
			columns:[
				{
					header: 'Nome',
					width: 450,
					sortable: true,
					dataIndex: 'nome'
				},{
					header: 'Sobrenome',
					width: 130,
					sortable: true,
					dataIndex: 'sobrenome',
					editor: new Ext.form.TextField()
				}
			]
		}],
		buttons:[{
			text: 'Salvar',
			handler: function(){
				var r = Ext.getCmp('gridExemplo').getStore().validate();
				if(r === true){
					Ext.Msg.alert('Exemplo','Enviando dados...');
				}else{
					Ext.Msg.alert('Exemplo','Dados incorretos na coluna '+r.field.displayName);
				}
			}
		},{
			text: 'Cancelar',
			handler: function(){
				win.close();
			}
		}]
	})
	win.show();
})

Exemplo Onlie

• 06/12/2009 -- Campos Calculados: Criando campos de dados em tempo de execução [ExtJS 3.0.X] (0)
• 27/11/2009 -- Ext.ux.StoreGroup – Carregando Dependências (0)
• 08/01/2010 -- Override GridPanel/ColumnModel: Colunas Checkbox (0)
• 25/11/2009 -- Form Override: Criando colunas facilmente [ExtJS 3.0.X] (0)
• 21/12/2010 -- Novidades, mudanças e um novo ano (0)
• 23/03/2010 -- ScreenCast – Instalando o ExtJS (0)
• 17/02/2010 -- Criando um CRUD usando um GRID e um FORM em 3 Partes (0)
• 16/02/2010 -- Comparação de frameworks JavaScript (0)
• 12/02/2010 -- Gadget do fórum Brasileiro de ExtJS para Win Vista/7 (0)
• 10/02/2010 -- Temas bem coloridos pra ExtJS (0)