Question

我有奇怪的问题。我有一个简单的视图显示，只要我尝试添加一个按钮，并尝试打开我的网络应用程序，没有显示任何内容，这里是相关的代码，任何人都可以看到它有什么问题？

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

这样的错误信息对读者或对你有用。

无法向面板extJS添加按钮

2 个答案: