How to notify a view that a store has been refreshed ?

[Frewland]

I am trying to make a store to notify a view whenever it's been refreshed. (For various reasons I would prefer not to use a DataView.) I thought I could do it like this:

In the store I declare a custom event myEvent and have the refresh handler fire it on the app to make it global:

Ext.define('MyApp.store.MyStore', {
    extend: 'Ext.data.Store',

    config: {
      ...
        listeners: [
            {
                fn: 'onDirectstoreRefresh',
                event: 'refresh'
            },
            {
                fn: 'onDirectstoreMyEvent,
                event: 'myEvent'
            }
        ]
    },


    onDirectstoreRefresh: function(store, data, eOpts) {
            MyApp.app.fireEvent('myEvent', this, 0);
    },

    onDirectstoreMyEvent: function(eventOptions) {
            console.log('MyEvent received in MyStore');  // This bit works
    }
});

and then have the view listen for myEvent:

Ext.define('MyApp.view.root', {
    extend: 'Ext.Container',

    config: {
...
        listeners: [

            {
                fn: 'onContainerMyEvent',
                event: 'myEvent'
            }
        ]
    },

 
    onContainerMyEvent: function(container) {
        console.log('MyEvent received in view'); // This never happens
    }

});

myEvent is received inside the store but it never gets to the view. What have I missed out ?

Thanks in advance.

[mitchellsimoens]

In the view, you should add listeners to the store

[Bunchofstring]

@Mitchell, Thanks for suggesting the preferred pattern. Is there a material difference between using the view's listeners config vs. using this.on('myEvent',doSomething) in an overridden constructor?

[Frewland]

Thanks, this is working now.

In MyView I put

        listeners: [
            {
                fn: 'onContainerInitialize',
                event: 'initialize'
            }
        ]

and

    onContainerInitialize: function(component, options) {
        this.store = Ext.data.StoreManager.lookup('MyStore');
        this.store.addListener('refresh', this.onMyStoreRefresh, this, {order: 'after'} );
        this.store.fireEvent('refresh');
    }

and

    onMyStoreRefresh: function(component) {
     console.log(store refreshed');
...
    }

I'm not trying to use a global event anymore.

[haduki]

In your op, you wrote

MyApp.app.fireEvent('myEvent', this, 0)

'MyApp.app' is the instance of 'Application',not your 'view'.
This is the reason why 'This never happens'.
Add listener to your application object or fire event by your view is the correct way.