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!
Full code
Online demo
