ExtJS 4.1.1a : JsonStore + proxy + url = "Cannot call method 'indexOf' of undefined"

Question

This code block works :

Ext.define('MyApp.store.MyJsonStore', {
    extend: 'Ext.data.Store',
    fields: ['fieldName'],
    proxy: {
        type: 'ajax',
        url: 'json.php',
        reader: 'json'
    }
});

This one crashes :

Ext.define('MyApp.store.MyJsonStore', {
    extend: 'Ext.data.JsonStore',
    fields: ['fieldName'],
    proxy: {
        type: 'ajax',
        url: 'json.php',
        reader: 'json'
    }
});

Here is the place where the problem occurs :

enter image description here

Am I doing something wrong?

score 4 · Accepted Answer · answered Jan 17 '13 at 17:49

4

JsonStore is somewhat of a red zone in the ExtJs library...

If you look at the source of JsonStore, you'll see:

constructor: function(config) {
    config = Ext.apply({
        proxy: {
            type  : 'ajax',
            reader: 'json',
            writer: 'json'
        }
    }, config);
    this.callParent([config]);
}

Practically the store overrides your own config.

Honestly, I can hardly think why would you prefer JsonStore over Ext.data.Store. Json is more of a reader thing from a design point of view - a store simply stores records.

I only use Ext.data.Store and Ext.data.TreeStore in my apps.

answered Jan 17 '13 at 17:49

Izhaki

23,372
9
69
107

I recently switched from 4.1.0 to 4.1.1 to get the compiler and MVC features. With the prevent version this code was right. Thanks for your explaination, I'm ok now. – Jan 17 '13 at 18:34
JSON Store sucks! I wasted one full day for this non sense. It used to work well in earlier versions – hop Aug 23 '13 at 13:13

Kevin Cooper · Answer 2 · 2013-06-12T17:00:35.150

I was having a similar issue in Ext JS 4.2.1 with a JsonP store, caused by not setting the URL in the initial store config. I was creating the URL dynamically passing it in during the load:

myStore.load({ url: 'json.php' });

That caused it to successfully load the passed URL but I also got the exact same error and stack trace that you have, and the data never actually displayed (I could only see it through Chrome Developer Tools). I solved the problem by using the following code:

myStore.proxy.url = 'json.php';
myStore.load();

I know we aren't doing exactly the same thing, but the errors we got are identical so hopefully this can at least point you in the right direction.

UPDATE

As it turns out, the issue actually stemmed from a ComboBox that was auto-loading its values. It would try to re-load the values when I clicked on it, and even though I had successfully loaded them the first time by passing the URL in the load({ }) call, it was using its own load method which used the proxy URL (which was undefined). This is why setting the proxy URL stopped the error.

The real solution for me was the prevent the ComboBox from auto-loading, by setting the queryMode config to local.

I'm sorry but I don't remember the context, many time has spent since this issue occured. Anyway, thank you for your contribution, this could surely help somebody. — , Jun 13 '13 at 09:51

ExtJS 4.1.1a : JsonStore + proxy + url = "Cannot call method 'indexOf' of undefined"

2 Answers2