How to bind listeners in ExtJs?

Question

I am use extjs 6.5.3 modern toolkit and a am puzzled by the following question: how to bind listeners from viewModel to view?

example fiddle: https://fiddle.sencha.com/#view/editor&fiddle/30en

code:

Ext.application({
    name: 'Fiddle',

    launch: function () {
        let container1 = Ext.create("Ext.panel.Panel", {
            width: 640,
            height: 480,
            html: 'hello world!',

            viewModel: {
                data: {
                    // not works
                    listeners: {
                        onPlay: function () {
                             Ext.Msg.alert('onPlay', 'onPlay!');
                        }
                    },
                    title: 'test'
                }
            },

            // works
            //listeners: {
            //    onPlay: function () {
            //        Ext.Msg.alert('onPlay', 'onPlay!');
            //    }
            //},

            bind: {
                listeners: '{listeners}',
                title: '{title}'
            },

            controller: {
                init: function () {
                    this.getView().fireEvent('onPlay', this.getView());
                }
            }
        });

        Ext.Viewport.add({
            xtype: 'container',
            padding: 10,
            items: [container1]
        });
    }
});

Answer 1

Your code correctly binds the onPlay listener but does not work because the binding happens after your controller initialized. If you fire the onPlay event later e.g. using a timer, the alert will be shown. Check https://fiddle.sencha.com/#view/editor&fiddle/30et