diff --git a/Ext.data.proxy.BrowserDB.js b/Ext.data.proxy.BrowserDB.js index 9359e31..052974e 100644 --- a/Ext.data.proxy.BrowserDB.js +++ b/Ext.data.proxy.BrowserDB.js @@ -4,10 +4,11 @@ * BrowserDB Proxy for Ext JS 4 uses best available browser (local) database to use for your locally stored data * Currently available: IndexedDB and WebSQL DB * - * Version: 0.21 + * Version: 0.3 * */ (function() { + var idb = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB, cfg = {}; @@ -15,19 +16,21 @@ * Choose which proxy to extend based on available features. IndexedDB is preferred over Web SQL DB */ if (!idb) { - cfg.extend = 'Ext.data.proxy.WebDB'; + cfg.extend = 'Ext.data.proxy.WebDB'; cfg.dbInUse = 'webdb'; } else { - cfg.extend = 'Ext.data.proxy.IndexedDB'; + cfg.extend = 'Ext.data.proxy.IndexedDB'; cfg.dbInUse = 'idb'; } Ext.define('Ext.data.proxy.BrowserDB', { - extend: cfg.extend, - alias : 'proxy.browserdb', - alternateClassName: 'Ext.data.proxy.BrowserCache', + extend : cfg.extend, - dbInUse: cfg.dbInUse, + alias : 'proxy.browserdb', + + alternateClassName : 'Ext.data.proxy.BrowserCache', + + dbInUse : cfg.dbInUse, /** * Route to the right proxy. @@ -44,4 +47,4 @@ } }); -})(); \ No newline at end of file +}()); \ No newline at end of file diff --git a/Ext.data.proxy.IndexedDB.js b/Ext.data.proxy.IndexedDB.js index 66ffc4b..eacbd11 100644 --- a/Ext.data.proxy.IndexedDB.js +++ b/Ext.data.proxy.IndexedDB.js @@ -5,94 +5,96 @@ * * IndexedDB is only available in Firefox 4+ and Chrome 10+ at the moment. * - * Version: 0.47 + * Version: 0.5 * * TODO: respect sorters, filters, start and limit options on the Operation; failover option for remote proxies, .. */ Ext.define('Ext.data.proxy.IndexedDB', { - extend: 'Ext.data.proxy.Proxy', - alias : 'proxy.idb', - alternateClassName: 'Ext.data.IdbProxy', + extend : 'Ext.data.proxy.Proxy', + + alias : 'proxy.idb', + + alternateClassName : 'Ext.data.IdbProxy', /** * @cfg {String} version * database version. If different than current, use updatedb event to update database */ - dbVersion: '1.0', + dbVersion : '1.0', /** * @cfg {String} dbName * Name of database */ - dbName: undefined, + dbName : undefined, /** * @cfg {String} objectStoreName * Name of object store */ - objectStoreName: undefined, + objectStoreName : undefined, - /** + /** * @cfg {String} keyPath * Primary key for objectStore. Proxy will use reader's idProperty if not keyPath not defined. */ - keyPath: undefined, - - /** + keyPath : undefined, + + /** * @cfg {Boolean} autoIncrement * Set true if keyPath is to autoIncrement. Defaults to IndexedDB default specification (false) */ - autoIncrement: undefined, - - /** + autoIncrement : true, + + /** * @cfg {Array} indexes * Array of Objects. Properties required are "name" for index name and "field" to specify index field * e.g. indexes: [{name: 'name', field: 'somefield', options: {unique: false}}] */ - indexes: [], - - /** + indexes : [], + + /** * @cfg {Array} initialData * Initial data that will be inserted in object store on store creation */ - initialData: [], - + initialData : [], + /** * @private * indexedDB object (if browser supports it) */ - indexedDB: window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB, + indexedDB : window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB, /** * @private * db object */ - db: undefined, + db : undefined, - /** + /** * @private * used to monitor initial data insertion. A helper to know when all data is in. Helps fight asynchronous nature of idb. */ - initialDataCount: 0, - - /** + initialDataCount : 0, + + /** * @private * Trigger that tells that proxy is currently inserting initial data */ - insertingInitialData: false, - + insertingInitialData: false, + /** * Creates the proxy, throws an error if local storage is not supported in the current browser. * @param {Object} config (optional) Config object. */ constructor: function(config) { this.callParent(arguments); - - this.checkDependencies(); + + this.checkDependencies(); this.addEvents('dbopen', 'updatedb','exception', 'cleardb', 'initialDataInserted', 'noIdb'); - // + // //fix old webkit references if ('webkitIndexedDB' in window) { window.IDBTransaction = window.webkitIDBTransaction; @@ -108,72 +110,82 @@ Ext.define('Ext.data.proxy.IndexedDB', { * Sets up the Proxy by opening database and creatinbg object store if necessary */ initialize: function() { - var me = this, + var me = this, request = me.indexedDB.open(me.dbName); - - me.on('updatedb', me.addInitialData); - + + me.on('updatedb', me.addInitialData); + request.onsuccess = function(e) { - var db = me.db = me.indexedDB.db = e.target.result, indexes = me.indexes; + var db = me.db = me.indexedDB.db = e.target.result, + indexes = me.indexes, + setVrequest, + keyPath, + store; // We can only create Object stores in a setVersion transaction; - if(me.dbVersion != db.version) { - var setVrequest = db.setVersion(me.dbVersion); + if(me.dbVersion !== db.version) { + setVrequest = db.setVersion(me.dbVersion); // onsuccess is the only place we can create Object Stores setVrequest.onfailure = me.onError; setVrequest.onsuccess = function(e) { - //clean old versions + var i; + + //clean old versions if(db.objectStoreNames.contains(me.objectStoreName)) { db.deleteObjectStore(me.objectStoreName); } - - //set keyPath. Use idProperty if keyPath is not specified - if (!me.keyPath) me.keyPath = me.getReader().getIdProperty(); - - // create objectStore - var keyPath = me.keyPath?{keyPath: me.keyPath}:undefined; - var store = db.createObjectStore(me.objectStoreName, keyPath, me.autoIncrement); - - // set indexes - for (var i in indexes) { - db.objectStore.createIndex(indexes.name, indexes.field, indexes.options); + + //set keyPath. Use idProperty if keyPath is not specified + if (!me.keyPath) { + me.keyPath = me.getReader().getIdProperty(); + } + + // create objectStore + keyPath = me.keyPath?{keyPath: me.keyPath}:undefined; + store = db.createObjectStore(me.objectStoreName, keyPath, me.autoIncrement); + + // set indexes + for (i in indexes) { + if (indexes.hasOwnProperty(i)) { + db.objectStore.createIndex(indexes.name, indexes.field, indexes.options); + } } - //Database is open and ready so fire dbopen event - me.fireEvent('updatedb', me, db); + //Database is open and ready so fire dbopen event + me.fireEvent('updatedb', me, db); }; } - me.fireEvent('dbopen', me, db); + me.fireEvent('dbopen', me, db); }; request.onfailure = me.onerror; }, - - /** + + /** * Universal error reporter for debugging purposes - * @param {Object} err Error object. + * @param {Object} err Error object. */ onError: function(err) { if (window.console) console.log(err); }, - /** + /** * Check if all needed config options are set */ - checkDependencies: function(){ - var me = this; + checkDependencies: function(){ + var me = this; window.p=me; if (!me.indexedDB) { me.fireEvent('noIdb'); Ext.Error.raise("IndexedDB is not supported in your browser."); } - if (!Ext.isString(me.dbName)) Ext.Error.raise("The dbName string has not been defined in your Ext.data.proxy.IndexedDB"); - if (!Ext.isString(me.objectStoreName)) Ext.Error.raise("The objectStoreName string has not been defined in your Ext.data.proxy.IndexedDB"); + if (!Ext.isString(me.dbName)) Ext.Error.raise("The dbName string has not been defined in your Ext.data.proxy.IndexedDB"); + if (!Ext.isString(me.objectStoreName)) Ext.Error.raise("The objectStoreName string has not been defined in your Ext.data.proxy.IndexedDB"); - return true; - }, + return true; + }, /** * Add initial data if set at {@link #initialData} @@ -182,16 +194,16 @@ Ext.define('Ext.data.proxy.IndexedDB', { this.addData(); }, - /** + /** * Add data when needed * Also add initial data if set at {@link #initialData} * @param {Array/Ext.data.Store} newData Data to add as array of objects or a store instance. Optional * @param {Boolean} clearFirst Clear existing data first */ - addData: function(newData, clearFirst) { - var me = this, - model = me.getModel().getName(), - data = newData || me.initialData; + addData: function(newData, clearFirst) { + var me = this, + model = me.getModel().getName(), + data = newData || me.initialData; //clear objectStore first if (clearFirst===true){ @@ -204,13 +216,13 @@ Ext.define('Ext.data.proxy.IndexedDB', { data = me.getDataFromStore(data); } - me.initialDataCount = data.length; - me.insertingInitialData = true; + me.initialDataCount = data.length; + me.insertingInitialData = true; - Ext.each(data, function(entry) { - Ext.ModelManager.create(entry, model).save(); - }) - }, + Ext.each(data, function(entry) { + Ext.ModelManager.create(entry, model).save(); + }) + }, /** * Get data from store. Usually from Server proxy. @@ -218,7 +230,7 @@ Ext.define('Ext.data.proxy.IndexedDB', { * Used at {@link #addData} * @private * @param {Ext.data.Store} store Store instance - * @return {Array} Array of raw data + * @return {Array} Array of raw data */ getDataFromStore: function(store) { var data = []; @@ -270,7 +282,7 @@ Ext.define('Ext.data.proxy.IndexedDB', { } }, - /** + /** * Injects data in operation instance */ readCallback: function(operation, records) { @@ -325,12 +337,12 @@ Ext.define('Ext.data.proxy.IndexedDB', { } }, - /** + /** * Create objectStore instance - * @param {String} type Transaction type (r, rw) - * @param {Function} callback Callback function - * @param {Object} scope Callback fn scope - * @return {Object} IDB objectStore instance + * @param {String} type Transaction type (r, rw) + * @param {Function} callback Callback function + * @param {Object} scope Callback fn scope + * @return {Object} IDB objectStore instance */ getObjectStore: function(type, callback, scope) { try { @@ -357,7 +369,7 @@ Ext.define('Ext.data.proxy.IndexedDB', { * Fetches a single record by id. * @param {Mixed} id Record id * @param {Function} callback Callback function - * @param {Object} scope Callback fn scope + * @param {Object} scope Callback fn scope */ getRecord: function(id, callback, scope) { var me = this, @@ -383,11 +395,11 @@ Ext.define('Ext.data.proxy.IndexedDB', { return true; }, - /** + /** * @private * Fetches all records * @param {Function} callback Callback function - * @param {Object} scope Callback fn scope + * @param {Object} scope Callback fn scope */ getAllRecords: function(callback, scope) { var me = this, @@ -431,21 +443,21 @@ Ext.define('Ext.data.proxy.IndexedDB', { if (!objectStore) return; - var request = objectStore.add(rawData); - - request.onsuccess = function() { - if (me.insertingInitialData) { - me.initialDataCount--; - if (me.initialDataCount === 0) { - me.insertingInitialData = false; - me.fireEvent('initialDataInserted'); - } - } - } + var request = objectStore.add(rawData); + + request.onsuccess = function() { + if (me.insertingInitialData) { + me.initialDataCount--; + if (me.initialDataCount === 0) { + me.insertingInitialData = false; + me.fireEvent('initialDataInserted'); + } + } + } }, - /** + /** * Updates the given record. * @param {Ext.data.Model} record The model instance */ @@ -516,10 +528,10 @@ Ext.define('Ext.data.proxy.IndexedDB', { me.removeRecord(cursor.key); cursor["continue"](); } - me.fireEvent('cleardb', me); - callback.call(scope || me); + me.fireEvent('cleardb', me); + callback.call(scope || me); }; - + } }); \ No newline at end of file diff --git a/sample/bdb-cell-editing.js b/sample/bdb-cell-editing.js index 54fd3f9..7991d02 100644 --- a/sample/bdb-cell-editing.js +++ b/sample/bdb-cell-editing.js @@ -1,19 +1,5 @@ -/* - -This file is part of Ext JS 4 - -Copyright (c) 2011 Sencha Inc - -Contact: http://www.sencha.com/contact - -GNU General Public License Usage -This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file. Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html. - -If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact. - -*/ Ext.Loader.setConfig({ - enabled: true + enabled : true }); Ext.Loader.setPath('Ext.ux', 'http://cdn.sencha.io/ext-4.0.2a/examples/ux'); @@ -26,130 +12,158 @@ Ext.require([ 'Ext.form.*' ]); -Ext.onReady(function(){ +Ext.onReady(function () { - function formatDate(value){ + function formatDate(value) { return value ? Ext.Date.dateFormat(value, 'M d, Y') : ''; } Ext.define('Company', { - extend: 'Ext.data.Model', - idProperty: 'id', - proxy: { - type: 'browserdb', - dbName: 'companies', - objectStoreName: 'company', - dbVersion: '1.19', - writer: { - type: 'json', - writeAllFields: false + extend : 'Ext.data.Model', + idProperty : 'id', + proxy : { + type : 'browserdb', + dbName : 'companies', + objectStoreName : 'company', + dbVersion : '1.21', + writer : { + type : 'json', + writeAllFields : false }, - initialData: [ - { - name: 'IBM', - employees: 33, - incorporation: new Date() - },{ - name: 'Hilton', - employees: 411, - incorporation: new Date() - } - ] - }, - fields: [ - {name: 'name', type: 'string'}, - {name: 'employees', type: 'int'}, - {name: 'incorporation', type: 'date'} - ] + initialData : [ + { + id : 1, + name : 'IBM', + employees : 33, + incorporation : new Date() + }, + { + id : 2, + name : 'Hilton', + employees : 411, + incorporation : new Date() + } + ] + }, + fields : [ + {name : 'name', type : 'string'}, + {name : 'employees', type : 'int'}, + {name : 'incorporation', type : 'date'} + ] }); // create the Data Store var store = Ext.create('Ext.data.Store', { // destroy the store if the grid is destroyed - autoDestroy: true, - autoSync: true, - autoLoad: true, - model: 'Company', - sorters: [{ - property: 'name', - direction:'ASC' - }] + autoDestroy : true, + autoSync : true, + autoLoad : true, + model : 'Company', + sorters : [ + { + property : 'name', + direction : 'ASC' + } + ] + }); + + Company.getProxy().on('initialDataInserted', function () { + store.load() }); - Company.getProxy().on('initialDataInserted', function() {store.load()}); - var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', { - clicksToEdit: 1 + clicksToEdit : 1 }); - var dateRenderer = function(v) { - return Ext.isDate(v)?Ext.Date.format(v, 'd-m-Y'):null; - } + var dateRenderer = function (v) { + return Ext.isDate(v) ? Ext.Date.format(v, 'd-m-Y') : null; + } // create the grid and specify what field you want // to use for the editor at each header. var grid = Ext.create('Ext.grid.Panel', { - store: store, - columns: [{ - id: 'common', - header: 'Common Name', - dataIndex: 'name', - flex: 2, - field: { - allowBlank: false - } - }, { - header: '# of employees', - dataIndex: 'employees', - flex: 1, - field: { - xtype: 'numberfield', - allowBlank: false - } - }, { - header: 'Incorporation date', - dataIndex: 'incorporation', - flex: 1, - renderer: dateRenderer, - field: { - xtype: 'datefield', - allowBlank: false, - format:'d-m-Y' - } - } - ], - selModel: { - selType: 'cellmodel' + store : store, + columns : [ + { + id : 'common', + header : 'Common Name', + dataIndex : 'name', + flex : 2, + field : { + allowBlank : false + } + }, + { + header : '# of employees', + dataIndex : 'employees', + flex : 1, + field : { + xtype : 'numberfield', + allowBlank : false + } + }, + { + header : 'Incorporation date', + dataIndex : 'incorporation', + flex : 1, + renderer : dateRenderer, + field : { + xtype : 'datefield', + allowBlank : false, + format : 'd-m-Y' + } + } + ], + selModel : { + selType : 'cellmodel' }, - renderTo: 'editor-grid', - width: 600, - height: 300, - title: 'Edit Companies', - frame: true, - tbar: [{ - text: 'Add Company', - handler : function(){ - // Create a record instance through the ModelManager - var ts = Ext.Date.format(new Date(), 'U'); - - var r = Ext.ModelManager.create({ - name: 'New Company 1', - id: ts - }, 'Company',ts); - r.save(); - store.insert(0, r); - cellEditing.startEditByPosition({row: 0, column: 0}); + renderTo : 'editor-grid', + width : 600, + height : 300, + title : 'Edit Companies', + frame : true, + tbar : [ + { + text : 'Add Company', + handler : function () { + // Create a record instance through the ModelManager + var ts = Ext.Date.format(new Date(), 'U'); + + var r = Ext.ModelManager.create({ + name : 'New Company 1', + id : ts + }, 'Company', ts); + r.save(); + store.insert(0, r); + cellEditing.startEditByPosition({row : 0, column : 0}); + } + }, + { + text : 'Clear database', + handler : function () { + var p = store.getProxy(); + p.clear(function () { + store.load(); + }); + } } - }, { - text: 'Clear database', - handler : function(){ - var p = store.getProxy(); - p.clear(function() { - store.load(); - }); - } - }], - plugins: [cellEditing] + ], + plugins : [cellEditing] }); }); + +// reload appcache when needed +if ('applicationCache' in window) { + + + window.addEventListener('load', function (e) { + var ac = applicationCache; + ac.addEventListener('updateready', function (e) { + if (ac.status === ac.UPDATEREADY) { + ac.swapCache(); + location.reload(); + } + }, false); + }, false); +} \ No newline at end of file diff --git a/sample/bdb.appcache b/sample/bdb.appcache index abc080c..f13f23a 100644 --- a/sample/bdb.appcache +++ b/sample/bdb.appcache @@ -1,14 +1,22 @@ CACHE MANIFEST -# 2011-01-04:v1 + +#version 1.36 5-13-2012 CACHE: index.html -http://cdn.sencha.io/ext-4.0.2a/resources/css/ext-all.css -http://cdn.sencha.io/ext-4.0.2a/examples/shared/example.css -http://cdn.sencha.io/ext-4.0.2a/examples/ux/css/CheckHeader.css -http://cdn.sencha.io/ext-4.0.2a/bootstrap.js -http://cdn.sencha.io/ext-4.0.2a/ext-all.js -../Ext.data.proxy.IndexedDB.js -../Ext.data.proxy.WebDB.js -../Ext.data.proxy.BrowserDB.js -bdb-cell-editing.js + +#style sheets +http://cdn.sencha.io/ext-4.1.0-gpl/examples/shared/example.css +http://cdn.sencha.io/ext-4.1.0-gpl/examples/ux/css/CheckHeader.css +http://cdn.sencha.io/ext-4.1.0-gpl/resources/css/ext-all.css + +#javascript files +http://cdn.sencha.io/ext-4.1.0-gpl/bootstrap.js +http://cdn.sencha.io/ext-4.1.0-gpl/ext-all-dev.js +Ext.data.proxy.IndexedDB.js +Ext.data.proxy.WebDB.js +Ext.data.proxy.BrowserDB.js +sample/bdb-cell-editing.js + +NETWORK: +* \ No newline at end of file diff --git a/sample/index.html b/sample/index.html index 404a8f4..6b54918 100644 --- a/sample/index.html +++ b/sample/index.html @@ -2,12 +2,19 @@ - Browser Database Proxy Example - - - + Browser Database Proxy Example (Ext JS 4.1.0) + + + - + + + + + + + +