Cadastro básico com grid e formulário

Ontem fui questionado sobre um exemplo que demonstrasse uma tela de cadastro básico, com a listagem de registros de um lado e o formulário do outro. Como dito, é uma interface para cadastros simples, aonde você visualiza os registros gravados numa listagem, e ao clicar em algum registro seus dados são carregados para alteração. Uma vez alterados, os dados são submitados, e o grid é recarregado. O Ext possui esse exemplo, mas o que difere é que o meu utiliza orientação a objetos e possui a opção de salvar os dados.

Classe Base

Não será nem um formulário que irá conter um grid, nem um grid contendo um formulário. Será um painel com os dois itens dentro. Esse painel além de organizar o layout, irá realizar a regra de negócio que existe entre o grid e o formulário.

GridForm = Ext.extend(Ext.Panel,{

	//Config Options {

		 title			: 'Usuários'
		,iconCls		: 'silk-user'
		,layout			: 'hbox'
		,layoutConfig	: {align: 'stretch'}

	//}

	//Inits {

		,initComponent: function()
		{
			//..aqui será criado o grid e o form 

			GridForm.superclass.initComponent.call(this);
		}

		,initEvents: function()
		{
			GridForm.superclass.initEvents.call(this);

			//aqui definiremos alguns eventos
		}

	//}

	//Listeners {
	//}

});

Ext.reg('bt-gridform',GridForm);

Grid

Sem muitos segredos aqui. Basta definir o datastore, as colunas, e algumas configurações opcionais. Interessante notar que o datastore declara 3 campos – id, nome e login – e o grid somente declara 2 colunas – nome e login. O campo ID ficará escondido mas disponível, mesmo que eu não tenha coluna para ele.

this._grid = new Ext.grid.GridPanel({
	 flex		: 1
	,bodyStyle	: 'border-width:0 1px 0 0;'
	,viewConfig	: {forceFit:true}
	,store		: new Ext.data.JsonStore({
		 autoLoad	: true
		,autoDestroy: true
		,proxy		: new Ext.data.HttpProxy({url: 'usuarios.json', method: 'GET'})
		,fields		: [
			 {name:'id'		, type:'int'	}
			,{name:'nome'	, type:'string'	}
			,{name:'login'	, type:'string'	}
		]
	})
	,columns: [{
		 header		: 'Nome'
		,dataIndex	: 'nome'
	},{
		 header		: 'Login'
		,dataIndex	: 'login'
	}]
});

Formulário

Também sem mistérios. Para que o id seja passado pro servidor na hora de submitar eu optei por criar um campo hidden. Também importante notar a existência do campo senha. Não é interessante mostrar a senha no grid, mas na hora de submitar essa é uma informação importante para o meu cadastro de usuários.

this._form = new Ext.form.FormPanel({
	 defaultType: 'textfield'
	,labelAlign	: 'top'
	,padding	: '10'
	,width		: 300
	,border		: false
	,defaults	: {anchor: '-10'}
	,items		: [{
		 xtype	: 'hidden'
		,name	: 'id'
	},{
		 fieldLabel	: 'Nome'
		,name		: 'nome'
		,allowBlank	: false
	},{
		 fieldLabel	: 'Login'
		,name		: 'login'
		,allowBlank	: false
	},{
		 fieldLabel	: 'Senha'
		,inputType	: 'password'
		,name		: 'senha'
	}]
	,buttons:[{
		 text	: 'Salvar'
		,scope	: this
		,handler: this._onBtnSalvarClick
	},{
		 text	: 'Alterar'
		,hidden	: true
		,scope	: this
		,handler: this._onBtnSalvarClick
	},{
		 text	: 'Limpar'
		,scope	: this
		,handler: this._onBtnLimparClick
	}]
});

Carregando o grid ao clicar numa linha

Primeiro devemos anexar um listener ao evento “clicar numa linha” do grid. Em seguida utilizamos o método loadRecord de Ext.form.BasicForm (todo Ext.form.FormPanel guarda um BasicForm dentro) para carregar os dados

,initEvents: function()
{
	GridForm.superclass.initEvents.call(this);

	this._grid.getSelectionModel().on('rowselect',this._onGridRowSelect,this);
}

//...

,_onGridRowSelect: function(selectionModel, rowIndex, record )
{
	var form = this._form.getForm(); 

	form.loadRecord(record);
	form.findField('nome').focus(false,true);

	this._form.buttons[0].hide(); //salvar
	this._form.buttons[1].show(); //alterar
}

Submitando o formulário e recarregando o grid

Ao clicar em Salvar/Alterar submitamos o formulário, mostrando uma mensagem enquanto o processo não estiver finalizado. Ao ser finalizado (o servidor retornar success:true) podemos limpar o formulário e recarregar a listagem.

,_onBtnSalvarClick: function()
{
	var form = this._form.getForm(); 

	if(!form.isValid()){
		return false;
	}

	form.submit({
		 url		: 'usuariosubmit.json' //do nothing
		,waitTitle	: 'Aguarde'
		,waitMsg	: "Enviando dados..."
		,scope		: this
		,success	: function()
		{
			this._onBtnLimparClick();
			this._grid.store.reload();
		}
	});
}

Resumo

E está pronta nosso cadastro básico. Basta fazer toda a codificação do servidor para que os dados sejam persistidos. Segue links para o código completo e o exemplo online. Detalhe: eu não fiz nenhuma persistência de dados no exemplo online. Se você alterar algum registro ou criar um novo, nada vai acontecer.

Até a próxima!