Sencha Touch 2 Stores – Adding, Removing and Finding Records

In this Sencha Touch tutorial you will learn how to add, remove and find records in a Sencha Touch store. The store methods you will learn about in this post are the following:

• add
• insert
• getAt
• getById
• removeAt
• removeAll
• getCount

Let’s create a simple Sencha Touch application with the following files:

The index.html file will look like this:

In the model/Hotel.js file, you will define a Hotels store like so:

Ext.define('App.store.Hotels', {
    extend: 'Ext.data.Store',
    config:{
        fields: [
            { name: 'id', type: 'int' },
            { name: 'name', type: 'string' },
            { name: 'address', type: 'string' },
            { name: 'status', type: 'int' }
        ],
        data: [
            [1, 'Siesta by the Ocean', '1 Ocean Front, Happy Island', 1],
            [2, 'Gulfwind', '25 Ocean Front, Happy Island', 1],
            [3, 'South Pole View', '1 Southernmost Point, Antarctica', 1]
        ]
    }
});

Remember that you should name stores following the AppName.store.StoreName convention. Which is why our store is named App.store.Hotels. Hotels is a simple store with a fields config and a few records hard-coded through the data config.

In the app.js file we are going to define a Sencha Touch application, acquire a reference to the Hotels store, and perform some operations on it:

Ext.application({
    name: 'App',
    stores:['Hotels'],
    launch: function () {

        var hotelsStore = Ext.getStore('Hotels'); // Shortcut  Ext.data.StoreManager.lookup. You can get a reference to any store using the Store Manager class.

        console.log('Number of hotels: ' + hotelsStore.getCount()); // Using getCount method.

        var anotherHotel = { id: 4, name: 'North Pole View', address: '1 Northernmost Point, Arctic Ocean', status: 1 };

        hotelsStore.add(anotherHotel);  // Use the add function to add records or model instances.

        var oneMoreHotel = { id: 5, name: 'View From Up High', address: 'The Moon', status: 1 };

        hotelsStore.insert(2, oneMoreHotel);    // Use insert to add records or model instances at a given index.

        console.log('Number of hotels after adding "anotherHotel": ' + hotelsStore.getCount());

        var firstRecord = hotelsStore.getAt(2);     // Use getAt function to retrieve a record at a given index.

        console.log('Third hotel\'s name is ' + firstRecord.get('name'));

        var aRecord = hotelsStore.getById(2);  // You can get a record with a given id.

        console.log('Hotel with id = 2 is ' + aRecord.get('name'));

        hotelsStore.removeAt(0);    // Use removeAt to remove a record at a given index.

        console.log('Number of hotels in the store after removing first hotel: ' + hotelsStore.getCount());

        hotelsStore.removeAll();    // Use removeAll to remove all records.

        console.log('Number of hotels in the store after removing all: ' + hotelsStore.getCount());

    }
});

If you open the index.html file in Google Chrome and activate the Javascript console, you will see a series of messages similar to this:

How It Works

The first step you need to take in the application is to add the stores config, which declares the Hotels store.

The stores config defines the list of stores to load for the application. The application assumes the files for its stores exist in the app/store directory. When adding stores to the stores config, you can type either the full class name of the store, or just the last part of the class name. In our example, you can type stores:['Hotels'] or stores:['App.store.Hotels'].

In the application’s launch function, you acquire a reference to the Hotels store using the Ext.getStore method. Then, you are ready to perform operations on the store.

You can add records or model instances to the store using the add method:

var anotherHotel = { id: 4, name: 'North Pole View', address: '1 Northernmost Point, Arctic Ocean', status: 1 };

hotelsStore.add(anotherHotel);

If you need to insert records at a particular position, you can use the insert method:

var oneMoreHotel = { id: 5, name: 'View From Up High', address: 'The Moon', status: 1 };

hotelsStore.insert(2, oneMoreHotel);

The getAt method allows you to find a record or model instance at a given position:

var firstRecord = hotelsStore.getAt(2);

You can also find records by id using the getById method

var aRecord = hotelsStore.getById(2);

Removing by position is easy with the removeAt method:

hotelsStore.removeAt(0);

Finally, you can remove all the records using removeAll:

hotelsStore.removeAll();

Want To Learn More?

My Sencha Touch books will teach you how to create a Sencha Touch application, step by step, from mockups to production build.

• Sencha Touch 2 Book
• Sencha Touch 1 Book