Question

我使用Sencha CMD和ExtJS 5.1创建了一个MyApp应用程序。现在我正在更改Main.js和MainController.js文件。我只想更新center region标签，点击west region中树形图的一个部分。

为此，我使用一个在function handleClick()中调用MainController.js但不识别此功能的监听器。在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;
    ...

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

2 个答案: