如何在ExtJs中绑定侦听器？

Question

我正在使用extjs 6.5.3现代工具包，并且对以下问题感到困惑：如何将侦听器从viewModel绑定到视图？

示例小提琴：https://fiddle.sencha.com/#view/editor&fiddle/30en

代码：

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

您的代码正确绑定了onPlay侦听器，但不起作用，因为绑定是在控制器初始化之后发生的。如果您稍后触发onPlay事件，例如使用计时器，将显示警报。检查https://fiddle.sencha.com/#view/editor&fiddle/30et