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

我想那可能不是由項目的認可。但現在它工作正常。