当我使用Extjs 5中的一个树示例来制作我自己的树时.我将获得一个无法读取的属性'项目'为null

When I used a tree example from Extjs 5 to make my own tree. I will get a Cannot read property 'items' of null

本文关键字：一个读取属性项目 null Extjs 我自己自己的更新时间：2023-09-26

未捕获类型错误：无法读取空的属性"items"

错误在initComponent 内部

我的错误显示，当我使用xtype:"treepanel"时，我认为initComponent 内部的错误

userName = localStorage.getItem("userName");
Ext.define('TutorialApp.view.main.Main', {
    extend    : 'Ext.container.Container',
    requires  :
               [
                 'TutorialApp.view.main.MainController',
                 'TutorialApp.view.main.MainModel',
                 'TutorialApp.store.MainTree'
               ],
    xtype     : 'app-main',
    controller: 'main',
    plugins   : 'viewport',
    viewModel : 
                {
                   type : 'main'
                },
    layout    : {
                   type : 'border'
                },
    items     : 
                [
                 {
                     xtype       : 'panel',
                     bind        : 
                                    {
                                        title: '{name} '+userName+''
                                    },
                     region      : 'west',
                     html        : '<ul><li>This area is commonly used for navigation, for example, using a "tree" component.</li></ul>',
                     width       : 250,
                     split       : true,
                     collapsible : true,`enter code here`
                     bbar        : 
                                  [
                                   {
                                       text    : 'Button',
                                       handler : 'onClickButton'
                                   }
                                  ],
                     items       : [
                                    {
                                      xtype       : 'treepanel',
                                      rootVisible : true,
                                      store       : 'MainTree',
                                      initComponent: function() 
                                      {
                                          // declare store
                                          this.store = new  TutorialApp.store.MainTree();
                                          // declare all items 
                                          this.items = [
                                                          {
                                                              title: 'Tree'
                                                          }
                                                        ];
                                          this.callParent();
                                      }
                                    }
                                   ]
                 },
                 {
                    region  : 'center',
                    xtype   : 'tabpanel',
                    items   :
                             [
                              {
                                    title : 'Tab 1',
                                    html  : '<h2>Content appropriate for the current navigation.</h2>'
                              }
                             ]
                 }
                ]
});

这家树店来了这是一个简单的商店

Ext.define('TutorialApp.store.MainTree', {
    extend: 'Ext.data.TreeStore', 
    root: {
            text: 'Root',
            expanded: true,
            children: [
                {
                    text: 'Child 1',
                    leaf: true
                },
                {
                    text: 'Child 2',
                    leaf: true
                },
                {
                    text: 'Child 3',
                    expanded: true,
                    children: [
                        {
                            text: 'Grandchild',
                            leaf: true
                        }
                    ]
                }
            ]
        }
});

有什么帮助吗？

我认为initComponent 内部的错误

initComponent实际上不应该作为配置选项传递。如果您需要在initComponent中应用自己的逻辑，则必须派生自己的类。所以，不是：

{
    xtype: 'treepanel',
    rootVisible: true,
    store: 'MainTree',
    initComponent: function() {
        // declare store
        this.store = new  TutorialApp.store.MainTree();
        // declare all items
        this.items = [
            {
                title: 'Tree'
            }
        ];
        this.callParent();
    }
}

定义自己的树面板：

Ext.define('MyTreePanel', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.mytreepanel',
    initComponent: function() {
        // declare store
        this.store = new  TutorialApp.store.MainTree();
        // declare all items
        this.items = [
            {
                title: 'Tree'
            }
        ];
        this.callParent();
    }
});

并使用其xtype：

{
    xtype: 'mytreepanel',
    rootVisible: true,
    store: 'MainTree'
}