We Keep Coding

What is the proper way to filtering ViewModel stores and implement to ExtJS Panel?

Through ViewModel stores I'm getting this JSON data;
{
"success": true,
"msg": "OK",
"count": 2,
"data": [
{
"firstname": "BLA",
"lastname": "BLALA",
"isactive": true,
...
},
{
"firstname": "BLAAA",
"lastname": "BLALAAA",
"isactive": false,
...
}
I have two grids on one panel and one of them will load data only with isactive: true field, other grid will load only with false. So where and how I need to filtering store to load specified data to grids?
Here is VM;
Ext.define('MyApp.view.ListingVM', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.listing',
requires: [...],
reference: 'loyaltyvm',
stores: {
// Should I define the filter on here?
bonusTrans: {
storeId: 'bonusTrans',
// reference: 'bonusTrans',
model: 'MyApp.model.BonusTrans',
autoLoad: true,
session: true,
pageSize: MyApp.Globals.LIST_PAGE_SIZE
}
}
});
This is panel's grid sample where defined both of Grids. I've tried several way to get store and filtering but couldn't be succes;
getColumns: function () {
var me = this;
var panelItems = [
{
xtype: 'container',
layout: {type: 'hbox', align: 'stretch', pack: 'start'},
items: [
xtype: 'bonustrans',
flex: 1,
title: 'Current Bonus',
getListCols: function () {
var me = this;
debugger;
// var activeStore = Ext.getStore('bonusTrans');
// var activeStore = me.viewModel.get('bonusTrans');
// var view = me.getView();
// var vm = view.getViewModel();
// var vm.getStore('bonusTrans')
// var activeStore = me.getViewModel().getStore('bonusTrans');
var activeStore = me.getViewModel('loyaltyvm').getStores('bonusTrans');
activeStore.filter('isactive', 'true');
var listCols = [
{
xtype: 'firstnamecol',
flex: 1
},
{
xtype: 'checkoutcol'
},
{
xtype: 'bonustotalcol'
}
];
return listCols;
}
//... other Grid is just defined below of this line and it should loads data only with 'isactive' field is false.

Use chained stores, fiddle:
Ext.application({
name : 'Fiddle',
launch : function() {
new Ext.container.Viewport({
layout: {
type: 'hbox',
align: 'stretch'
},
viewModel: {
stores: {
everything: {
autoLoad: true,
proxy: {
type: 'ajax',
url: 'data1.json'
}
},
active: {
type: 'chained',
source: '{everything}',
filters: [{
property: 'active',
value: true
}]
},
inactive: {
type: 'chained',
source: '{everything}',
filters: [{
property: 'active',
value: false
}]
}
}
},
items: [{
flex: 1,
xtype: 'gridpanel',
title: 'Active',
bind: '{active}',
columns: [{
dataIndex: 'name'
}]
}, {
flex: 1,
xtype: 'gridpanel',
title: 'Inactive',
bind: '{inactive}',
columns: [{
dataIndex: 'name'
}]
}]
});
}
});

The way of chained stores is surely the best,
here you can see a working fiddle on classic
and here is the code:
Ext.application({
name: 'Fiddle',
launch: function () {
var storeAll = Ext.create('Ext.data.Store', {
storeId: 'storeAll',
fields: [{
name: 'firstname'
}, {
name: 'lastname'
}, {
name: 'active'
}],
data: [{
firstname: 'test1',
lastname: 'test1',
active: true
}, {
firstname: 'test2',
lastname: 'test2',
active: true
}, {
firstname: 'test3',
lastname: 'test3',
active: false
}]
}),
chainedStoreActive = Ext.create('Ext.data.ChainedStore', {
source: storeAll,
filters: [{
property: 'active',
value: true
}]
}),
chainedStoreNoActive = Ext.create('Ext.data.ChainedStore', {
source: storeAll,
filters: [{
property: 'active',
value: false
}]
});
Ext.create({
xtype: 'viewport',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'gridpanel',
title: 'grid ALL',
store: storeAll,
columns: [{
text: 'First Name',
dataIndex: 'firstname'
}, {
text: 'Last Name',
dataIndex: 'lastname'
}],
flex: 1
}, {
xtype: 'gridpanel',
title: 'grid active',
store: chainedStoreActive,
columns: [{
text: 'First Name',
dataIndex: 'firstname'
}, {
text: 'Last Name',
dataIndex: 'lastname'
}],
flex: 1
}, {
xtype: 'gridpanel',
title: 'grid inactive',
store: chainedStoreNoActive,
columns: [{
text: 'First Name',
dataIndex: 'firstname'
}, {
text: 'Last Name',
dataIndex: 'lastname'
}],
flex: 1
}],
renderTo: Ext.getBody()
});
}
});
The global or the "allelements" store, need to be a global store, the chained ones can be created in a viewmodel of a view.

NestedList with Custom ListItem

I am trying to create an ExtJS 6.5.1 NestedList with a custom NestedListItem component. I can't find a working example on internet or in the ExtJS documentation.
Would anyone be able to show me a working example of a List or NestedList with a custom component item?

You will need to use listConfig along with itemTpl to get custom XTemplate style in NestedList.
NestedList documentation says:
getItemTextTpl ( node ) : String
Override this method to provide custom template rendering of individual nodes. The template will receive all data within the Record and will also receive whether or not it is a leaf node.
But I found it does not work in ExtJS 6.x. It ends up throwing error as can not override getItemTextTpl.
Here is a working example with listConfig and itemTpl:
Ext.application({
name: 'Fiddle',
launch: function () {
var data = {
property: 'Groceries',
items: [{
property: 'Drinks',
items: [{
property: 'Water',
items: [{
property: 'Sparkling',
leaf: true
}, {
property: 'Still',
leaf: true
}]
}, {
property: 'Coffee',
leaf: true
}, {
property: 'Espresso',
leaf: true
}, {
property: 'Redbull',
leaf: true
}, {
property: 'Coke',
leaf: true
}, {
property: 'Diet Coke',
leaf: true
}]
}, {
property: 'Fruit',
items: [{
property: 'Bananas',
leaf: true
}, {
property: 'Lemon',
leaf: true
}]
}, {
property: 'Snacks',
items: [{
property: 'Nuts',
leaf: true
}, {
property: 'Pretzels',
leaf: true
}, {
property: 'Wasabi Peas',
leaf: true
}]
}]
};
var store = Ext.create('Ext.data.TreeStore', {
defaultRootProperty: 'items',
root: data
});
Ext.Viewport.add({
xtype: 'panel',
layout: 'fit',
title: 'Example',
items: [{
xtype: 'nestedlist',
fullscreen: true,
title: 'Groceries',
displayField: 'property',
store: store,
listConfig: {
itemTpl: '<span<tpl if="leaf == true"> class="x-list-item-leaf"</tpl>>{property} --- {leaf} --- Yeah --- Custom Thing here from template</span>'
}
}]
});
}
});
Example Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/29t3
EDIT:
Example Using Component instead of itemTpl:
Ext.application({
name: 'Fiddle',
launch: function () {
var data = {
property: 'Groceries',
items: [{
property: 'Drinks',
items: [{
property: 'Water',
items: [{
property: 'Sparkling',
leaf: true
}, {
property: 'Still',
leaf: true
}]
}, {
property: 'Coffee',
leaf: true
}, {
property: 'Espresso',
leaf: true
}, {
property: 'Redbull',
leaf: true
}, {
property: 'Coke',
leaf: true
}, {
property: 'Diet Coke',
leaf: true
}]
}, {
property: 'Fruit',
items: [{
property: 'Bananas',
leaf: true
}, {
property: 'Lemon',
leaf: true
}]
}, {
property: 'Snacks',
items: [{
property: 'Nuts',
leaf: true
}, {
property: 'Pretzels',
leaf: true
}, {
property: 'Wasabi Peas',
leaf: true
}]
}]
};
var store = Ext.create('Ext.data.TreeStore', {
defaultRootProperty: 'items',
root: data
});
Ext.Viewport.add({
xtype: 'panel',
layout: 'fit',
title: 'Example',
items: [{
xtype: 'nestedlist',
fullscreen: true,
title: 'Groceries',
displayField: 'property1',
store: store,
listConfig: {
xtype: 'list',
itemConfig: {
xtype: 'panel',
layout: 'fit',
items: [{
xtype: 'textfield',
value: 'Custom thing here',
}]
}
//itemTpl: '<span<tpl if="leaf == true"> class="x-list-item-leaf"</tpl>>{property} --- {leaf} --- Yeah --- Custom Thing here from template</span>'
}
}]
});
}
});
Example Fiddle with Component: https://fiddle.sencha.com/#view/editor&fiddle/29u0
For mapping data in listItem you can use https://docs.sencha.com/extjs/6.2.0/modern/Ext.dataview.ListItem.html#cfg-dataMap
Here is example on using ListItem with dataMap: https://www.sencha.com/forum/showthread.php?183774-dataMap-to-DataItem-s-items

How to trigger a function in a specific node on treelist in Sencha Extjs? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I am a newbie to Sencha ExtJS. I want to add a tab when the user clicks on the University node. what should I use? I search a lot on the internet but could not find the answer which exactly addresses my issue.
items: [{
region: 'west',
width: 200,
reference: 'treelistContainer',
layout: {
type: 'vbox',
align: 'stretch'
},
itemId:'addNewTab',
border: true,
scrollable: 'y',
bufferedRenderer: false,
animate: true,
rootVisible: false,
items: [{
xtype: 'treelist',
reference: 'treelist',
itemId:'childpanel',
store: {
root: {
expanded: true,
children: [{
text: 'Home',
iconCls: 'x-fa fa-home',
children: [{
text: 'Messages',
iconCls: 'x-fa fa-inbox',
leaf: true
}]
}, {
text: 'Users',
iconCls: 'x-fa fa-user',
children: [{
text: 'Tagged',
iconCls: 'x-fa fa-tag',
leaf: true
}, {
text: 'Inactive',
iconCls: 'x-fa fa-trash',
leaf: true
}]
}, {
text: 'Groups',
iconCls: 'x-fa fa-group',
leaf: true
}, {
text: 'Settings',
iconCls: 'x-fa fa-wrench',
children: [{
name:'haseeb',
text: 'University',
iconCls: 'x-fa fa-university',
leaf: true,
itemId: 'bar2',
// cls='mycls'
}]
}]
}
},
},
}],

As I saw you are in Modern Toolkit. So you need first to find the right listener for treelist, documentation
listeners: {
selectionchange : function(tree, rec) {
if (rec.data.text === 'University')
{
//Call the tab from here
}
}
},
Your code updated:
items: [{
region: 'west',
width: 200,
reference: 'treelistContainer',
layout: {
type: 'vbox',
align: 'stretch'
},
itemId:'addNewTab',
border: true,
scrollable: 'y',
bufferedRenderer: false,
animate: true,
rootVisible: false,
items: [{
xtype: 'treelist',
reference: 'treelist',
itemId:'childpanel',
listeners: {
selectionchange : function(tree, rec) {
if (rec.data.text === 'University')
{
//Call the tab from here
}
}
},
store: {
root: {
expanded: true,
children: [{
text: 'Home',
iconCls: 'x-fa fa-home',
children: [{
text: 'Messages',
iconCls: 'x-fa fa-inbox',
leaf: true
}]
}, {
text: 'Users',
iconCls: 'x-fa fa-user',
children: [{
text: 'Tagged',
iconCls: 'x-fa fa-tag',
leaf: true
}, {
text: 'Inactive',
iconCls: 'x-fa fa-trash',
leaf: true
}]
}, {
text: 'Groups',
iconCls: 'x-fa fa-group',
leaf: true
}, {
text: 'Settings',
iconCls: 'x-fa fa-wrench',
children: [{
name:'haseeb',
text: 'University',
iconCls: 'x-fa fa-university',
leaf: true,
itemId: 'bar2',
// cls='mycls'
}]
}]
}
},},}],

You can listen to the itemclick event on the tree and check that text of clicked record is University i.e record.text, Like this:
listeners:{
itemclick:function(me, record, item, index, e, eOpts){
if(record.data.text==='University'){
// your adding tab functionality comes here
}
}
}
Sample Code:
Ext.application({
name: 'Fiddle',
launch: function () {
var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [{
text: 'Home',
iconCls: 'x-fa fa-home',
children: [{
text: 'Messages',
iconCls: 'x-fa fa-inbox',
leaf: true
}]
}, {
text: 'Users',
iconCls: 'x-fa fa-user',
children: [{
text: 'Tagged',
iconCls: 'x-fa fa-tag',
leaf: true
}, {
text: 'Inactive',
iconCls: 'x-fa fa-trash',
leaf: true
}]
}, {
text: 'Groups',
iconCls: 'x-fa fa-group',
leaf: true
}, {
text: 'Settings',
iconCls: 'x-fa fa-wrench',
children: [{
name:'haseeb',
text: 'University',
iconCls: 'x-fa fa-university',
leaf: true,
itemId: 'bar2',
// cls='mycls'
}]
}]
}
});
Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
store: store,
width: 200,
rootVisible: false,
renderTo: Ext.getBody(),
listeners:{
itemclick:function(me, record, item, index, e, eOpts){
if(record.data.text==='University')
alert('University is clicked');
}
}
});
}
});
<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>

Extjs show grid table

Hi I start to get to know extjs. I stumbled on the first problem I can not solve. I use admin template. I created a new page by adding NavigationTree another item:
ProjectName / src / store / NavigationTree.js:
Ext.define('Wolf.store.NavigationTree', {
extend: 'Ext.data.TreeStore',
storeId: 'NavigationTree',
fields: [{
name: 'text'
}],
root: {
expanded: true,
children: [
{
text: 'Dashboard',
iconCls: 'x-fa fa-desktop',
rowCls: 'nav-tree-badge nav-tree-badge-new',
viewType: 'admindashboard',
routeId: 'dashboard', // routeId defaults to viewType
leaf: true
},
{
text: 'Email',
iconCls: 'x-fa fa-send',
rowCls: 'nav-tree-badge nav-tree-badge-hot',
viewType: 'email',
leaf: true
},
{
text: 'Profile',
iconCls: 'x-fa fa-user',
viewType: 'profile',
leaf: true
},
{
text: 'Search results',
iconCls: 'x-fa fa-search',
viewType: 'searchresults',
leaf: true
},
{
text: 'FAQ',
iconCls: 'x-fa fa-question',
viewType: 'faq',
leaf: true
},
{
text: 'Pages',
iconCls: 'x-fa fa-leanpub',
expanded: false,
selectable: false,
//routeId: 'pages-parent',
//id: 'pages-parent',
children: [
{
text: 'Blank Page',
iconCls: 'x-fa fa-file-o',
viewType: 'pageblank',
leaf: true
},
{
text: '404 Error',
iconCls: 'x-fa fa-exclamation-triangle',
viewType: 'page404',
leaf: true
},
{
text: '500 Error',
iconCls: 'x-fa fa-times-circle',
viewType: 'page500',
leaf: true
},
{
text: 'Lock Screen',
iconCls: 'x-fa fa-lock',
viewType: 'lockscreen',
leaf: true
},
{
text: 'Login',
iconCls: 'x-fa fa-check',
viewType: 'login',
leaf: true
},
{
text: 'Register',
iconCls: 'x-fa fa-pencil-square-o',
viewType: 'register',
leaf: true
},
{
text: 'Password Reset',
iconCls: 'x-fa fa-lightbulb-o',
viewType: 'passwordreset',
leaf: true
}
]
},
{
text: 'Widgets',
iconCls: 'x-fa fa-flask',
viewType: 'widgets',
leaf: true
},
{
text: 'Forms',
iconCls: 'x-fa fa-edit',
viewType: 'forms',
leaf: true
},
{
text: 'Charts',
iconCls: 'x-fa fa-pie-chart',
viewType: 'charts',
leaf: true
},
{
text: 'Views by test1',
iconCls: 'x-fa fa-table',
viewType: 'testdashboard',
leaf: true
}
]
}
});
ProjectName / src / view / test / test.js:
Ext.define('Wolf.view.test.Test', {
extend: 'Ext.Container',
xtype: 'testdashboard',
controller: 'test',
viewModel: {
type: 'test'
},
cls: 'test',
scrollable: true,
items: [
{
xtype: 'bi.testviews',
userCls: 'big-100 small-100 dashboard-item shadow'
}
// {
// xtype: 'network',
//
// // 60% width when viewport is big enough,
// // 100% when viewport is small
// userCls: 'big-60 small-100 dashboard-item shadow'
// },
// {
// xtype: 'hddusage',
// userCls: 'big-20 small-50 dashboard-item shadow'
// },
// {
// xtype: 'earnings',
// userCls: 'big-20 small-50 dashboard-item shadow'
// },
// {
// xtype: 'sales',
// userCls: 'big-20 small-50 dashboard-item shadow'
// },
// {
// xtype: 'topmovies',
// userCls: 'big-20 small-50 dashboard-item shadow'
// },
// {
// xtype: 'weather',
// userCls: 'big-40 small-100 dashboard-item shadow'
// },
// {
// xtype: 'todo',
// height: 340,
// userCls: 'big-60 small-100 dashboard-item shadow'
// },
// {
// xtype: 'services',
// height: 340,
// userCls: 'big-40 small-100 dashboard-item shadow'
// }
]
});
ProjectName / src / view / test / TestController.js:
Ext.define('Wolf.view.test.TestController', {
extend: 'Ext.app.ViewController',
alias: 'controller.test',
requires: [
'Ext.util.TaskRunner'
],
onRefreshToggle: function (tool, e, owner) {
},
clearChartUpdates: function () {
},
destroy: function () {
},
onHideView: function () {
}
});
ProjectName / src / view / test / TestModel.js:
Ext.define('Wolf.view.test.TestModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.test',
requires: [
'Ext.data.Store',
'Ext.data.field.Integer',
'Ext.data.field.String',
'Ext.data.field.Boolean'
],
stores: {
hddusage: {
autoLoad: true,
model: 'Wolf.model.DataXY',
proxy: {
type: 'api',
url: '~api/qg/area'
}
},
quarterlyGrowth: {
autoLoad: true,
model: 'Wolf.model.DataXY',
proxy: {
type: 'api',
url: '~api/qg/bar'
}
},
earnings: {
autoLoad: true,
model: 'Wolf.model.DataXY',
proxy: {
type: 'api',
url: '~api/qg/line'
}
},
servicePerformance: {
autoLoad: true,
model: 'Wolf.model.DataXY',
proxy: {
type: 'api',
url: '~api/qg/pie'
}
},
topMovies: {
autoLoad: true,
model: 'Wolf.model.DataXY',
proxy: {
type: 'api',
url: '~api/dashboard/movies'
}
},
networkData: {
autoLoad: true,
model: 'Wolf.model.MultiDataXY',
proxy: {
type: 'api',
url: '~api/dashboard/full'
}
},
visitors: {
autoLoad: true,
model: 'Wolf.model.MultiDataXY',
proxy: {
type: 'api',
url: '~api/dashboard/visitor'
}
},
bounces: {
autoLoad: true,
model: 'Wolf.model.MultiDataXY',
proxy: {
type: 'api',
url: '~api/dashboard/counce'
}
},
subscriptions: {
autoLoad: true,
model: 'Wolf.model.Subscription',
proxy: {
type: 'api',
url: '~api/subscriptions'
}
},
todos: {
autoLoad: true,
fields: [
{
type: 'int',
name: 'id'
},
{
type: 'string',
name: 'task'
},
{
type: 'boolean',
name: 'done'
}
],
proxy: {
type: 'api',
url: '~api/dashboard/tasks'
}
},
bicategories: {
autoLoad: true,
model: 'Wolf.Bi.model.Category',
proxy: {
type: 'api',
url: 'api/v1/bi/categories'
}
},
bicategoriesrecords: {
autoLoad: true,
model: 'Wolf.Bi.model.Records',
proxy: {
type: 'api',
url: 'api/v1/bi/views/test1/records'
}
}
}
});
projectNameBi / src / view / BIViews.js:
Ext.define('Wolf.Bi.view.test.BIViews', {
extend: 'Ext.Panel',
xtype: 'bi.testviews',
requires: [
'Ext.DataView'
],
// cls: 'dashboard-main-chart shadow',
height: 380,
bodyPadding: 15,
title: 'List',
layout: {
type: 'vbox',
align: 'stretch'
},
// tools: [
// {
// type: 'wrench',
// toggleValue: false,
// listeners: {
// click: 'onRefreshToggle'
// }
// }
// ],
columns: [
{
header: 'Name',
dataIndex: 'name'
}
],
items: [
{
xtype: 'dataview',
bind: {
store: '{bicategoriesrecords}'
},
itemTpl: new Ext.XTemplate(
// '<tpl for=".">',
'<div style="margin-bottom: 10px;" class="thumb-wrap">',
'<br/><span>name: </span><span>{name}</span>',
'<br/><span>id: </span><span>{id}</span>',
'<br/><span>amount: </span><span>{amount}</span>',
//'<tpl for="views"><b>{label}</b></tpl>',
'</div>'
// '</tpl>'
)
}
]
});
And this code gets the data where it gets the result of such a result:
https://postimg.org/image/hf5b0ac5v/
I would like to make these data were presented in a table with pagination. How do I achieve this? I am asking you for help.
I change BIViews.js to:
Ext.define('Wolf.Bi.view.test.BIViews', {
extend: 'Ext.grid.Grid',
xtype: 'bi.testviews',
columns: [{
text: 'Id',
dataIndex: 'id',
sortable: false,
flex: 1
}, {
text: 'Name',
dataIndex: 'name',
sortable: false,
flex: 1
}, {
text: 'Amount',
dataIndex: 'amount',
sortable: false,
flex: 1
}],
bind: {
store: '{bicategoriesrecords}'
},
dockedItems: [{
xtype: 'pagingtoolbar',
bind: {
store: '{bicategoriesrecords}'
},
dock: 'bottom',
displayInfo: true
}]
});
I see a table headers , but data is not loading , whats wrong?

Sounds like you need Ext.toolbar.Paging. Now, i don't know if it works with a dataview, so i've changed it to a grid. Without a Fiddle example i can't test this, but it should look something like this:
items: [
{
xtype: 'grid', // changed from 'dataview' to 'grid'.
bind: {
store: '{bicategoriesrecords}'
},
itemTpl: new Ext.XTemplate(
'<div style="margin-bottom: 10px;" class="thumb-wrap">',
'<br/><span>name: </span><span>{name}</span>',
'<br/><span>id: </span><span>{id}</span>',
'<br/><span>amount: </span><span>{amount}</span>',
'</div>'
),
dockedItems: [{
xtype: 'pagingtoolbar',
bind: {
store: '{bicategoriesrecords}'
},
dock: 'bottom',
displayInfo: true
}]
}
]
Give that a try.

How to expand a tree panel when page is loaded - EXTJS 4

var tree = Ext.create('Ext.tree.Panel', {
store: store,
rootVisible: false,
//useArrows: true,
frame: true,
title: 'Vehicle List',
region:'west',
width: 200,
root: {
expanded: true
},
checked : false,
height: 250,
dockedItems: [{
xtype: 'toolbar',
items: {
text: 'Get checked nodes',
handler: function(){
var records = tree.getView().getChecked(),
names = [];
Ext.Array.each(records, function(rec){
names.push(rec.get('MainID'));
});
Ext.MessageBox.show({
title: 'Selected Nodes',
msg: names.join('<br />'),
icon: Ext.MessageBox.INFO
});
}
}
}]
});
How can I get the tree to expand? I have tried
root: {
expanded: true
}
But it still doesn't work.

Add this to your model:
{ name: 'expanded', type: 'boolean', defaultValue: true, persist: false },
Or alternatively set expanded to true for each node you return from the server.

root: {
expanded: true
}
This should be within the definition of your store.
Something like the below.
var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{ text: "a", leaf: true },
{ text: "b", expanded: true, children: [
{ text: "c", leaf: true },
{ text: "d", leaf: true}
] }
]
}
});