ExtJs 5 -- Setting the proxy for a store

Question

I have a Store where I am trying to define its proxy in the constructor, like so:

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

    constructor: function(config) {
        var prox = new Ext.data.proxy.Ajax();

        prox.setUrl('http://server:port/app/labs');
        prox.setHeaders({'Content-type': 'application/json'});
        prox.setReader({type: 'json',rootProperty: 'departmentList'});

        this.setProxy(prox);
        this.callParent(arguments);
    },

    autoLoad: false,

    model: 'App.model.Lab'
});

Unfortunately, this won't work. What does work, from my controller, is this:

var labStore = Ext.create("App.store.LabStore");
var url = 'http://server:port/app/labs';

labStore.getProxy().setUrl(url);

labStore.on('load','checkLabs',this);

labStore.load();

I realize that the latter method works and perhaps I should just move on but I do want to try to figure out why I cannot set the proxy in the constructor and/or what I'm doing wrong with that approach.

Thanks in advance!

Frank

Davor Zubak · Answer 1 · 2016-04-09T14:22:45.703

There is no need to define proxy in constructor. You can define all your properties in config object like so:

//define model
Ext.define('App.model.Lab', {
    extend: 'Ext.data.Model',
    fields: [{
        name: 'name',
        type: 'string'
    }, {
        name: 'closed',
        type: 'bool'
    }]
});

//define store
Ext.define('App.store.LabStore', {
    extend: 'Ext.data.Store',
    model: 'App.model.Lab',
    proxy: {
        type: 'ajax',
        url: 'labs.json',
        reader: {
            type: 'json',
            rootProperty: 'departmentList'
        }
    },
    autoLoad: false
});

//initialize store
var store = Ext.create('App.store.LabStore');

// load data from source
store.load();

Here is a fiddle

or you can pass the proxy config when creating store class, like so:

var store = Ext.create('App.store.LabStore', {
    proxy: {
        type: 'ajax',
        url: 'labs.json',
        reader: {
            type: 'json',
            rootProperty: 'departmentList'
        }
    }
});

but if you need to do it in a constructor you can:

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

    constructor: function(config) {

        config = Ext.applyIf({
            proxy: {
                type: 'ajax',
                url: 'labs.json',
                reader: {
                    type: 'json',
                    rootProperty: 'departmentList'
                }
            }
        }, config);

        this.callParent([config]);
    },
    autoLoad: false
});

Here is a fiddle

score 0 · Answer 2 · answered Mar 28 '16 at 21:48

The config parameter is used to initialise the Store. It includes, by default, an undefined proxy. I'd be about 90% sure that it's reseting the proxy during the call to the parent constructor.

Try setting the proxy into the config object instead.

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

  constructor: function(config) {
    var prox = new Ext.data.proxy.Ajax();

    prox.setUrl('http://server:port/app/labs');
    prox.setHeaders({'Content-type': 'application/json'});
    prox.setReader({type: 'json',rootProperty: 'departmentList'});

    config.proxy = prox;
    this.callParent(arguments);
  },

  autoLoad: false,

  model: 'App.model.Lab'
});

ExtJs 5 -- Setting the proxy for a store

2 Answers2