ExtJS 4.2 - Error Loading Store From Command - Data Returned From Service - MVC Setup

Question

I am having all sorts of issues learning ExtJS (I am a flex Dev). Currently, I am unsure how to load a store from a command. I have a command where I make a service call and get the data. I then want to load the model with this data (from inside the command).

My code...

PhoneCallsLoadCommand.js: (COMMAND)

Ext.define('DG.controller.PhoneCallsLoadCommand', {
    extend: 'Ext.app.Controller',
    stores: ['PhoneCalls'],
    models: ['PhoneCall'],

    views: [
        'PhoneCallListView'
    ],

    init: function () {
        var url2 = "https://MyServiceURLWSDL";
        var pl = new SOAPClientParameters();
        pl.add("arg0", false);

        SOAPClient.invoke(url2, "gePaymentsMethod", pl, true, getDataCallback);

        function getDataCallback(response) {
        // This is where I want to load the response data into the Model
            var store = Ext.getStore('phoneCallsStore');
            store.loadData(response);
        }
    }
});

Here is the response XML data returned from the service call:

<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/">
   <soapenv:Body>
      <dlwmin:getPaymentsMethod xmlns:dlwmin="http://blahblah.com/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
         <return>
            <contents>
               <eftAcctNo>501014635986</eftAcctNo>
               <empSsn>122400724</eftAcctRoutNo>
            </contents>
            <contents>
               <eftAcctNo></eftAcctNo>
               <empSsn></eftAcctRoutNo>
            </contents>
            <contents>
               <eftAcctNo></eftAcctNo>
               <empSsn></eftAcctRoutNo>
            </contents>
            <status>0</status>
         </return>
      </dlwmin:getPaymentsMethod>
   </soapenv:Body>
</soapenv:Envelope>

I need to populate this response data into my model so that I can use it in my grid.

PhoneCall.js: (MODEL)

Ext.define('DG.model.PhoneCall', {
    extend: 'Ext.data.Model',
    config: {
        idProperty: 'phoneCallModel',
        fields: [
            {name: "eftAcctNo", type: "string"},
            {name: "empSsn", type: "string"}
        ]
    }
});

PhoneCalls.js (STORE)

Ext.define('DG.store.PhoneCalls', {
    extend: 'Ext.data.Store',
    config: {
        storeId: 'phoneCallsStore',
        model: 'DG.model.PhoneCall',
        autoLoad: false
    },
    proxy: {
        type: 'memory',
        reader: {
            type: 'xml',
            record: 'contents',
            //rootProperty: 'return'
        }
    },
    listeners: {
        'load' : function() {
            console.log("Making Service Call...");
        }
    }
});

In the Command, when I do this:

var store = Ext.getStore('phoneCallsStore');
            store.loadData(response);

I get the following error: Uncaught TypeError: Cannot call method 'loadData' of undefined

Can someone tell me how to load that response data into the model? My View is a grid that points to the model.

PhoneCallListView.js (VIEW)

Ext.define('DG.view.PhoneCallListView' ,{
    extend: 'Ext.grid.Panel',
    alias: 'widget.phoneCallListView',
    title: 'Phone Calls DataGrid',

    // we no longer define the Phone Calls store in the 'initComponent' method
    store: 'PhoneCalls',

    initComponent: function() {
        this.columns = [
            {header: 'Eft Acct No', dataIndex: 'eftAcctNo', flex:1},
            {header: 'Emp Ssn', dataIndex: 'empSsn', flex:1},
        ];

        this.callParent(arguments);
    }
});

FYI - I wasn't able to get the Store to make the service call using the ajax proxy, so I found it easy to use soapclient.js. Thanks

kevhender kevhender · Accepted Answer · 2013-07-16T11:18:44

The line: Uncaught TypeError: Cannot call method 'loadData' of undefined tells me that your store is not defined. Since your store is called DG.store.PhoneCalls, you should be using Ext.getStore('PhoneCalls'), making sure that you have used the stores: ['PhoneCalls'] config in your controller.

And while you may have found trouble using the Ajax proxy, you really should try to find a way to make it work. The way you are attempting to load the store here is very much a hack. Perhaps an XmlStore is what you should be using: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.data.XmlStore

ExtJS 4.2 - Error Loading Store From Command - Data Returned From Service - MVC Setup

2 Answers