Sunday, September 4, 2011

Sencha Touch Working with Models, Proxies, Stores

Data package is the important core part of sencha touch 1.x package. It enables application to persist data through application using models and proxies.

Model defines your business entity and proxy allows you to create CRUD (create, read, update, delete) functions for the models. Model is assigned to store. Here in this blog I am going to explain how to use models and proxy with store.

First define a proxy.


Ext.data.ProxyMgr.registerType("myProxy",
    Ext.extend(Ext.data.Proxy, {
        create: function (operation, callback, scope) {
             //Here goes your create logic
        },
        read: function (operation, callback, scope) {
             //Here goes your read logic
        },
        update: function (operation, callback, scope) {
             //Here goes your update logic
        },
        destroy: function (operation, callback, scope) {
             //Here goes your delete logic
        }
    })
);

This will create a new proxy with a name my proxy. Now create a model and assign proxy to it.


Ext.regModel('myModel', {
    fields: [
        {name : 'field1' , type : 'int'},
        {name : 'field2' , type : 'datetime'},
        {name : 'field3' , type : 'string'}    ],
    proxy: {
        type: "myProxy"
    }
});


Now assign model to a store.

var myStore= new Ext.data.Store({
    model: 'myModel'
});


Now to call the read function of proxy you can call store load method.

myStore.load()

To call create function of proxy you can add new item in store and call sync method.

var newModel = Ext.ModelMgr.create({ 'field1': value1,
            'field2': value2,
            'field3': value3
        }, 'myModel');

myStore.add(newModel);

myStore.sync();

To call update function of proxy you can update item in store as follow.

var updateModel = Ext.ModelMgr.create({ 'field1': value1,
            'field2': value2,
            'field3': value3
        }, 'myModel');

myStore.update(updateModel);

To call destroy method you have to explicitly call proxy destroy function since destroy method is not yet implemented for the store as follow.

var deleteModel= Ext.ModelMgr.create({ 'field1': value1,
            'field2': value2,
            'field3': value3
        }, 'myModel');

deleteModel.getProxy().destroy(new Ext.data.Operation({ action: 'destroy',records:deleteModel.data}));

6 comments:

  1. But how do you read the value of a record or field? Every example in the whole damn world just says load().

    ReplyDelete
  2. store load method will call read method of proxy. If you just want to read record in store. you can get record using getById() function if you set id property in model one you have record you can read field value using record.get('fieldname')

    ReplyDelete
    Replies
    1. Rather than using proxy you can also store the data in a local database. it becomes easy to just query rather than update using proxies

      Delete
    2. It depends on scenario. Sometimes we can have local database like sqllite but in case of APIs we have to depend on proxy to get and send data.

      Delete
  3. Why myStore.sync(); on the add method and not the others. What exactly does this function do?

    ReplyDelete
    Replies
    1. Sync function will add record in localStorage.

      Delete