Question

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

{
  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文档中找到一种方法来使treepanel将项目视为子项。仅供参考，这些是可以嵌入某些视图的extjs项目。我正在使用setRootNode将其添加到treestore

Answer 1

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

使Treepanel将extjs项目显示为子项

1 个答案: