Question

我已经动态地向工具栏添加了按钮，现在我正在尝试添加一个将替换中心窗口面板的侦听器。我无法在viewcontroller中连接监听器。

到目前为止，我已经这样做了。有人能指出我正确的方法吗？

init: function () {

    var dynamicMenu = [];

    var me = this;
    console.log(me);
    console.log(this.view);
    var myToolbar = this.view.down('toolbar');
    console.log(myToolbar);

    this.getViewModel().data.mainmenuv4store.load(function (records) {

        console.log('hit load section');

        Ext.each(records, function (record) {

            //add individual button
            var myButton = Ext.create('Ext.Button', {
                text: record.get('text'),
                iconCls: record.get('iconCls'),
                iconAlign: 'left',
                listeners: {
                    click: {
                        fn: function (event, target) {
                            me.selectMenuButton(event, target);
                        }
                    }
                }
            });

            myButton.on({
                click: 
            });

            //add button to menu array
            dynamicMenu.push(myButton);
        });

        //put this in storeLoad  otherwise this section will be hit before loading everything
        myToolbar.add(dynamicMenu);

    });
},

selectMenuButton: function (event, target) {

    Ext.Msg.alert('hi');

    var targetCmp = Ext.get(target);
    var id = targetCmp.getAttribute('text');
}

我将代码更改为以下内容。我有效地设置了吗？

Ext.define('ExtApplication1.controller.MainMenuV4ViewController', {
extend: 'Ext.app.ViewController',
alias: 'controller.mainmenuv4vc',
views: [
    'ExtApplication1.view.main.MainMenuV4View'
],

init: function () {

    var dynamicMenu = [];

    var me = this;
    console.log(me);
    console.log(this.view);
    var myToolbar = this.view.down('toolbar');
    console.log(myToolbar);

    this.getViewModel().data.mainmenuv4store.load(function (records) {

        console.log('hit load section');

        Ext.each(records, function (record) {

            //add individual button
            var myButton = Ext.create('Ext.Button', {
                text: record.get('text'),
                iconCls: record.get('iconCls'),
                iconAlign: 'left',
                handler: me.selectMenuButton, scope: me
            });

            //add button to menu array
            dynamicMenu.push(myButton);
        });

        //put this in storeLoad  otherwise this section will be hit before loading everything
        myToolbar.add(dynamicMenu);

    });

    //listeners: {
    //    click: 'onProjectSelect'
    //    //click: {
    //    //    fn: function (event, target) {
    //    //        me.selectMenuButton(event, target);
    //    //    }
    //    //}
    //}
},

selectMenuButton: function (event, target) {

    //Ext.Msg.alert('select menu button method hit');

    console.log('select menu button section was hit')
    console.log(event);
    console.log(target);

}

Answer 1

根据您对该问题的评论，您似乎想要一种更清晰的方式来建立监听器。这稍微清洁一点：

而不是听众：{...}，请使用

handler: Ext.Function.bind(me.selectMenuButton, me)

Ext JS将监听器添加到动态添加的按钮中

1 个答案: