制作 Treepanel 以将 extjs 项目显示为子项

Question

我需要将 json 个与 extjs 兼容的项目显示为树，这是它的样子

{
  text: 'Menu Root',
  expanded: true,
  items: [
           { text: 'detention', leaf: true },
           { text: 'homework', expanded: true, items: [
            { text: 'book report', leaf: true },
            { text: 'algebra', leaf: true}
           ] },
           { text: 'buy lottery tickets', leaf: true }
         ]
}

如果 items 是 children 它工作正常但 items 它不。我没有在 ExtJS6 文档中找到使树面板将项目视为子项的方法。仅供参考，这些是要嵌入到某些视图中的 extjs 项目。我正在使用 setRootNode 将其添加到 treestore

Answer 1

可以通过将树存储配置中的defaultRootProperty配置为"items"来实现，默认为："children".

Ext.application({
    name: 'Fiddle',

    launch: function () {
 var store = Ext.create('Ext.data.TreeStore', {
     defaultRootProperty : 'items', // need change the default "children" to "items"
    root: {    
  text: 'Menu Root',
  expanded: true,
  items: [
           { text: 'detention', leaf: true },
           { text: 'homework', expanded: true, items: [
            { text: 'book report', leaf: true },
            { text: 'algebra', leaf: true}
           ] },
           { text: 'buy lottery tickets', leaf: true }
         ]
       
}
});

Ext.create('Ext.tree.Panel', {
    title: 'Simple Tree',
    width: 200,
    height: 150,
    store: store,   
    renderTo: Ext.getBody()
});

    }
});

<link rel="stylesheet" href="https://cdn.sencha.com/ext/gpl/4.2.1/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css"><!-- framework javascript --><script type="text/javascript" src="https://cdn.sencha.com/ext/gpl/4.2.1/ext-all-debug.js"></script><script type="text/javascript" src="https://cdn.sencha.com/ext/gpl/4.2.1/packages/ext-theme-neptune/build/ext-theme-neptune-debug.js"></script>

制作 Treepanel 以将 extjs 项目显示为子项

Make Treepanel to show extjs items as children

extjs

extjs6

extjs6-classic