Extjs 无法通过 'setRootVisible' 错误访问存储

Question

当我使用 Extjs Kitchen Sink 5 中的树示例制作我自己的树时。我会得到这样的 'setRootVisible' 错误：

Uncaught TypeError: Cannot read property 'setRootVisible' of undefined

我使用了厨房水槽中的这个例子：Sencha Kitchen Sink

视图面板：

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

尽管这可能无法完全解决您的问题，但我相信您在错误地扩展 ExtJs classes：

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

应该扩展 ExtJs 树面板 class，而不是像这样的标准面板：

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

我认为商店无法识别商品。不过现在可以正常使用了。

Extjs 无法通过 'setRootVisible' 错误访问存储

Extjs can't access store by 'setRootVisible' error

extjs

extjs5