javascript - handleClick() 不是 Sencha CMD 和 Extjs 5.1 的函数

Question

我使用 Sencha CMD 和 ExtJS 5.1 创建了一个 MyApp 应用程序。现在我正在更改 Main.js 和 MainController.js 文件。只有我想更新 center region 选项卡，单击 west region 树面板的一个部分。

为此，我使用了一个监听器，该监听器调用 MainController.js 中的 function handleClick() 但无法识别该函数。在 MainController.js 中存在另一个函数，我创建了一个按钮来执行 onClickButton() 函数并正常工作。我做错了什么？

主要.js

/**
 * This class is the main view for the application. It is specified in app.js as the
 * "autoCreateViewport" property. That setting automatically applies the "viewport"
 * plugin to promote that instance of this class to the body element.
 *
 * TODO - Replace this content of this view to suite the needs of your application.
 */
Ext.define('MyApp.view.main.Main', {
    extend : 'Ext.container.Container',
    requires : [
        'MyApp.view.main.MainController',
        'MyApp.view.main.MainModel'
    ],

    xtype : 'app-main',

    controller : 'main',
    viewModel : {
        type : 'main'
    },

    layout : {
        type : 'border'
    },

    items : [{
            xtype : 'treepanel',
            bind : {
                title : 'Menu'
            },
            region : 'west',
            root : {
                text : 'Raiz',
                expanded : true,
                children : [{
                        text : 'Opcion 1',
                        leaf : false,
                        children: [{
                            text : 'Opcion 1-1',
                            leaf : true
                        }]
                    }, {
                        text : 'Opcion 2',
                        leaf : true
                    }, {
                        text : 'Opcion 3',
                        leaf : true
                    }
                ],
            },
            listeners: {
                itemclick: function (node, rec){
                var id = rec.get("id");
                var name=rec.get('text');
                console.log('id'+id+' texto: ' + name);
                this.handleClick(name);
            }},
            scope: 'controller',
            width : 250,
            split : true,
        }, {
            region : 'center',
            xtype : 'tabpanel',
            items : [{
                    title : 'Tab 1',
                    html : '<h2>Content appropriate for the current navigation.</h2>'
                },
                {
                    title : 'Tab 2',
                    html : '<h2>Content appropriate for the current navigation.</h2>'
                },
                {
                    title : 'Tab 3',
                    html : '<h2>Content appropriate for the current navigation.</h2>'
                }
            ]
        }
    ]
});

主 Controller .js

/**
 * This class is the main view for the application. It is specified in app.js as the
 * "autoCreateViewport" property. That setting automatically applies the "viewport"
 * plugin to promote that instance of this class to the body element.
 *
 * TODO - Replace this content of this view to suite the needs of your application.
 */
Ext.define('MyApp.view.main.MainController', {
    extend : 'Ext.app.ViewController',

    requires : [
        'Ext.window.MessageBox'
    ],

    alias : 'controller.main',

    onClickButton : function () {
        Ext.Msg.confirm('Confirm', 'Are you sure?', 'onConfirm', this);
    },

    onConfirm : function (choice) {
        if (choice === 'yes') {
            //
        }
    },

    handleClick : function (name) {
        var tab = Ext.ComponentQuery.query('tabpanel')[0];
        var num = 0;
        switch (name.trim()) {
        case "Opcion 1":
            num = 0;
            break;
        case "Opcion 2":
            num = 1;
            break;
        case "Opcion 3":
            num = 2;
            break;
        default:
            break;
        }
        tab.setActiveTab(num);
    }
});

当我更新 MainController.js Sencha CMD 时显示:

[INF] -----------------------
[INF] Waiting for changes...
[INF] -----------------------
[INF] Appending content to C:\xampp\htdocs\MyApp/bootstrap.js
[INF] Writing content to C:\xampp\htdocs\MyApp/bootstrap.json
[INF] merging 219 input resources into C:\xampp\htdocs\MyApp\build\development\MyApp\resources
[INF] merged 0 resources into C:\xampp\htdocs\MyApp\build\development\MyApp\resources
[INF] merging 0 input resources into C:\xampp\htdocs\MyApp\build\development\MyApp
[INF] merged 0 resources into C:\xampp\htdocs\MyApp\build\development\MyApp
[INF] writing sass content to C:\xampp\htdocs\MyApp/build/temp/development/MyApp/sass/MyApp-all.scss.tmp
[INF] appending sass content to C:\xampp\htdocs\MyApp/build/temp/development/MyApp/sass/MyApp-all.scss.tmp
[INF] appending sass content to C:\xampp\htdocs\MyApp/build/temp/development/MyApp/sass/MyApp-all.scss.tmp
[INF] executing compass using system installed ruby runtime unchanged MyApp-all.scss
[INF] Refresh complete in 4 sec. at 11:23:13 AM
[INF] -----------------------
[INF] Waiting for changes...

Answer 1

代替:

listeners: {
                itemclick: function (node, rec){
                var id = rec.get("id");
                var name=rec.get('text');
                console.log('id'+id+' texto: ' + name);
                this.handleClick(name);
            }},
            scope: 'controller',

写:

listeners: {
    itemclick: function (node, rec) {
        var id = rec.get("id");
        var name=rec.get('text');
        console.log('id'+id+' texto: ' + name);
        this.handleClick(name);
    },
    scope: 'controller'
},