无法将按钮添加到面板extJS

Question

我有一个奇怪的问题。 我有一个显示良好的简单视图，尝试添加按钮并尝试打开我的Web应用程序后，什么也没有显示，下面是相关代码，任何人都可以看到这有什么问题吗？

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


    items: [
        {
            xtype: 'panel',
            title: 'Child Panel 1',
            height: 100,
            columnWidth: 0.5,
            items: [
             {
               xtype: 'button',
               text: 'Create',
               itemId: 'createStudentID',
               handler: onClickButton
            }]

        },
        {
            xtype: 'panel',
            title: 'Child Panel 2',
            height: 100,
            columnWidth: 0.5
        }
    ]
});

控制器：

/**
 * 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.define('Student',
        {
            name: 'unnamed',

            getName: function () {
                return "Student name is" + this.name;
            }
        });

        var studentObj = Ext.create('Student');
        studentObj.getName();
    }


});

我真的很困惑。 如果删除按钮及其处理程序，我可以看到两个面板

Answer 1

通过将处理程序更改为侦听器来解决

 items: [
        {
            xtype: 'panel',
            title: 'Child Panel 1',
            height: 100,
            columnWidth: 0.5,
            items: [
             {
               xtype: 'button',
               text: 'Create',
               itemId: 'createStudentID',
               listeners: {
                   click: 'onClickButton'
               }
            }]

        },

Answer 2

您应该打开浏览器控制台，这将告诉您

onClickButton is undefined

这样的错误消息对读者或您很有用。