ducktyped
ducktyped

Reputation: 4504

Make Treepanel to show extjs items as children

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

Answers (1)

Ankit Chaudhary
Ankit Chaudhary

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

Related Questions