Reputation: 4504
I need to show json of extjs compatible items as tree, here is how it looks like
{
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 }
]
}
if items
are children
it works fine but with items
it does not. I did not find a way in ExtJS6 docs to make treepanel consider items as children. FYI these are extjs items that are to be embeded on to some view. I am using setRootNode
to add this to treestore
Upvotes: 1
Views: 109
Reputation: 4089
It can be achieved by configuring defaultRootProperty
in the tree store config to "items"
which defaults to: "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>
Upvotes: 2