Web SQL Proxy in Sencha Touch 2.1

In the previous post, we discussed about Sencha Touch 2.1 including support for Web SQL. Web SQL is a data storage mechanism that enables storing data in SQL databases. The webkit browsers use SQLite database for this purpose. In this article we’ll see how we can use Sencha Touch 2.1 for working with Web SQL.

Sencha Touch 2.1 introduces a proxy class Ext.data.proxy.Sql. We can create a store or model with the proxy type as ‘sql’ and invoke the CRUD methods. At the time of writing this post, Sencha throws too many errors while playing with the Sql Proxy. We may have to wait for it to evolve.

Let’s create a model ‘Country‘ with name and capital fields. The model will use a proxy of type sql. The code is shown below.

        Ext.define("Country", {
            extend: "Ext.data.Model",
            config: {
                fields: ["name", "capital"],
                proxy: {
                    type : "sql",
                    database : "CountriesDB"
                }
            }
        });

In the code above, the proxy has a property called database that specifies the name of the database to be created. Let’s create a Country object and call the save method as shown below.

 
        Ext.application({
            launch: function () {
                var country = Ext.create("Country", { name: "India", capital: "New Delhi" });
                country.save();
            }
        });

After running the script a database CountriesDB is created with a table ‘Country‘ (same name as the model). A primary key column id is generated with auto incremented values. The screenshot of the database in chrome is shown below.

After running the script a database CountriesDB is created with a table ‘Country’ (same name as the model). A primary key column id is generated with auto incremented values. The screenshot of the database in chrome is shown below.

Sql proxy in Sencha Touch 2.1 is still not fully functional as it throws up errors while trying to load the records or customize the table name. We may have to wait for it to mature before using it in our applications.