Localstore proxy not removing indexes after records deleted

[micmac_creations]

Sencha Touch version tested:

• Sencha Touch 2.0.0

Browser versions tested against:

• Google Chrome (21.0.1155.2 dev)

Description:

I am having some trouble with a Sencha Touch data store and a localproxy. Basically, when a record is removed from the store, using the store.remove(record) method, the record itself is removed from memory, but the Id reference to it in the store is not removed, so when the page is refreshed, I receive a lovely "Uncaught TypeError: Cannot read property 'isModel' of undefined"

Steps to reproduce the problem:

• Create a store, with a localstorage proxy
• Add at least 2 items to the store
• Remove one of them using store.remove(record) method

The result that was expected:

• The record is removed from localstorage, and the Id removed from the localstore.

The result that occurs instead:

• The record is removed from localstorage, but the id is not removed from the store itself, so when the page is refreshed, the store throws an undefined exception

Test Case:

Here is the code for the store:

Ext.define("App.store.Data", {
    extend: "Ext.data.Store",
    requires: "Ext.data.proxy.LocalStorage",
    config: {
        model: "App.model.Data",
        autoSync: true,
        proxy: {
            type: 'localstorage',
            id: 'app-store'
        }
    }
});

Here is the code for the delete button on the data editor page

onDeleteHomeworkCommand: function () {

    var dataEditor = this.getDataEditor();
    var currentData = dataEditor.getRecord();
    var dataStore = Ext.getStore("Data");

    dataStore.remove(currentData);
    dataStore.sync();

    this.activateDataList();
},

Screenshot:

• Before the record is removed: http://i.imgur.com/HmOtT.png
• After the record is removed: http://i.imgur.com/VEmeq.png

Debugging already done:

• Manual removal of Ids from data store

Possible fix:

• Somehow get the data store to sync

Additional CSS used:

• only default

Operating System:

• Mac OSX 10.7.3

[mitchellsimoens]

The id item in localStorage gets removed for me using this test case using 2.0.0 and 2.0.1:

/**
 * This has been tested with ST 2.0.1
 *
 * This shows localstorage adding, removing, and loading
 */

Ext.define('TestModel', {
    extend : 'Ext.data.Model',

    config : {
        identifier : 'uuid',
        fields     : [
            'test'
        ]
    }
});

var store = new Ext.data.Store({
    autoLoad  : true,
    model     : 'TestModel',
    proxy     : {
        type : 'localstorage',
        id   : 'test'
    },
    listeners : {
        load : function (s) {
            console.log('Data loaded, store has ' + s.getCount() + ' items');
        }
    }
});

new Ext.Container({
    fullscreen : true,
    items      : [
        {
            xtype   : 'button',
            text    : 'Add Data',
            handler : function () {
                store.add([
                    { test : 'One'   },
                    { test : 'Two'   },
                    { test : 'Three' }
                ]);
                store.sync();

                console.log('Data added, store has ' + store.getCount() + ' items');
            }
        },
        {
            xtype   : 'button',
            text    : 'Remove First Record',
            handler : function () {
                var rec = store.getAt(0);
                store.remove(rec);
                store.sync();

                console.log('First record removed, store has ' + store.getCount() + ' items');
            }
        },
        {
            xtype   : 'button',
            text    : 'Clear Data',
            handler : function () {
                store.removeAll();
                store.sync();

                console.log('Data cleared, store has ' + store.getCount() + ' items');
            }
        },
        {
            xtype   : 'button',
            text    : 'Remove At Index',
            handler : function () {
                Ext.Msg.prompt('Index', 'What index to remove?', function (btn, index) {
                    if (btn === 'ok') {
                        store.removeAt(index);
                        store.sync();

                        console.log('Record removed at index ' + index + '. Store has ' + store.getCount() + ' items')
                    }
                });
            }
        },
        {
            xtype   : 'button',
            text    : 'Console Record Data',
            handler : function () {
                console.log('Record data:');

                store.each(function (record) {
                    console.log(record.getData());
                });
            }
        },
        {
            xtype   : 'button',
            text    : 'Alert Number of Records',
            handler : function () {
                alert('Data loaded, store has ' + store.getCount() + ' items');
            }
        }
    ]
});

[BigLittleFlan]

Hi,

I have the same problem as the original poster, could you elaborate on what you had to do to fix this?

My code:

Model:

Ext.define('App.model.User', {    extend: 'Ext.data.Model',


    config: {
        fields: [ 
			{ name: 'id', type: 'int'},
			{ name: 'fname', },
			{ name: 'sname', },
			{ name: 'email', },
			{ name: 'phone', },
			{ name: 'network', },
			{ name: 'password', },
			{ name: 'loggedIn' },
			{ name: 'app_auth' },
			{ name: 'bango_id' }
		]
    }
});

Store:

Ext.define('App.store.LocalUser', {
    extend: 'Ext.data.Store',


    config: {
        model: 'App.model.User',
		proxy : {
			type : 'localstorage',
			id : 'local-user'
		}
    }
});

Controller (I've tried both looping through and deleting all entries as well as using removeAll):

    doLogout: function() { 
        this.LocalUser = Ext.getStore('LocalUser');
        this.LocalUser.each(function(record){
            this.LocalUser.remove(record);
            this.LocalUser.sync();
        }, this);
        this.LocalUser.removeAll();
        this.LocalUser.sync();
        
       	this.showLogin();
    },

Local storage:

Before .sync:
before.jpg

After .sync:
after.jpg

[micmac_creations]

What version of ST are you using? After updating to 2.0.1.1, this bug was gone, and my app worked fine, so make sure your ST version is up to date.

[grzechu]

Hi,
I had the same issue after upgrading to ST 2.0.1.1 the problem was how model id's where generated :
in my ST 2.0.0 app my model was defined :

[...]
extend : "Ext.data.Model",
    config : {
        idProperty : "id",
        fields : [
            { name : "id", type : "int " },
[...]

and id where generated as int's :

var absoluteMaxId = myStore.max("id");
var personId = (absoluteMaxId == null) ? 0 : (absoluteMaxId + 1);

i had a clean id's under my controll

in ST 2.0.1.1 had to switch model def to :

[...]
extend : "Ext.data.Model",
    config : {
        idProperty : "id",
        identifier: "uuid",
        fields : [
            { name : "id", type : "auto" },                
[...]

i also had to remove my own way o generating id's

var absoluteMaxId = myStore.max("id");
var personId = (absoluteMaxId == null) ? 0 : (absoluteMaxId + 1);

because with my own id's ST 2.0.1.1 wouldn't remove indexes from the localstore

Now id's are generated with uuid's and its working ok, although i don't understand why was it changed in the new release if there were no problems (at least in my case)

[electrichead]

I think that this issue has to be re-opened. There are many of us with the same problem and the test case that Mitchell used was not the same as the one provided by OP.

The console.log returns the correct info, but the proxy is *not* cleared, which is visible using the web inspector of the browser. The ids of the deleted items stick around and cause an error on page refresh: Uncaught TypeError: Cannot read property 'isModel' of undefined

I am experiencing this on 2.0.1.1

The id item in localStorage gets removed for me using this test case using 2.0.0 and 2.0.1:

/**
 * This has been tested with ST 2.0.1
 *
 * This shows localstorage adding, removing, and loading
 */

Ext.define('TestModel', {
    extend : 'Ext.data.Model',

    config : {
        identifier : 'uuid',
        fields     : [
            'test'
        ]
    }
});

var store = new Ext.data.Store({
    autoLoad  : true,
    model     : 'TestModel',
    proxy     : {
        type : 'localstorage',
        id   : 'test'
    },
    listeners : {
        load : function (s) {
            console.log('Data loaded, store has ' + s.getCount() + ' items');
        }
    }
});

new Ext.Container({
    fullscreen : true,
    items      : [
        {
            xtype   : 'button',
            text    : 'Add Data',
            handler : function () {
                store.add([
                    { test : 'One'   },
                    { test : 'Two'   },
                    { test : 'Three' }
                ]);
                store.sync();

                console.log('Data added, store has ' + store.getCount() + ' items');
            }
        },
        {
            xtype   : 'button',
            text    : 'Remove First Record',
            handler : function () {
                var rec = store.getAt(0);
                store.remove(rec);
                store.sync();

                console.log('First record removed, store has ' + store.getCount() + ' items');
            }
        },
        {
            xtype   : 'button',
            text    : 'Clear Data',
            handler : function () {
                store.removeAll();
                store.sync();

                console.log('Data cleared, store has ' + store.getCount() + ' items');
            }
        },
        {
            xtype   : 'button',
            text    : 'Remove At Index',
            handler : function () {
                Ext.Msg.prompt('Index', 'What index to remove?', function (btn, index) {
                    if (btn === 'ok') {
                        store.removeAt(index);
                        store.sync();

                        console.log('Record removed at index ' + index + '. Store has ' + store.getCount() + ' items')
                    }
                });
            }
        },
        {
            xtype   : 'button',
            text    : 'Console Record Data',
            handler : function () {
                console.log('Record data:');

                store.each(function (record) {
                    console.log(record.getData());
                });
            }
        },
        {
            xtype   : 'button',
            text    : 'Alert Number of Records',
            handler : function () {
                alert('Data loaded, store has ' + store.getCount() + ' items');
            }
        }
    ]
});

[mitchellsimoens]

Give me a runnable testcase and I will test it

[pansiom]

QQ截图20130405171725.png