Faire Treepanel pour afficher les éléments ExtJs que les enfants

Question

je dois montrer JSON de ExtJS des objets compatibles comme arbre, voici comment il ressemble

{ 
    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 } 
     ] 
} 

si items sont children il fonctionne très bien, mais avec items il ne fonctionne pas. Je n'ai pas trouvé de moyen dans les documents ExtJS6 de faire en sorte que treepanel considère les éléments comme des enfants. Pour info, il s'agit d'éléments extjs à incorporer dans une vue. J'utilise setRootNode pour ajouter à treestore

Answer 1

Il peut être réalisé en configurant defaultRootProperty dans la configuration du magasin d'arbre à "items" qui par défaut: "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>