Cadastro básico com grid e formulário

Yesterday I was asked about a demo that demonstrated a basic registration screen with the list of records in one side and the form registration on the other. As said, it’s a simple interface for entries, where you view the records written in a list, and clicking on any record their data is loaded in the form. Once changed, the data are submit, and the grid is reloaded. The Ex has this example, but what differs is that my uses object oriented code and has the option to save the data.

Base Class

Will be neither a form that will contain a grid or a grid containing a form. It will be a panel with two items inside. This panel arrange the layout and also will conduct the business rule that exists between the grid and form.

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

Not many secrets here. Just set the datastore, columns, and some optional settings. Interestingly, the datastore declares three fields – id, name and login – and grid declares only two columns – name and login. The ID field will be hidden but available even though I have no column for it.

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'
	}]
});

Form

Also not many secrets here. For the id to be passed to the server on submit I chose to create a hidden field. Also important to note the existence of the password field. Is not it interesting to show the password in the grid, but at submission time this is a important information for my user registration.

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
	}]
});

Loading grid on row click

First we attach a listener to the event “click on a line” on the grid. Then we used the method loadRecord of Ext.form.BasicForm (all Ext.form.FormPanel has a BasicForm in it) to load the data

,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
}

Submit the form and reload the grid

When you click Save / Update I submit the form, displaying a message while the process is not finished. When finalized (the server returns success: true) we can clear the form and reload the grid.

,_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();
		}	
	});
}

Resume

And our basic registration is ready. You just have to do all the coding for server data to be persisted. Here are the links to the full code and online demo. Ps: I didn’t code the persistent stuff so if you change any registry or create a new, nothing will happen.

Until next time!

server-side.zip

Full code

Demo Online

Online demo