2017-04-13 50 views
1

我需要顯示ExtJS的兼容項目作爲樹的JSON,這裏是它的外觀像讓TreePanel中顯示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 } 
     ] 
} 

如果itemschildren它工作正常,但與items事實並非如此。我沒有在ExtJS6文檔中找到讓Treepanel將項目視爲孩子的方法。僅供參考,這些是需要考慮的一些內容。我使用setRootNode添加這treestore

回答

2

它可以通過在樹存儲配置配置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>