Results 1 to 5 of 5

Thread: Ext JS 6 and IndexedDB

  1. #1
    Sencha User
    Join Date
    Apr 2017
    Posts
    2

    Default Ext JS 6 and IndexedDB

    I want to migrate my app from Sencha Touch 2.4.2 to Ext JS 6.2.1 and apparently there is not anymore the Ext.data.proxy.SQL !

    This class has been removed between Ext JS 5.0.1 -> Ext JS 5.1 : https://docs.sencha.com/extjs/5.1.0/...f_changes.html

    I need a solution to store up to 50 Mb of data...

    1°) I would like to know if an IndexedDB proxy exists for Sencha Touch 2 or Ext JS 6?

    2°) Does Ext JS plan to develop an IndexedDB proxy?

    3°) How can I store such amount of data on a mobile phone?

    Thanks for your replies.



  2. #2
    Sencha Premium Member
    Join Date
    Nov 2007
    Posts
    16

    Default

    Hi,

    I wrote one a while ago for a Sencha Touch project I was working on... You're welcome to use it if you like.

    Code:
    /**
     * A Ext.data.proxy.Client extension for storing data in IndexedDB
     */
    
    window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
    window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
    window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
    
    Ext.define('MyApp.data.proxy.IndexedDbProxy', {
        extend: 'Ext.data.proxy.Client',
    
        alias: 'proxy.idb',
        alternateClassName: 'Ext.data.IdbProxy',
    
        config: {
            /**
             * The Database Name
             */
            databaseName: null,
    
            /**
             * The IndexedDB Object Store name. Defaults to the Model's name if not set
             */
            objectStoreName: null,
    
            /**
             * private
             */
            uniqueIdStrategy: false,
    
            /**
             * private
             */
            objectStoreExists: false
        },
    
        updateModel: function(model) {
            this.callParent(arguments);
    
            var me = this,
                modelName = model.modelName,
                osName = modelName.slice(modelName.lastIndexOf('.') + 1);
    
            //Default the objectStoreName to the class name of the Model
            if (!me.getObjectStoreName()) {
                me.setObjectStoreName(osName);
            }
    
            me.setUniqueIdStrategy(model.getIdentifier().isUnique);
        },
    
        checkObjectStoreExists: function(cb, args) {
            var me = this,
                vRequest,
                model = me.getModel(),
                osName = me.getObjectStoreName() || model.modelName.slice(model.modelName.lastIndexOf('.') + 1);
    
            var doUpgrade = function(e) {
                var keyPath = {
                    keyPath: model.getIdProperty(),
                    autoIncrement: !model.getIdentifier().isUnique
                },
                    os = e.target.result.createObjectStore(osName, keyPath);
            };
    
            if (!me.getObjectStoreExists()) {
                vRequest = indexedDB.open(me.getDatabaseName());
    
                vRequest.onupgradeneeded = doUpgrade;
    
                vRequest.onsuccess = function(e) {
                    var db = e.target.result,
                        name = db.name,
                        version = db.version,
                        osExists = db.objectStoreNames.contains(osName),
                        uRequest;
    
                    db.close();
    
                    if (!osExists) {
                        version += 1;
                        uRequest = indexedDB.open(me.getDatabaseName(), version);
                        uRequest.onupgradeneeded = doUpgrade;
    
                        uRequest.onsuccess = function(e) {
                            e.target.result.close();
                            me.setObjectStoreExists(true);
                            cb.apply(me, args);
                        };
                    } else {
                        me.setObjectStoreExists(true);
                        cb.apply(me, args);
                    }
                };
            }
    
            return me.getObjectStoreExists();
        },
    
        /**
         * create override
         */
        create: function(operation, callback, scope) {
            var me = this,
                records = operation.getRecords(),
                errors = [],
                data = [],
                createdRecords = [],
                executed = 0,
                totalRecords = records.length,
                result,
                uniqueIdStrategy = me.getUniqueIdStrategy(),
                transaction, store;
    
            if (!me.checkObjectStoreExists(me.create, arguments)) {
                return;
            }
    
            var onSuccess = function(e) {
                var db = e.target.result;
    
                operation.setStarted();
    
                transaction = db.transaction([me.getObjectStoreName()], "readwrite");
                store = transaction.objectStore(me.getObjectStoreName());
    
                result = new Ext.data.ResultSet({
                    records: createdRecords,
                    success: true
                });
    
                transaction.onerror = function(e) {
                    db.close();
                    if (operation.process(operation.getAction(), result) === false) {
                        me.fireEvent('exception', me, operation);
                    }
                    operation.setException(e.target.result);
                    if (typeof callback == 'function') {
                        callback.call(scope || me, operation);
                    }
                };
    
                Ext.each(records, function(record) {
                    var data = me.getRecordData(record),
                        request = store.add(data),
                        id = record.getId();
    
                    request.onerror = function(e) {
                        executed++;
    
                        errors.push({
                            clientId: id,
                            error: e.target.result
                        });
    
                        if (executed === totalRecords) {
                            db.close();
                            if (operation.process(operation.getAction(), result) === false) {
                                me.fireEvent('exception', me, operation);
                            }
                            operation.setException(errors);
                            if (typeof callback == 'function') {
                                callback.call(scope || me, operation);
                            }
                        }
                    };
    
                    request.onsuccess = function(e) {
                        executed++;
    
                        createdRecords.push({
                            clientId: id,
                            id: uniqueIdStrategy ? id : e.target.result,
                            data: data,
                            node: data
                        });
    
                        if (executed === totalRecords) {
                            db.close();
                            if (operation.process(operation.getAction(), result) === false) {
                                me.fireEvent('exception', me, operation);
                            }
                            if (errors.length > 0) {
                                operation.setException(errors);
                            }
                            if (typeof callback == 'function') {
                                callback.call(scope || me, operation);
                            }
                        }
                    };
    
                });
            };
    
            var oRequest = indexedDB.open(me.getDatabaseName());
            oRequest.onsuccess = onSuccess;
        },
    
        /**
         * read override
         */
        read: function(operation, callback, scope) {
            var me = this,
                model = me.getModel(),
                idProperty = model.getIdProperty(),
                params = operation.getParams() || {},
                id = params[idProperty],
                sorters = operation.getSorters(),
                filters = operation.getFilters(),
                page = operation.getPage(),
                start = operation.getStart(),
                limit = operation.getLimit(),
                records = [],
                count = 0,
                filtered, i, ln, transaction, store, cursor, result;
    
            if (!me.checkObjectStoreExists(me.read, arguments)) {
                return;
            }
    
            var onSuccess = function(e) {
                var db = e.target.result;
    
                operation.setStarted();
    
                transaction = db.transaction([me.getObjectStoreName()], "readonly");
                store = transaction.objectStore(me.getObjectStoreName());
    
                result = new Ext.data.ResultSet({
                    records: records,
                    success: true
                });
    
    
                //TODO use indexes for valid filters?
                cursor = store.openCursor();
    
                cursor.onsuccess = function(e) {
                    var c = e.target.result,
                        data = {};
    
                    if (c === null) {
                        db.close();
                        result.setSuccess(true);
                        result.setTotal(count);
                        result.setCount(count);
    
                        if (operation.process(operation.getAction(), result) === false) {
                            me.fireEvent('exception', me, operation);
                        }
    
                        if (filters && filters.length) {
                            filtered = Ext.create('Ext.util.Collection', function(record) {
                                return record.getId();
                            });
                            filtered.setFilterRoot('data');
                            for (i = 0, ln = filters.length; i < ln; i++) {
                                filtered.addFilter(filters[i]);
                            }
                            filtered.addAll(operation.getRecords());
    
                            operation.setRecords(filtered.items.slice());
                            resultSet.setRecords(operation.getRecords());
                            resultSet.setCount(filtered.items.length);
                            resultSet.setTotal(filtered.items.length);
                        }
    
                        if (typeof callback == 'function') {
                            callback.call(scope || me, operation);
                        }
                        return;
                    }
    
                    for (var f in c.value) {
                        data[f] = c.value[f];
                    }
                    records.push({
                        clientId: null,
                        id: data[idProperty],
                        data: data,
                        node: data
                    });
                    count++;
                    c['continue']();
                };
    
                //TODO errors
                cursor.onerror = function(e) {
                    //console.debug(e);
                };
    
                transaction.onerror = function(e) {
                    db.close();
                    operation.setException(e.target.result);
                    if (typeof callback == 'function') {
                        callback.call(scope || me, operation);
                    }
                };
            };
    
            var oRequest = indexedDB.open(me.getDatabaseName());
            oRequest.onsuccess = onSuccess;
    
        },
    
        /**
         * update override
         */
        update: function(operation, callback, scope) {
            var me = this,
                records = operation.getRecords(),
                errors = [],
                data = [],
                updatedRecords = [],
                executed = 0,
                totalRecords = records.length,
                result,
                transaction, store;
    
            if (!me.checkObjectStoreExists(me.update, arguments)) {
                return;
            }
    
            var onSuccess = function(e) {
                var db = e.target.result;
    
                operation.setStarted();
    
                transaction = db.transaction([me.getObjectStoreName()], "readwrite");
                store = transaction.objectStore(me.getObjectStoreName());
    
                result = new Ext.data.ResultSet({
                    records: updatedRecords,
                    success: true
                });
    
                transaction.onerror = function(e) {
                    if (operation.process(operation.getAction(), result) === false) {
                        me.fireEvent('exception', me, operation);
                    }
                    operation.setException(e.target.result);
                };
    
                Ext.each(records, function(record) {
                    var data = me.getRecordData(record),
                        request = store.put(data),
                        id = record.getId();
    
                    request.onerror = function(e) {
                        executed++;
    
                        errors.push({
                            clientId: id,
                            error: e.target.result
                        });
    
                        if (executed === totalRecords) {
                            db.close();
                            if (operation.process(operation.getAction(), result) === false) {
                                me.fireEvent('exception', me, operation);
                            }
                            operation.setException(errors);
                            if (typeof callback == 'function') {
                                callback.call(scope || me, operation);
                            }
                        }
                    };
    
                    request.onsuccess = function(e) {
                        executed++;
    
                        updatedRecords.push({
                            clientId: id,
                            id: id,
                            data: data,
                            node: data
                        });
    
                        if (executed === totalRecords) {
                            db.close();
                            if (operation.process(operation.getAction(), result) === false) {
                                me.fireEvent('exception', me, operation);
                            }
                            if (errors.length > 0) {
                                operation.setException(errors);
                            }
                            if (typeof callback == 'function') {
                                callback.call(scope || me, operation);
                            }
                        }
                    };
    
                });
            };
    
            var oRequest = indexedDB.open(me.getDatabaseName());
            oRequest.onsuccess = onSuccess;
        },
    
        /**
         * destroy override
         */
        destroy: function(operation, callback, scope) {
            var me = this,
                records = operation.getRecords(),
                errors = [],
                data = [],
                destroyedRecords = [],
                executed = 0,
                totalRecords = records.length,
                result,
                uniqueIdStrategy = me.getUniqueIdStrategy(),
                transaction, store;
    
            if (!me.checkObjectStoreExists(me.destroy, arguments)) {
                return;
            }
    
            var onSuccess = function(e) {
                var db = e.target.result;
    
                operation.setStarted();
    
                result = new Ext.data.ResultSet({
                    records: destroyedRecords,
                    success: true
                });
    
                transaction = db.transaction([me.getObjectStoreName()], "readwrite");
                store = transaction.objectStore(me.getObjectStoreName());
    
                transaction.onerror = function(e) {
                    db.close();
                    if (operation.process(operation.getAction(), result) === false) {
                        me.fireEvent('exception', me, operation);
                    }
                    operation.setException(e.target.result);
                    if (typeof callback == 'function') {
                        callback.call(scope || me, operation);
                    }
                };
    
                Ext.each(records, function(record) {
                    var id = record.getId();
                    request = store['delete'](id);
    
                    request.onerror = function(e) {
                        executed++;
    
                        errors.push({
                            clientId: id,
                            error: e.target.result
                        });
    
                        if (executed === totalRecords) {
                            db.close();
                            if (operation.process(operation.getAction(), result) === false) {
                                me.fireEvent('exception', me, operation);
                            }
                            operation.setException(errors);
                            if (typeof callback == 'function') {
                                callback.call(scope || me, operation);
                            }
                        }
                    };
    
                    request.onsuccess = function(e) {
                        executed++;
    
                        destroyedRecords.push({
                            clientId: id,
                            id: id,
                            data: data,
                            node: data
                        });
    
                        if (executed === totalRecords) {
                            db.close();
                            if (operation.process(operation.getAction(), result) === false) {
                                me.fireEvent('exception', me, operation);
                            }
                            if (errors.length > 0) {
                                operation.setException(errors);
                            }
                            if (typeof callback == 'function') {
                                callback.call(scope || me, operation);
                            }
                        }
                    };
    
                });
            };
    
            var oRequest = indexedDB.open(me.getDatabaseName());
            oRequest.onsuccess = onSuccess;
    
        },
    
        /**
         * @private
         * Bundle model data up into an object to write to in IndexedDB Object Store.
         */
        getRecordData: function(record) {
            var me = this,
                fields = record.getFields(),
                idProperty = record.getIdProperty(),
                data = {},
                name, value;
    
            fields.each(function(field) {
                if (field.getPersist()) {
                    name = field.getName();
                    if (name === idProperty && !me.getUniqueIdStrategy()) {
                        return;
                    }
                    value = record.get(name);
                    data[name] = value;
                }
            }, me);
    
            return data;
        }
    
    });
    I've created a fiddle as an example for its use at: https://fiddle.sencha.com/#view/editor&fiddle/1tpo.
    Last edited by Jesfery; 11 Apr 2017 at 3:09 PM. Reason: sorry... wrong fillde

  3. #3
    Sencha User
    Join Date
    Apr 2017
    Posts
    2

    Default

    Thanks, Jesfery.

  4. #4
    Sencha Premium User wemerson.januario's Avatar
    Join Date
    Nov 2008
    Location
    Goiânia - GO, Brazil
    Posts
    898
    Answers
    15

    Default

    any update for Ext JS 6.x?
    Wemerson Januario @JanuarioCoder
    Novanti Tecnologia, Sencha MVP/ Ext JS Consultant
    ____________________________________________
    Hire me on UpWork:

    GitHub
    https://github.com/wemersonjanuario

    Treinamento e Consultoria Ext JS. QUALIFIQUE-SE JÁ!

  5. #5
    Sencha User
    Join Date
    Aug 2011
    Posts
    14
    Answers
    1

    Default

    Hi, this proxy is not working on ExtJs 6.
    On the "updateModel" function the "model" parameter don't have the same properties than in touch framework.

    do you have any updated code?

    thanks in advanced.


    Quote Originally Posted by Jesfery View Post
    Hi,

    I wrote one a while ago for a Sencha Touch project I was working on... You're welcome to use it if you like.

    Code:
    /**
     * A Ext.data.proxy.Client extension for storing data in IndexedDB
     */
    
    window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
    window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
    window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
    
    Ext.define('MyApp.data.proxy.IndexedDbProxy', {
        extend: 'Ext.data.proxy.Client',
    
        alias: 'proxy.idb',
        alternateClassName: 'Ext.data.IdbProxy',
    
        config: {
            /**
             * The Database Name
             */
            databaseName: null,
    
            /**
             * The IndexedDB Object Store name. Defaults to the Model's name if not set
             */
            objectStoreName: null,
    
            /**
             * private
             */
            uniqueIdStrategy: false,
    
            /**
             * private
             */
            objectStoreExists: false
        },
    
        updateModel: function(model) {
            this.callParent(arguments);
    
            var me = this,
                modelName = model.modelName,
                osName = modelName.slice(modelName.lastIndexOf('.') + 1);
    
            //Default the objectStoreName to the class name of the Model
            if (!me.getObjectStoreName()) {
                me.setObjectStoreName(osName);
            }
    
            me.setUniqueIdStrategy(model.getIdentifier().isUnique);
        },
    
        checkObjectStoreExists: function(cb, args) {
            var me = this,
                vRequest,
                model = me.getModel(),
                osName = me.getObjectStoreName() || model.modelName.slice(model.modelName.lastIndexOf('.') + 1);
    
            var doUpgrade = function(e) {
                var keyPath = {
                    keyPath: model.getIdProperty(),
                    autoIncrement: !model.getIdentifier().isUnique
                },
                    os = e.target.result.createObjectStore(osName, keyPath);
            };
    
            if (!me.getObjectStoreExists()) {
                vRequest = indexedDB.open(me.getDatabaseName());
    
                vRequest.onupgradeneeded = doUpgrade;
    
                vRequest.onsuccess = function(e) {
                    var db = e.target.result,
                        name = db.name,
                        version = db.version,
                        osExists = db.objectStoreNames.contains(osName),
                        uRequest;
    
                    db.close();
    
                    if (!osExists) {
                        version += 1;
                        uRequest = indexedDB.open(me.getDatabaseName(), version);
                        uRequest.onupgradeneeded = doUpgrade;
    
                        uRequest.onsuccess = function(e) {
                            e.target.result.close();
                            me.setObjectStoreExists(true);
                            cb.apply(me, args);
                        };
                    } else {
                        me.setObjectStoreExists(true);
                        cb.apply(me, args);
                    }
                };
            }
    
            return me.getObjectStoreExists();
        },
    
        /**
         * create override
         */
        create: function(operation, callback, scope) {
            var me = this,
                records = operation.getRecords(),
                errors = [],
                data = [],
                createdRecords = [],
                executed = 0,
                totalRecords = records.length,
                result,
                uniqueIdStrategy = me.getUniqueIdStrategy(),
                transaction, store;
    
            if (!me.checkObjectStoreExists(me.create, arguments)) {
                return;
            }
    
            var onSuccess = function(e) {
                var db = e.target.result;
    
                operation.setStarted();
    
                transaction = db.transaction([me.getObjectStoreName()], "readwrite");
                store = transaction.objectStore(me.getObjectStoreName());
    
                result = new Ext.data.ResultSet({
                    records: createdRecords,
                    success: true
                });
    
                transaction.onerror = function(e) {
                    db.close();
                    if (operation.process(operation.getAction(), result) === false) {
                        me.fireEvent('exception', me, operation);
                    }
                    operation.setException(e.target.result);
                    if (typeof callback == 'function') {
                        callback.call(scope || me, operation);
                    }
                };
    
                Ext.each(records, function(record) {
                    var data = me.getRecordData(record),
                        request = store.add(data),
                        id = record.getId();
    
                    request.onerror = function(e) {
                        executed++;
    
                        errors.push({
                            clientId: id,
                            error: e.target.result
                        });
    
                        if (executed === totalRecords) {
                            db.close();
                            if (operation.process(operation.getAction(), result) === false) {
                                me.fireEvent('exception', me, operation);
                            }
                            operation.setException(errors);
                            if (typeof callback == 'function') {
                                callback.call(scope || me, operation);
                            }
                        }
                    };
    
                    request.onsuccess = function(e) {
                        executed++;
    
                        createdRecords.push({
                            clientId: id,
                            id: uniqueIdStrategy ? id : e.target.result,
                            data: data,
                            node: data
                        });
    
                        if (executed === totalRecords) {
                            db.close();
                            if (operation.process(operation.getAction(), result) === false) {
                                me.fireEvent('exception', me, operation);
                            }
                            if (errors.length > 0) {
                                operation.setException(errors);
                            }
                            if (typeof callback == 'function') {
                                callback.call(scope || me, operation);
                            }
                        }
                    };
    
                });
            };
    
            var oRequest = indexedDB.open(me.getDatabaseName());
            oRequest.onsuccess = onSuccess;
        },
    
        /**
         * read override
         */
        read: function(operation, callback, scope) {
            var me = this,
                model = me.getModel(),
                idProperty = model.getIdProperty(),
                params = operation.getParams() || {},
                id = params[idProperty],
                sorters = operation.getSorters(),
                filters = operation.getFilters(),
                page = operation.getPage(),
                start = operation.getStart(),
                limit = operation.getLimit(),
                records = [],
                count = 0,
                filtered, i, ln, transaction, store, cursor, result;
    
            if (!me.checkObjectStoreExists(me.read, arguments)) {
                return;
            }
    
            var onSuccess = function(e) {
                var db = e.target.result;
    
                operation.setStarted();
    
                transaction = db.transaction([me.getObjectStoreName()], "readonly");
                store = transaction.objectStore(me.getObjectStoreName());
    
                result = new Ext.data.ResultSet({
                    records: records,
                    success: true
                });
    
    
                //TODO use indexes for valid filters?
                cursor = store.openCursor();
    
                cursor.onsuccess = function(e) {
                    var c = e.target.result,
                        data = {};
    
                    if (c === null) {
                        db.close();
                        result.setSuccess(true);
                        result.setTotal(count);
                        result.setCount(count);
    
                        if (operation.process(operation.getAction(), result) === false) {
                            me.fireEvent('exception', me, operation);
                        }
    
                        if (filters && filters.length) {
                            filtered = Ext.create('Ext.util.Collection', function(record) {
                                return record.getId();
                            });
                            filtered.setFilterRoot('data');
                            for (i = 0, ln = filters.length; i < ln; i++) {
                                filtered.addFilter(filters[i]);
                            }
                            filtered.addAll(operation.getRecords());
    
                            operation.setRecords(filtered.items.slice());
                            resultSet.setRecords(operation.getRecords());
                            resultSet.setCount(filtered.items.length);
                            resultSet.setTotal(filtered.items.length);
                        }
    
                        if (typeof callback == 'function') {
                            callback.call(scope || me, operation);
                        }
                        return;
                    }
    
                    for (var f in c.value) {
                        data[f] = c.value[f];
                    }
                    records.push({
                        clientId: null,
                        id: data[idProperty],
                        data: data,
                        node: data
                    });
                    count++;
                    c['continue']();
                };
    
                //TODO errors
                cursor.onerror = function(e) {
                    //console.debug(e);
                };
    
                transaction.onerror = function(e) {
                    db.close();
                    operation.setException(e.target.result);
                    if (typeof callback == 'function') {
                        callback.call(scope || me, operation);
                    }
                };
            };
    
            var oRequest = indexedDB.open(me.getDatabaseName());
            oRequest.onsuccess = onSuccess;
    
        },
    
        /**
         * update override
         */
        update: function(operation, callback, scope) {
            var me = this,
                records = operation.getRecords(),
                errors = [],
                data = [],
                updatedRecords = [],
                executed = 0,
                totalRecords = records.length,
                result,
                transaction, store;
    
            if (!me.checkObjectStoreExists(me.update, arguments)) {
                return;
            }
    
            var onSuccess = function(e) {
                var db = e.target.result;
    
                operation.setStarted();
    
                transaction = db.transaction([me.getObjectStoreName()], "readwrite");
                store = transaction.objectStore(me.getObjectStoreName());
    
                result = new Ext.data.ResultSet({
                    records: updatedRecords,
                    success: true
                });
    
                transaction.onerror = function(e) {
                    if (operation.process(operation.getAction(), result) === false) {
                        me.fireEvent('exception', me, operation);
                    }
                    operation.setException(e.target.result);
                };
    
                Ext.each(records, function(record) {
                    var data = me.getRecordData(record),
                        request = store.put(data),
                        id = record.getId();
    
                    request.onerror = function(e) {
                        executed++;
    
                        errors.push({
                            clientId: id,
                            error: e.target.result
                        });
    
                        if (executed === totalRecords) {
                            db.close();
                            if (operation.process(operation.getAction(), result) === false) {
                                me.fireEvent('exception', me, operation);
                            }
                            operation.setException(errors);
                            if (typeof callback == 'function') {
                                callback.call(scope || me, operation);
                            }
                        }
                    };
    
                    request.onsuccess = function(e) {
                        executed++;
    
                        updatedRecords.push({
                            clientId: id,
                            id: id,
                            data: data,
                            node: data
                        });
    
                        if (executed === totalRecords) {
                            db.close();
                            if (operation.process(operation.getAction(), result) === false) {
                                me.fireEvent('exception', me, operation);
                            }
                            if (errors.length > 0) {
                                operation.setException(errors);
                            }
                            if (typeof callback == 'function') {
                                callback.call(scope || me, operation);
                            }
                        }
                    };
    
                });
            };
    
            var oRequest = indexedDB.open(me.getDatabaseName());
            oRequest.onsuccess = onSuccess;
        },
    
        /**
         * destroy override
         */
        destroy: function(operation, callback, scope) {
            var me = this,
                records = operation.getRecords(),
                errors = [],
                data = [],
                destroyedRecords = [],
                executed = 0,
                totalRecords = records.length,
                result,
                uniqueIdStrategy = me.getUniqueIdStrategy(),
                transaction, store;
    
            if (!me.checkObjectStoreExists(me.destroy, arguments)) {
                return;
            }
    
            var onSuccess = function(e) {
                var db = e.target.result;
    
                operation.setStarted();
    
                result = new Ext.data.ResultSet({
                    records: destroyedRecords,
                    success: true
                });
    
                transaction = db.transaction([me.getObjectStoreName()], "readwrite");
                store = transaction.objectStore(me.getObjectStoreName());
    
                transaction.onerror = function(e) {
                    db.close();
                    if (operation.process(operation.getAction(), result) === false) {
                        me.fireEvent('exception', me, operation);
                    }
                    operation.setException(e.target.result);
                    if (typeof callback == 'function') {
                        callback.call(scope || me, operation);
                    }
                };
    
                Ext.each(records, function(record) {
                    var id = record.getId();
                    request = store['delete'](id);
    
                    request.onerror = function(e) {
                        executed++;
    
                        errors.push({
                            clientId: id,
                            error: e.target.result
                        });
    
                        if (executed === totalRecords) {
                            db.close();
                            if (operation.process(operation.getAction(), result) === false) {
                                me.fireEvent('exception', me, operation);
                            }
                            operation.setException(errors);
                            if (typeof callback == 'function') {
                                callback.call(scope || me, operation);
                            }
                        }
                    };
    
                    request.onsuccess = function(e) {
                        executed++;
    
                        destroyedRecords.push({
                            clientId: id,
                            id: id,
                            data: data,
                            node: data
                        });
    
                        if (executed === totalRecords) {
                            db.close();
                            if (operation.process(operation.getAction(), result) === false) {
                                me.fireEvent('exception', me, operation);
                            }
                            if (errors.length > 0) {
                                operation.setException(errors);
                            }
                            if (typeof callback == 'function') {
                                callback.call(scope || me, operation);
                            }
                        }
                    };
    
                });
            };
    
            var oRequest = indexedDB.open(me.getDatabaseName());
            oRequest.onsuccess = onSuccess;
    
        },
    
        /**
         * @private
         * Bundle model data up into an object to write to in IndexedDB Object Store.
         */
        getRecordData: function(record) {
            var me = this,
                fields = record.getFields(),
                idProperty = record.getIdProperty(),
                data = {},
                name, value;
    
            fields.each(function(field) {
                if (field.getPersist()) {
                    name = field.getName();
                    if (name === idProperty && !me.getUniqueIdStrategy()) {
                        return;
                    }
                    value = record.get(name);
                    data[name] = value;
                }
            }, me);
    
            return data;
        }
    
    });
    I've created a fiddle as an example for its use at: https://fiddle.sencha.com/#view/editor&fiddle/1tpo.

Similar Threads

  1. Store indexedDB
    By ci11111 in forum Sencha Touch 2.x: Q&A
    Replies: 2
    Last Post: 9 Jun 2017, 5:58 PM
  2. IndexedDB proxy
    By yupitz in forum Sencha Touch 2.x: Q&A
    Replies: 4
    Last Post: 9 Jun 2017, 5:54 PM
  3. IndexedDB Proxy Ext.data.proxy.IndexedDB
    By grgur in forum Ext:User Extensions and Plugins
    Replies: 16
    Last Post: 9 Jun 2017, 10:56 AM
  4. IndexedDB proxy for sencha touch
    By yupitz in forum Sencha Touch 2.x: Examples and Showcases
    Replies: 4
    Last Post: 16 Apr 2015, 5:45 PM
  5. How to implement the IndexedDB with GXT grid
    By praveen_anugula in forum Sencha GXT Q&A
    Replies: 0
    Last Post: 11 Feb 2014, 7:23 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •