How to get records from store using getRange in Sencha Touch 2

Today, i came across a handy function getRange(), which will returns the array of records from the store. This method accepts the following parameters.

• startIndex : The starting index (Default to 0)
• endIndex : The ending index (Default to the last Record in the Store).

Let me demonstrate this by providing examples  in various ways

Define a Store

Ext.define('MyApp.store.MyStore', {
    extend: 'Ext.data.Store',

    config: {
        data: [
            {
                Name: 'user1',
                Age: 29,
                DateOfBirth: '10-11-1980'
            },
            {
                Name: 'user2',
                Age: 28,
                DateOfBirth: '10-1-1989'
            },
            {
                Name: 'user3',
                Age: 29,
                DateOfBirth: '10-07-1982'
            },
            {
                Name: 'user4',
                Age: 27,
                DateOfBirth: '10-02-1984'
            },
            {
                Name: 'user5',
                Age: 26,
                DateOfBirth: '4-07-1991'
            },
            {
                Name: 'user6',
                Age: 26,
                DateOfBirth: '9-10-1986'
            }
        ],
        storeId: 'MyStore',
        fields: [
            {
                name: 'Name'
            },
            {
                name: 'Age'
            },
            {
                name: 'DateOfBirth'
            }
        ]
    }
});

Example 1:

If you need to get the first 3 records from the above store using getRange(). Here is the code

var storeObj = Ext.getStore('MyStore');
//storeObj.load(); /*uncomment this line, if you are reading records from url*/
var records = storeObj.getRange(0,2);

Ext.each(records,function(record){
   console.log('Name: '+record.data.Name+', Age: '+record.data.Age+', Date Of Birth: '+record.data.DateOfBirth);
});

Output:
Name: user1, Age: 29, Date Of Birth: 10-11-1980
Name: user2, Age: 28, Date Of Birth: 10-1-1989
Name: user3, Age: 29, Date Of Birth: 10-07-1982

Example 2:

If you need to get the last 2 records from the above store using getRange(). Here is the code

var storeObj = Ext.getStore('MyStore');
//storeObj.load(); /*uncomment this line, if you are reading records from url*/
var records = storeObj.getRange(4,5);

Ext.each(records,function(record){
   console.log('Name: '+record.data.Name+', Age: '+record.data.Age+', Date Of Birth: '+record.data.DateOfBirth);
});

Output:
Name: user5, Age: 26, Date Of Birth: 4-07-1991
Name: user6, Age: 26, Date Of Birth: 9-10-1986

Example 3:

If you need to get all the records from the above store using getRange(). Here is the code

var storeObj = Ext.getStore('MyStore');
//storeObj.load(); /*uncomment this line, if you are reading records from url*/
var records = storeObj.getRange();

Ext.each(records,function(record){
   console.log('Name: '+record.data.Name+', Age: '+record.data.Age+', Date Of Birth: '+record.data.DateOfBirth);
});

Output:
Name: user1, Age: 29, Date Of Birth: 10-11-1980
Name: user2, Age: 28, Date Of Birth: 10-1-1989
Name: user3, Age: 29, Date Of Birth: 10-07-1982
Name: user4, Age: 27, Date Of Birth: 10-02-1984
Name: user5, Age: 26, Date Of Birth: 4-07-1991
Name: user6, Age: 26, Date Of Birth: 9-10-1986

Important Note: You don't need to use Ext.each() or load() in order to read the store records. You can use getRange() which will also helps for improving your application performance.

Hope, you enjoyed this Post.