如何在 ExtJs 中绑定监听器？

Question

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

示例fiddle：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

如何在 ExtJs 中绑定监听器？

How to bind listeners in ExtJs?

extjs

extjs6.5