在ExtJS中定义视图。 “遗漏的类型错误：无法调用未定义的方法‘子’”

Question

我试图定义一个看法，但我得到一个错误

Uncaught TypeError: Cannot call method 'substring' of undefined

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