ExtJS localstorage proxy model/store issue

Question

I'm using ExtJS 5.1.0 and running into a strange problem.

I have the following model:

Ext.define('cardioCatalogQT.model.Load', {
    extend: 'Ext.data.Model',

    config:{
        idProperty: 'id',
        fields: [
            {name: 'key', type: 'string'},
            {name: 'comparator', type: 'string'},
            {name: 'value', type: 'string'},
            {name: 'type', type: 'string'}
        ]

    }
});

And the Store:

Ext.define('cardioCatalogQT.store.Payload', {
    extend: 'Ext.data.Store',
    alias: 'store.Payload',
    // add package.framework=ext to .sencha/app/sencha.cfg
    config:{

        model: 'cardioCatalogQT.model.Load',
        storeId: 'Payload',
        autoLoad: true,

        proxy: {
            type: 'localstorage'
        }
    }
});

When I add a record to the store:

var payload = Ext.create('cardioCatalogQT.store.Payload');

payload.add({
    type: 'dx',
    key: item.data.code,
    comparator: 'eq',
    value: item.data.description
});

payload.sync();

The data in localstorage look like all the records except for #7 and #11 in the attached image

enter image description here

However, when I add the field elements to the store like this:

Ext.define('cardioCatalogQT.store.Payload', {
    extend: 'Ext.data.Store',
    alias: 'store.Payload',
    // add package.framework=ext to .sencha/app/sencha.cfg
    config:{
        idProperty: 'id',
        fields: [
            {name: 'type', type: 'string'},
            {name: 'key', type: 'string'},
            {name: 'comparator', type: 'string'},
            {name: 'value', type: 'string'}
        ] ,

        //model: 'cardioCatalogQT.model.Load',
        storeId: 'Payload',
        autoLoad: true,

        proxy: {
            type: 'localstorage'
        }
    }
});

I get the desired results in 7 and 11.

One other issue, is instead of giving an actual name to the model record, I get the very not useful name of ext-data-proxy-localstorage-N for the model instance.

Also, I am getting this error when referencing the model via the store:

[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (cardioCatalogQT.model.Load, line 0)

I have done a sencha app build and no errors were thrown.

Any idea as to what I am doing wrong (I am basically doing what I've done with Sencha Touch, where I had much success)? Is this a bug, perhaps?

For the 404 error : shouldn't the model declaration in the store be just short model : Load ? — Lorenz Meyer
Interesting. I didn't try this. I had assumed (possibly erroneously) that I had to provide the full namespace. — horcle_buzz

horcle_buzz horcle_buzz · Accepted Answer · 2015-03-20T02:02:46

Issue was for ExtJS, to get the desired name on the store, you have to specify and id in the proxy:

 proxy: {
            type: 'localstorage',
            id  : 'payload'
        }

Now, the model instances in my localstorage are showing up as desired, and I can query them using standard methods, like findRecord. Good times!

Moral of the story: ExtJS has different behaviors than Touch

ExtJS localstorage proxy model/store issue

1 Answers