在ExtJS中定义视图。 “未捕获的TypeError：无法调用未定义的方法'substring'”

Question

我正在尝试定义视图，但我收到错误

  

未捕获的TypeError：无法调用未定义的方法'substring'

/app/view/Sidebar.js

Ext.define('SimpleTodo.view.Sidebar', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.sidebar',
    config: {
        title: 'Projects & Todo Lists',
        tbar: [
            {
                xtype: 'button',
                text: 'Add Project'
            },
            {
                xtype: 'button',
                text: 'Add Todo List'
            }
        ],
        //store: Ext.data.StoreManager.lookup('projects'),
        html: 'Hello world',
        width: 200
    }
});

然后尝试在app.js

中使用它

Ext.application({
    name: 'SimpleTodo',
    views: [
        'Sidebar'
    ],
    appFolder: 'app',
    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: {
                type: 'hbox',
                pack: 'start',
                align: 'stretch'
            },
            items: [
                {
                    xtype: 'sidebar' //  <---- here
                },
                {
                    xtype: 'panel',
                    id: 'detailsView',
                    flex: 1,
                    layout: 'card',
                    items: [
                        {
                            xtype: 'panel',
                            id: 'todoDetails',
                            title: 'Todo Details'
                        },
                        {
                            xtype: 'panel',
                            id: 'addProject',
                            title: 'Add project',
                        }
                    ]
                }
            ]
        })
    }
});

我错过了什么？我是否定义了我的观点并正确使用了它？

Answer 1

实际上它必须是这样的：

Ext.application({
        name: 'SimpleTodo',
        requires:[
         'SimpleTodo.view.Sidebar'
        ],
        appFolder: 'app',
        launch: function() {
          Ext.onReady(function(){
            Ext.create('Ext.container.Viewport', {
                layout: {
                    type: 'hbox',
                    pack: 'start',
                    align: 'stretch'
                },
                items: [
                    {
                        xtype: 'sidebar' //  <---- here
                    },
                    {
                        xtype: 'panel',
                        id: 'detailsView',
                        flex: 1,
                        layout: 'card',
                        items: [
                            {
                                xtype: 'panel',
                                id: 'todoDetails',
                                title: 'Todo Details'
                            },
                            {
                                xtype: 'panel',
                                id: 'addProject',
                                title: 'Add project',
                            }
                        ]
                    }
                ]
            })
        });
      }
    });