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() 函数并正常工作。我做错了什么？

Main.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>'
                }
            ]
        }
    ]
});

MainController.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'
},

Answer 2

而不是：

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: 'handleClick'
},

在你的 viewController:

...
handleClick : function (node, rec) {
    var view = this.getView();
    var id   = rec.get("id");
    var name = rec.get('text');

    var tabPanel = view.down('tabpanel');
    var tab = tabPanel.items[0]; // items is property of tabpanel

    var num = 0;
    switch (name.trim()) {
    case "Opcion 1":
        num = 0;
        break;
    ...

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

handleClick() is not a function with Sencha CMD and Extjs 5.1

javascript

extjs

sencha-cmd

extjs5