在 Sencha ExtJs 6.0 中制作树视图答案

【问题标题】：Making a Tree view in Sencha ExtJs 6.0在 Sencha ExtJs 6.0 中制作树视图
【发布时间】：2015-10-16 17:35:32
【问题描述】：

我试图在 ExtJs 6.0 中基于此示例制作一个简单的树视图，但没有任何成功。它在控制台中抛出此错误，并且屏幕显示为空白。

未捕获的类型错误：无法读取未定义的属性“getRoot”

如果有人能指出我正确的方向，我将不胜感激。

这些是我的文件：

型号

Ext.define('ADMINSEG.model.Opcion', {
extend: 'Ext.data.TreeModel',
alias : 'model.opcion',
fields: [
    {name: 'task',     type: 'string'},
    {name: 'user',     type: 'string'},
    {name: 'duration', type: 'string'},
    {name: 'done',     type: 'boolean'}
]
});

商店

Ext.define('ADMINSEG.store.MntOpciones', {
    extend : 'Ext.data.TreeStore',
    storeId: 'myStore',
    model: 'ADMINSEG.model.Opcion',
    proxy: {
        type: 'ajax',
        url: 'treegrid.json'
    },
    folderSort: true
});

查看

Ext.define('ADMINSEG.view.aplicacion.Opciones', {
    extend : 'Ext.tree.Panel',
    requires : ['Ext.data.*',
                'Ext.grid.*',
                'Ext.tree.*',
                'Ext.tip.*',
                'Ext.ux.CheckColumn',
                'ADMINSEG.store.MntOpciones'],

    title: 'Core Team Projects',
    width: 500,
    height: 300,
    renderTo: Ext.getBody(),
    collapsible: true,
    useArrows: true,
    rootVisible: false,
    store: 'myStore',
    multiSelect: true,
    columns: [{
        xtype: 'treecolumn', //this is so we know which column will show the tree
        text: 'Task',
        width: 200,
        sortable: true,
        dataIndex: 'task',
        locked: true
    }]
});

【问题讨论】：

尝试像这样使用存储 - 存储：Ext.data.StoreManager.lookup('myStore')。要像您一样使用商店，则应在应用程序中注册商店 - f.e.使用控制器的存储配置。

标签： javascript extjs extjs6

【解决方案1】：

终于找到了！视图中的存储必须像这样调用

store: Ext.create('ADMINSEG.store.MntOpciones')

【讨论】：

这不是真的，甚至是不好的做法。只需按照 yorlin 在您的 OP 评论中所说的操作即可。获取与视图一起使用的控制器，或应用程序控制器，并将商店 MntOpciones 添加到 stores array。这将告诉框架商店存在。之后，您可以在视图中使用store: [storeId]，在您的情况下，storeId 是myStore。
如果您想要共享存储，请按照上面 cmets 中的建议进行操作。如果您希望每个视图都有一个唯一的存储，请在 initComponent 方法中创建存储并将其分配给树视图。