For programmers, testers and tech geeks

Extjs best practices to Create, update records MVC vs MVVM

With years of experience I have learned that there may be many ways to solve a programming problem in difference requirements and needs. Lets talk about "Ways to create and update records " in extjs framework in this post.

First lets start with adding new records.

Practices to add records 

1. Method#1

// We can load an empty model in form's loadRecord method as soon as form get displayed in browser some thing like shown below :

var store = Ext.getStore('UserStore');  // get store of associated model
var record = new store.model();  // prepared new copy of store model
component.loadRecord(record); // loaded model in form

// On save or upldate button click we can get our record

form.updateRecord();  // first for pushing form values inside model object
var record = form.getRecord(); // then this method will give us updated model

2. Method#2

// Explicitly set values to model i.e. first create empty model then use :

var store = Ext.getStore('UserStore');  // get store of associated model
var record = new store.model();  // prepared new copy of store model
// get values from form use 
var values = form.getValues();
// then explicitly set values to model
model.set(values);

 

3. Method # 3

// add proxy in model and call model.save() method with callback when want to post to //httpwebapi
// lets say we have defined model below 
Ext.define('App.model.AuthModel', {
extend: 'Ext.data.Model',
requires: [
'Ext.data.proxy.Rest',
'Ext.data.writer.Json'
],
proxy: {
type: 'rest',
api: {
create: 'api/loading/LogOff'
 },
writer: {
type: 'json'
}
  }
});

 Update a record :

A record can be update in same way as we do for adding but once we change values in model , we just need to call store.sync() for put call because extjs maintains the context automatically.

Delete a record:

For deleting a record we need to call store.remove(record) and then need to do store.sync(), this will make HttpDelete call to the api.

 

MVVM Practice:

 

Adding record :

 

// Step#1

// create an object inside viewmodel lets say record like

data:{ 'record':''}

// Step#2

// bind this record with fields inside the form to their value property

bind: {

value: '{record.FirstName}'

}

// where FirstName is th attribute of store model

 

// Step#3

// next we need to get values from view model like

 

var data = this.view.viewModel.get('record')

 

// Step#4 next we need to set these values into model like

 

model.set(data);

 

// and add this model into store

 

store.add(model);

 

// once model is added inside the store, we will call store.sync() method like

store.sync({

success: function () {

G.globalSuccess();

},

failure: function (batch) {

G.globalFailure();

}

});

 

Updating a record :

 

Loading record in form :

// on view show first we need to set record property with the record we want to update like

 this.view.viewModel.set('record', { 'FullName':'my first name'});// or the model object as second parameter
 
 setting record to the model:

model.set( this.view.viewModel.get('record'));

 updating record to the store

store.sync({

       success: function () {

            G.generalSuccess();

        },

        failure: function (batch) {

            G.generalFailure();

        }

});

 

Store load scenarios


1 ) Normal store load

store.load({

scope: this,

callback: function(records,operation,success){

// this will be defined in global controller

G.callbackResponse(records,operation,success);

}//end callback

});  

// global callback response will handle the response generally

function callbackResponse(recs,opration,success)
{
  
}

 

2 ) Load store with parameters

store.load({
params : { userId: 1},
scope: this,
callback: function(response){
G.Success(response);
}
});


3 ) Load single record from webapi
we can use model proxy, store will be defined as it was before the addition would be introduction of proxy inside the model and we need to explicitly define get for model as given in case of api's → read property i.e.

 proxy: {
type: 'rest',
api: {
read: 'http://localhost/Learning/WebApi/api/Customer/GetById'
},
idParam: 'CustomerID',
url: 'http://localhost/Learning/WebApi/api/Customer',
appendId: false,
reader: {
type: 'json',
rootProperty: 'data'
},
writer: {
type: 'json'
}
}

Second approach for loading single record :

var model = Ext.create('MyApp.model.User', {userId: 99});
model.load({ success: function(response) { },

failure: function(response) { } });

Best approach to find a record in store : 
store.findBy(function(record,id)
{ 
return (record.get('oneField') == someValue && record.get('secondField') == otherValue); 
});


It returns the record index of first matched item or returns -1 if not matched.