EXT JS get json data asynchronously and load store using ajax proxy

Question

Firstly, I am an extjs beginner. I am having trouble loading my store using an ajax proxy.

Here is my model.

        Ext.define('alertTemplates', {
        extend: 'Ext.data.Model',
        fields: ['text','config', {name: 'label', convert: function(v,record) {
            if (Ext.isEmpty(record.data.text))
                return nodeTemplate.apply(record.data.config);
            else return record.data.text;
        }}]
    });

Attemping to load the store

        var store = Ext.create('Ext.data.TreeStore', {
        model: 'alertTemplates',
        proxy:{
            type: 'ajax',
            url: '/alfresco/service/alertTemplates.json?alf_ticket=' + user.authTicket,
            reader:{
                root:'children',
                type: 'json'
            },
            autoLoad: true,
            excludeContext: true,
            method: 'GET',
            params: {
                nodeRef: currentProject.nodeRef
            },
            scope: this,
            listeners: {
                load: function(){
                    console.log('loaded');
                }
            }
        }
    });

    store.load();

I know I am properly retrieving the data. I used the code below before and the response contained the json code I am trying to get. Am I approaching this the right way?

        Jx.Utils.ajax({
        url: '/alfresco/service/alertTemplates.json?alf_ticket=' + user.authTicket,
        excludeContext: true,
        method: 'GET',
        params: {
            nodeRef: currentProject.nodeRef
        },
        scope: this,
        success: function (response)
        {
            var alertTemplates = response.json;
            console.log(alertTemplates);

            store.loadRawData(alertTemplates,true);

        },
        failure:  console.log('failed')
    });

Elliott Elliott · Accepted Answer · 2014-07-29T15:47:32

A few things I noticed in the store:

autoLoad needs to be at the store level, not inside proxy:.
The listener needs to be outside of proxy:.
method: needs to be inside proxy:.

Also, I'm not sure what excludeContext is. Which version of EXTJS are you using?

Here's a little re-org to give you an idea. You don't need to load it manually if autoLoad is true.

var store = Ext.create('Ext.data.TreeStore', {
    model: 'alertTemplates',
    autoLoad: true,
    proxy:{
        type: 'ajax',
        url: '/alfresco/service/alertTemplates.json?alf_ticket=' + user.authTicket,
        method: 'GET',
        reader:{
            root:'children',
            type: 'json'
        },
        //excludeContext: true,
        params: {
        nodeRef: currentProject.nodeRef
        }
    },
    scope: this,
    listeners: {
        load: function(){
            console.log('loaded');
        }
    }
});

EXT JS get json data asynchronously and load store using ajax proxy

1 Answers