For programmers, testers and tech geeks

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

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

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.