PDA

View Full Version : IndexedDB Proxy Ext.data.proxy.IndexedDB



grgur
1 Jul 2011, 5:06 AM
If you ever wanted to use local storage for whatsoever reason (e.g. offline fallback, code examples without need for server-side middleware and database, etc), chances are you're familiar with the diversity of options. WebSQL database being ditched from HTML5 draft in favor to IndexedDB highly suggest the IDB is the option for offline storage.

Usage cases for local (client side) databases and this proxy are:
- caching infrequently changed data (ComboBox entries, settings, localization, etc.)
- fast and easy code samples that don't require server round trips and the whole server side architecture
- offline fallback (although sencha.io is actually a preferred way of doing this)

I was initially uncertain to try something non-SQL-like, but then learned that IndexedDB is so cool and JavaScript oriented that I couldn't just close my eyes on it. Also, it's asynchronous, therefore have your callbacks and events at hand.

To make things even easier I created a proxy for IDB so that you can use all that goodness in your Ext JS 4 models and stores without extra effort.

Go ahead and try this live example (http://www.grgur.com/indexeddb/sample/) or get the code (https://github.com/grgur/Ext.data.proxy.IndexedDB) from GitHub.

This is a project in development, and as always, your feedback is most welcome.

Updates:
- Jul 2, 2011 - added support for importing data from other stores (e.g. Server proxy, Ext.Direct proxy, etc)
- Jul 4, 2011 - added support for WebSQL DB. Now you can use a universal Ext.data.proxy.BrowserDB that will automatically switch to WebSQL Database if IndexedDB is not available. That means it will now work on Safari, mobile Safari (iOS), and Android browser

mitchellsimoens
1 Jul 2011, 9:18 AM
Nice work and great to see documentation!

grgur
1 Jul 2011, 10:06 AM
Thanks Mitch, means a lot when coming from you ;)

grgur
4 Jul 2011, 1:08 AM
Just added fallback support to WebDB (or WebSQL how some like to call it). WebDB is no longer in HTML5 draft, but is still supported in Safari (on mobile devices, too).

I've created a separate proxy that will automatically switch between the two databases (actually, proxies)

tobiu
4 Jul 2011, 10:04 AM
Hi Grgur,

definitely +1

Extremely well written and documented code and a neat UX.

Best regards
Tobi

tomalex0
18 Jul 2011, 12:55 AM
@grgur

First of all thanks for coming up with this awesome functionality. I was looking for WebDB(sqlite) proxy, but only difference is that i needed it in Sencha Touch :(. I tried porting this to touch but have came across few errors. I'm looking into. If you can come with similar proxy compatible for sencha touch it would be great.

I have posted this as a feature request.
http://www.sencha.com/forum/showthread.php?140662-Phonegap-Sqlite-Store-Proxy

grgur
18 Jul 2011, 1:00 AM
It's awesome to hear that you're finding it useful. I'm probably not going to be looking at the proxy from Sencha Touch perspective in the next couple of weeks, but AFAIK Lisimba has already modified it and will be sharing the ST compatible version of the proxy via github soon.

So stay tuned :)

tomalex0
18 Jul 2011, 1:43 AM
Thanks for the update :).

Yoann M.
12 Sep 2011, 8:09 AM
thanks for such sharing

awesome Work and as tomalex0 it shoud be great for Sencha Touch
Is the IndexedDB proxy for Sencha Touch available somewhere on github ? I didn't found it

Still thanks for all

mitchellsimoens
12 Sep 2011, 8:13 AM
thanks for such sharing

awesome Work and as tomalex0 it shoud be great for Sencha Touch
Is the IndexedDB proxy for Sencha Touch available somewhere on github ? I didn't found it

Still thanks for all

The data package isn't that different but there are some differences. You could try


Go ahead and try this live example (http://www.grgur.com/indexeddb/sample/) or get the code (https://github.com/grgur/Ext.data.proxy.IndexedDB) from GitHub.

tomalex0
12 Sep 2011, 7:47 PM
@Yoann

I have tried to implement sqliteproxy for sencha touch , you can check it out here. IndexDB not implemented.

http://www.sencha.com/forum/showthread.php?146465-SqliteProxy

khushkedia
5 Apr 2012, 8:40 PM
Hello everyone,

I am trying to use the proxy mentioned in the github, but am facing issues. I get an error message that says "getIDProperty of undefined". What am i missing in the code?

Khushbu

Thanks in advance

srossshell
2 May 2012, 11:54 AM
Can anyone verify if this still works in 4.1?

srossshell
2 May 2012, 12:33 PM
I was receiving the following error when attempting to use this proxy in an app where I was following the MVC architecture.

"Uncaught You are using a ServerProxy but have not supplied it with a url"

I think my problem is that the model has no proxy, and hence the model manager assigned a default proxy with type "Ajax".

My Model

Ext.define('AM.model.User', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'int' },
{ name: 'firstName', type: 'string' },
{ name: 'lastName', type: 'string' },
{ name: 'dateOfBirth', type: 'date' },
{ name: 'email', type: 'string' },
{ name: 'testResult', type: 'string' }
],
idProperty: 'id'
});

My Store

Ext.define('AM.store.Users', {
require: ['Ext.data.proxy.IndexedDB', 'Ext.data.proxy.IndexedDB', 'Ext.data.proxy.WebDB'],
extend: 'Ext.data.Store',


// destroy the store if the grid is destroyed
autoDestroy: true,
autoSync: true,
autoLoad: true,
model: 'AM.model.User',


proxy: {
type: 'idb',
dbName: 'users',
objectStoreName: 'user',
dbVersion: '1.0',
writer: {
type: 'json',
writeAllFields: false
},
initialData: [
{
dateOfBirth:"05 January 1970",
email:"pg@fg.com",
firstName:"Peter",
id:1,
lastName:"Griffen",
testResult:"Pass"
}, {
dateOfBirth:"06 January 1970",
email:"sg@fg.com",
firstName:"Stewie",
id:2,
lastName:"Griffen",
testResult:"NotSet"
}
]
}
});



My workaround to get this to work was to copy the proxy from the store into my model object, which is not ideal. i.e my model becomes

Ext.define('AM.store.Users', {
require: ['Ext.data.proxy.IndexedDB', 'Ext.data.proxy.IndexedDB', 'Ext.data.proxy.WebDB'],
extend: 'Ext.data.Store',


// destroy the store if the grid is destroyed
autoDestroy: true,
autoSync: true,
autoLoad: true,
model: 'AM.model.User',


proxy: {
type: 'idb',
dbName: 'users',
objectStoreName: 'user',
dbVersion: '1.0',
writer: {
type: 'json',
writeAllFields: false
},
initialData: [
{
dateOfBirth:"05 January 1970",
email:"pg@fg.com",
firstName:"Peter",
id:1,
lastName:"Griffen",
testResult:"Pass"
}, {
dateOfBirth:"06 January 1970",
email:"sg@fg.com",
firstName:"Stewie",
id:2,
lastName:"Griffen",
testResult:"NotSet"
}
]
}
});

Is there a better solution to this problem? Quite new to ExtJs!!!

hasael
23 Jan 2013, 8:56 AM
Hello, after all, I'll like to give you credit for this proxy's implementation, it's great.

I'm using ExtJS 4.1

I've created a Model that use BrowserDB proxy (IDB) with some InitialData and it works fine, but, when I try to define another Model with a proxy "browserdb" with a diferent objectStoreName, but using the same db, it's not been created, only when I change the dbName property in the configuration, works, but for me doesn't have too much sense...


// ****************** Always works ********************
//Model
Ext.define('app.model.Customer', {
extend: 'Ext.data.Model',
fields: [
...
],
proxy : {
type : 'browserdb',
dbName : 'db1',
objectStoreName : 'customer',
writer : {
type : 'json',
writeAllFields : false
},
initialData : [{
...
},{
...
} ]
}
});

// Store...
Ext.define('app.store.Customers', {
extend : 'Ext.data.Store',
autoDestroy: true,
autoSync: true,
autoload: true,
requires: ['app.model.Customer'],
config : {
model : 'app.model.Customer',
storeId : 'Customers'
}
});
// *****************************************************

// Second Model
// ****************** This never works *********************
// Model...
Ext.define('app.model.Product', {
extend: 'Ext.data.Model',
fields: [
...
],
proxy : {
type : 'browserdb',
dbName : 'db1',
objectStoreName : 'products',
writer : {
type : 'json',
writeAllFields : false
}
}
});

//Store...
Ext.define('app.store.Products', {
extend : 'Ext.data.Store',
autoDestroy: true,
autoSync: true,
autoload: true,
requires: ['app.model.Product'],
config : {
model : 'app.model.Product',
storeId : 'Products'
}
});

// *****************************************************

// Created in another DB
// ******************** This works ************************
Ext.define('app.model.Product', {
extend: 'Ext.data.Model',
fields: [
...
],
proxy : {
type : 'browserdb',
dbName : 'db2',
objectStoreName : 'products',
writer : {
type : 'json',
writeAllFields : false
}
}
});
// *****************************************************

// At last the insertion

var store = Ext.create('app.store.Products');
var product = Ext.create('app.model.Product', {
...
});
product.save();
store.insert(0,product);
store.save();




Please, help...

dobberph
21 Oct 2013, 4:26 AM
Hi,

I tried to use the example provided in https://github.com/grgur/Ext.data.proxy.IndexedDB
But this standalone code throws the error:


Uncaught TypeError: Object #<IDBDatabase> has no method 'setVersion' Ext.data.proxy.IndexedDB.js:127
request.onsuccess Ext.data.proxy.IndexedDB.js:127


Does someone has an idea how I can fix this? Or does soneone has the same problem?

Best regards,
Tobias