Thursday 11 July 2013

How to get Single record from Store in Sencha Touch 2

Today, we are going to see how to get single record from the Store in Sencha Touch 2.

Create a Model

First, let's create a model class with name UserModel with these fields Name, DateOfBirth and Age.
Ext.define('MyApp.model.UserModel', {
    extend: 'Ext.data.Model',
    alias: 'model.UserModel',

    config: {

        fields: [{
            name: 'Name',
            type: 'string'
        }, {
            name: 'DateOfBirth',
            type: 'string'
        }, {
            name: 'Age',
            type: 'string'
        }]
    }
});


Create a Store

Now, we are going to create a store with class name UserStore and associate the above created UserModel class to the store using model configuration. Proxy type configuration will be set to localstorage which will store the data in the browser Local Storage using HTML5 LocalStorage API.
Ext.define('MyApp.store.UserStore', {
    extend: 'Ext.data.Store',
    alias: 'store.UserStore',

    requires: [
        'MyApp.model.UserModel'
    ],

    config: {
        model: 'MyApp.model.UserModel',
        storeId: 'UserStore',
        proxy: {
            type: 'localstorage'
        }
    }
});

Access Single Items from the Store

First, we are going to insert data to the store using add() method, which will accept model instance as the parameter.
var UserStore = Ext.getStore('UserStore');

UserStore.load();

UserStore.add({
    Name: 'A Suresh',
    DateOfBirth: '21-07-1981',
    Age: '31'
});

UserStore.add({
    Name: 'Ramesh',
    DateOfBirth: '21-04-1981',
    Age: '25'
});

UserStore.add({
    Name: 'Raju',
    DateOfBirth: '01-04-1981',
    Age: '29'
});

UserStore.sync();

Now, we are going to access the first records from the store using the index value, you need to use getAt() method, which will accept single parameter- index value
console.log(UserStore.getAt(0));

Above code, will return the User Model Instance of the first record (A Suresh).

Sencha Touch also supports retrieving store record by id using the getById() method which will accept a single parameter - id value
console.log(UserStore.getById(1));

Both code will retrieve the first User record from the store (A Suresh).

Hope, you enjoyed this Post.

2 comments:

  1. Thnks a lot. I got a basic idea how to handle the methods of local storage by referring this post.

    ReplyDelete