handleClick（）不是Sencha CMD和Extjs 5.1的函數

Question

我用Sencha CMD和ExtJS 5.1創建了一個MyApp應用程序。 現在我正在改變Main.js和MainController.js文件。 只有我想更新center region選項卡，單擊west region的樹狀west region一個部分。

為此，我使用一個監聽器調用MainController.js的function handleClick()但不識別此函數。 在MainController.js存在anothers函數，我創建了一個按鈕來執行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;
    ...