Когда я использовал пример дерева из Extjs 5, чтобы создать собственное дерево. Я получу свойство Cannot read 'items' с нулевым значением

Uncaught TypeError: не удается прочитать «элементы» свойства null

ошибка внутри 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
                        }
                    ]
                }
            ]
        }
});

любая помощь ?


javascript extjs extjs5
person PAncho    schedule 28.06.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

я думаю ошибка внутри 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'
}
person Greendrake    schedule 28.06.2015
comment
Спасибо за ваш ответ, я пишу ваш код без ошибок на моей консоли. заголовок отображается, но дерево не отображается. - person PAncho; 28.06.2015
comment
Ну, вопрос был об ошибке Cannot read property 'items' of null, не так ли? Я указал вам, где была ошибка. Теперь пустое дерево — это отдельная тема. Он пуст, потому что единственный дочерний элемент, указанный вами для вашего дерева, имеет заголовок only и вовсе не является деревом. Я думаю, вам нужно было указать title на самом treepanel, а не на его дочернем элементе. В этом случае initComponent вам вообще не понадобится. - person Greendrake; 28.06.2015