Search code examples
javascriptextjsextjs5sencha-cmd

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


I created a MyApp application with Sencha CMD and ExtJS 5.1. Now im changing the Main.js and MainController.js files. Only i want to update the center region tabs clicking in one section of the treepanel in the west region.

To do this i use a listener who calls the function handleClick() in MainController.js but not recognize this function. in MainController.js exists anothers function, i created a button to execute the onClickButton() function and works correctly. What im doing wrong?

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);
    }
});

When i update MainController.js Sencha CMD show this:

[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...

Solution

  • Instead of:

    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',
    

    write:

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