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