PDA

View Full Version : Fill Form Fields with Model data



diovani
3 Jan 2012, 4:46 AM
Hi all,
I'm using a Form with a Model to perform validation and requests.
My plan it to let all logic in the Model and make the form be just the UI to show/update fields. Due to the lack of a native binding between Form and Model, I need to send messages from one to another several times.

Alright until now,
My doubt is, after load a Model from server, how to make the Form fill its Fields with the Model Values?

Sure I can do a form.loadRecord(). But the Model was from the beginning set to the form, and i would need to so some stupidy code like:


form.loadRecord( form.getRecord() );

My real case and code are below:


App load a Model into the Form with form.loadRecord()
User fill a key field on the form, like a document (CPF)
Model searches the server the filled doc and returns its values
Model update itself with the server values
App update the Form Fields with the Model values.


Calling the View from another Controller.
As see, I load the Model as first thing.


addAluno: function(cmp) {
var mainPanel = cmp.up('panel#main'),
alunoEdit = mainPanel.down('panel#cadAluno'),
pessoaFisicaEdit = alunoEdit.down('pessoafisicaedit');

//load and empty Record to the Form
pessoaFisicaEdit.loadRecord( Ext4.create('GV.model.PAD.PessoaFisica') );

mainPanel.getLayout().setActiveItem(alunoEdit);
}


The Model,
Who do the search on the server.
Everything is working fine, except the form showing the loaded values.



/**
*
*/
Ext4.define('GV.model.PAD.PessoaFisica', {
extend: 'GV.model.BaseModel',

fields: [
{name: 'codigo', type: 'int'},
{name: 'nome', type: 'string'}
],

findByCpf: function( callback ) {
var me = this,
cpf = me.get('cpf');

if (cpf == '') {
throw 'CPF não informado';
}

Ext4.Ajax.request({
url: GVutils.basepath + 'modulos/' + GV.Application.MODULO_APP + '/app.php/Pessoas?ViewPessoasJson[method]=findPessoaFisica',
params: {
cpf: cpf
},
success: function(response){
var result = Ext4.decode( response.responseText );
this.set(result.data);

console.log(this.data); //just checking. I want this data to be shown on form
},
scope: me
});
}
});


The Controller,
who bind the change evento to search the data on the server calling the Model method




/**
*
*/
Ext4.define('GV.controller.PAD.PessoaFisicaController', {
extend: 'GV.controller.BaseController',

models: [
'PAD.PessoaFisica'
],

views: [
'PAD.PessoaFisica.Edit'
],

checkCpfTask: null,

init: function() {
this.control({
'pessoafisicaedit field[name=cpf]': {
change: this.fieldCpfChange
}
});
},

fieldCpfChange: function(fld, newVal, oldVal, eOpts) {
if (this.checkCpfTask !== null) {
this.checkCpfTask.cancel();
} else {
this.checkCpfTask = Ext4.create('Ext4.util.DelayedTask', function(fld){
delete this.checkCpfTask;
this.checkCpfTask = null;

var form = fld.up('pessoafisicaedit'),
record = form.getRecord();

record.set( form.getValues() );
record.findByCpf();
}, this, [fld]);
}

this.checkCpfTask.delay(500); //workaround to not request every time
}
});

mitchellsimoens
3 Jan 2012, 5:57 AM
The names of the fields must match the name of the fields. Then when loadRecord is executed it should iterate through and apply the values based on the name matchings.

diovani
4 Jan 2012, 3:52 AM
That works.

The case is that form.loadRecord( form.getRecord() ); is redundant.
As the form has already a record bind to it, I think it should update field values when record is modified.