Extjs4 在ExtJS中定义视图&引用；未捕获类型错误：无法调用方法'；子串'；“未定义”的定义；

我试图定义一个视图，但我得到了一个错误

未捕获的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
    }
});

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',
                        }
                    ]
                }
            ]
        })
    }
});

然后尝试在我的

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

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',
                        }
                    ]
                }
            ]
        })
    }
});

Ext.application({
名称：“SimpleTodo”，
观点：[
“侧边栏”
],
appFolder:'应用'，
启动：函数（）{
Ext.create（'Ext.container.Viewport'{
布局：{
类型：“hbox”，
包装：'开始'，
对齐：“拉伸”
},
项目：[
{
xtype:'边栏'/实际上它必须是这样的：

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',
                            }
                        ]
                    }
                ]
            })
        });
      }
    });

Ext.application({
名称：“SimpleTodo”，
要求：[
'SimpleTodo.view.Sidebar'
],
appFolder:'应用'，
启动：函数（）{
Ext.onReady（函数（）{
Ext.create（'Ext.container.Viewport'{
布局：{
类型：“hbox”，
包装：'开始'，
对齐：“拉伸”
},
项目：[
{
xtype:'侧边栏'//如果你查看网络流量，你是否看到你的视图文件被加载？@sha，模型和存储正在加载，但没有视图如何添加
要求：['SimpleTodo.view.sidebar']
@XenoN，这也不起作用，但我可以使用
Ext.create（'SimpleTodo.view.sidebar'）
代替
{xtype:'sidebar'}
为什么它不像控制器、模型和存储？它也可以是视图：['sidebar']除非您的视口或UI部分使用Ext.onReady，否则它将无法工作。我不确定，但如果我们不使用onReady，似乎在需要之前启动方法调用。此外，视图、控制器、模型、存储属性也具有与需要相同的角色。它将为它们生成getter setter方法。顺便说一句，英语不是我的母语；）对不起，我英语不好。