Extjs无法通过'setRootVisible'错误访问商店

Question

当我使用Extjs Kitchen Sink 5中的树例创建自己的树时。我会得到一个 'setRootVisible' 错误是这样的：

Uncaught TypeError: Cannot read property 'setRootVisible' of undefined 

我用从厨房水槽下面的例子：Sencha Kitchen Sink

的viewPanel：

Ext.define('app.view.dashboard.widget.Tree', { 
extend: "Ext.panel.Panel", 
xtype: 'tree', 

requires: [ 
    'app.store.Trees', 
    'Ext.layout.container.VBox' 
], 

controller: "dashboard-tree", 

viewModel: { 
    type: "dashboard-tree" 
}, 

layout: { 
    type: 'hbox', 
    pack: 'start', 
    align: 'stretch' 
}, 

defaults: { 
    xtype: 'treepanel', 
    frame: false, 
    rootVisible: true, // when true, the 'root' map will be shown 
    store: 'trees' // select store wich contains the tree data 
}, 

initComponent: function() { 
    // declare all items of the tree 
    this.items = [{ 
     flex: 1 
    }]; 
    this.callParent(); 
} 
}); 

这棵树店来自煎茶厨房水槽：

Ext.define('app.store.Trees', { 
extend: 'Ext.data.TreeStore', 
xtype: 'store', 

root: { 
    text: 'Ext JS', 
    expanded: true, 
    children: [ 
     { 
      text: 'app', 
      children: [ 
       { leaf:true, text: 'Application.js' } 
      ] 
     }, 
     { 
      text: 'button', 
      expanded: true, 
      children: [ 
       { leaf:true, text: 'Button.js' }, 
       { leaf:true, text: 'Cycle.js' }, 
       { leaf:true, text: 'Split.js' } 
      ] 
     }, 
     { 
      text: 'container', 
      children: [ 
       { leaf:true, text: 'ButtonGroup.js' }, 
       { leaf:true, text: 'Container.js' }, 
       { leaf:true, text: 'Viewport.js' } 
      ] 
     }, 
     { 
      text: 'core', 
      children: [ 
       { 
        text: 'dom', 
        children: [ 
         { leaf:true, text: 'Element.form.js' }, 
         { leaf:true, text: 'Element.static-more.js' } 
        ] 
       } 
      ] 
     }, 
     { 
      text: 'dd', 
      children: [ 
       { leaf:true, text: 'DD.js' }, 
       { leaf:true, text: 'DDProxy.js' }, 
       { leaf:true, text: 'DDTarget.js' }, 
       { leaf:true, text: 'DragDrop.js' }, 
       { leaf:true, text: 'DragDropManager.js' }, 
       { leaf:true, text: 'DragSource.js' }, 
       { leaf:true, text: 'DragTracker.js' }, 
       { leaf:true, text: 'DragZone.js' }, 
       { leaf:true, text: 'DragTarget.js' }, 
       { leaf:true, text: 'DragZone.js' }, 
       { leaf:true, text: 'Registry.js' }, 
       { leaf:true, text: 'ScrollManager.js' }, 
       { leaf:true, text: 'StatusProxy.js' } 
      ] 
     }, 
     { 
      text: 'core', 
      children: [ 
       { leaf:true, text: 'Element.alignment.js' }, 
       { leaf:true, text: 'Element.anim.js' }, 
       { leaf:true, text: 'Element.dd.js' }, 
       { leaf:true, text: 'Element.fx.js' }, 
       { leaf:true, text: 'Element.js' }, 
       { leaf:true, text: 'Element.position.js' }, 
       { leaf:true, text: 'Element.scroll.js' }, 
       { leaf:true, text: 'Element.style.js' }, 
       { leaf:true, text: 'Element.traversal.js' }, 
       { leaf:true, text: 'Helper.js' }, 
       { leaf:true, text: 'Query.js' } 
      ] 
     }, 
     { leaf:true, text: 'Action.js' }, 
     { leaf:true, text: 'Component.js' }, 
     { leaf:true, text: 'Editor.js' }, 
     { leaf:true, text: 'Img.js' }, 
     { leaf:true, text: 'Layer.js' }, 
     { leaf:true, text: 'LoadMask.js' }, 
     { leaf:true, text: 'ProgressBar.js' }, 
     { leaf:true, text: 'Shadow.js' }, 
     { leaf:true, text: 'ShadowPool.js' }, 
     { leaf:true, text: 'ZIndexManager.js' } 
    ] 
} 
}); 

Answer 1

虽然这可能不能完全解决您的问题，但我相信t帽子你被错误地扩展ExtJS的类：

Ext.define('app.view.dashboard.widget.Tree', { 
    extend: "Ext.panel.Panel", 
    xtype: 'tree', 

应该扩展ExtJS的树面板类，而不是一个标准的面板，像这样：

Ext.define('app.view.dashboard.widget.Tree', { 
    extend: "Ext.tree.Panel" 

的的xtype配置项可以通过以下方式使用：

您可以创建一个通用Ext.Widget并定义其的xtype，使用从documentation这里例如：

var text1 = Ext.create('Ext.form.field.Text', { 
    fieldLabel: 'Foo' 
}); 

// or alternatively: 

var text1 = Ext.widget({ 
    xtype: 'textfield', 
    fieldLabel: 'Foo' 
}); 

，也可以定义像这样自己xtypes：

Ext.define('MyApp.PressMeButton', { 
    extend: 'Ext.button.Button', 
    xtype: 'pressmebutton', 
    text: 'Press Me' 
}); 

参考：Sencha Documentation | Ext.Component

Answer 2

现在它工作正常，我。我必须做的唯一事情是宣布树木存储在initComponent: function() {}内的物品。

我用拿到店里解决的办法是这样的：

initComponent: function() { 
    // declare store 
    this.store = new app.store.Trees(); 

    // declare all items 
    this.items = [{ 
     title: 'treeTest', 
     flex: 1 
    }]; 
    this.callParent(); 
}, 

我想那可能不是由项目的认可。但现在它工作正常。