Can't listen to store inside a view model

[pgarlaud]

I usually use the basic binding feature of the architect to listen to the "exception" event.

I am here however confronted to a case where my store is in the view model:

Ext.define('myProject.view.MyViewModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.mymodel',

    requires: [
        'Ext.data.Store',
        'Ext.data.proxy.Ajax',
        'Ext.data.reader.Json',
    ],

    data: {},

    stores: {
        MyStore: {
            autoLoad: false,
            model: 'myProject.model.MyModel',
            sortOnLoad: false,
            proxy: {
                type: 'ajax',
                extraParams: {
                    
                },
                reader: {
                    type: 'json',
                    messageProperty: 'message',
                    rootProperty: 'data'
                }
            }
        }
    }

});

Now I would like to have an exception handler, so the only option available to me in this context (basic event binding not being available) is: `View Controller Event Binding`

My proxy thus becomes:

            proxy: {
                type: 'ajax',
                extraParams: {
                    
                },
                reader: {
                    type: 'json',
                    messageProperty: 'message',
                    rootProperty: 'data'
                },
                listeners: {
                    exception: 'onAjaxException'
                }
            }

Which gives me the following exception when I try running the app:

[E] Ext.util.Event.getFireInfo(): No method named "onAjaxException" on Ext.data.proxy.Ajax

Why? Because — seeing is believing — architect decided to create the handler in the view controller (instead of the proxy which is inside the view model's stores):

Ext.define('myProject.view.MyViewController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.mycontroller',

    onAjaxException: function(proxy, request, operation, eOpts) {
        console.log('hello');
    }

});

So the onAjaxException handler created by the architect is not found by the store's proxy (it's in a different file!).


Interestingly enough, if I manually create a Function in the proxy called "onAjaxException" it *does* run, but I can't get read of the wrongly created homonym in the view controller…

Pierre

EDIT: forgotten to attach my config:

Sencha Architect

version:

3.2.0.75

channel:

3.2-stable

platform:

1.4.1.960

cmd:

5.1.3.61

framework:

Ext JS 5.1.x

[LarryHagood_YCMD]

I've just confirmed that this is still a problem in 6.2. Did you get around the problem by manually setting a listener during the afterrender or similar event?

[lovelyhibabe]

still a problem in 6.5.2

[Joe Kuan]

I am on 6.6 and I have the similar problem with a listener for 'exception' inside a ViewModel store proxy.

   stores: {
        addrRange: {
            model: 'NeOne.model.ctn.AddressRange',
            proxy: {
                type: 'rest',
                url: '/neone/ctn/addrRng',
                appendId: false,
                reader: {
                    type: 'json',
                    rootProperty: 'rows'
                },
                writer: {
                    type: 'json',
                    writeAllFields: true
                },
                listeners: {
                    exception: 'onRestException'
                }
            }, 

Here is the error trace:

app.js?_dc=1541785109188:4932 [E] Ext.util.Event.getFireInfo(): No method named "onRestException" on Ext.data.proxy.Rest
log @ app.js?_dc=1541785109188:4932
raise @ app.js?_dc=1541785109188:2251
Ext.raise @ app.js?_dc=1541785109188:2269
getFireInfo @ app.js?_dc=1541785109188:9295
fire @ app.js?_dc=1541785109188:9252
doFireEvent @ app.js?_dc=1541785109188:9677
fireEventArgs @ app.js?_dc=1541785109188:9618
fireEvent @ app.js?_dc=1541785109188:9602
processResponse @ app.js?_dc=1541785109188:38619
(anonymous) @ app.js?_dc=1541785109188:38780
callback @ app.js?_dc=1541785109188:4565
onComplete @ app.js?_dc=1541785109188:11376
onStateChange @ app.js?_dc=1541785109188:11336
(anonymous) @ app.js?_dc=1541785109188:11329
elevate @ app.js?_dc=1541785109188:2146
(anonymous) @ app.js?_dc=1541785109188:11328
XMLHttpRequest.send (async)
start @ app.js?_dc=1541785109188:11187
request @ app.js?_dc=1541785109188:11612
sendRequest @ app.js?_dc=1541785109188:38759
doRequest @ app.js?_dc=1541785109188:38757
create @ app.js?_dc=1541785109188:38564
doExecute @ app.js?_dc=1541785109188:35695
execute @ app.js?_dc=1541785109188:35564
runOperation @ app.js?_dc=1541785109188:41293
start @ app.js?_dc=1541785109188:41242
batch @ app.js?_dc=1541785109188:37875
sync @ app.js?_dc=1541785109188:38170
onRowEditingEdit @ app.js?_dc=1541785109188:130308
fire @ app.js?_dc=1541785109188:9263
doFireEvent @ app.js?_dc=1541785109188:9677
fireEventArgs @ app.js?_dc=1541785109188:9618
fireEvent @ app.js?_dc=1541785109188:9602
completeEdit @ app.js?_dc=1541785109188:94134
callback @ app.js?_dc=1541785109188:4565
fireHandler @ app.js?_dc=1541785109188:54393
onClick @ app.js?_dc=1541785109188:54379
fire @ app.js?_dc=1541785109188:9263
fire @ app.js?_dc=1541785109188:15103
publish @ app.js?_dc=1541785109188:15068
publishDelegatedDomEvent @ app.js?_dc=1541785109188:15084
doDelegatedEvent @ app.js?_dc=1541785109188:15122
onDelegatedEvent @ app.js?_dc=1541785109188:15111