I have found many examples of tree that have been loaded via root data in store which is static or via tree store that loads data tree view appears, ultimately loading the tree in advance.
My requirement is the tree is initially empty, with no data so I use removeAll on the tree store to achieve it even if the tee is initially loaded.
I am using ExtJs V 5.0.1.
Next on lick of button I load the tree via store.load method.
The tree data kept in json file outputted by php rest service.
The tree loads fine with the button click. The issue is all the collapse or expand event only works ones. That in my case the first element is expanded will collapse once and then wont expand. Similarly for the collapsed child element, wont collapse once expanded.
Adding my code below
Ext.define('TestTheme2.controller.Controller', {
extend: 'Ext.app.Controller',
requires: [
'Ext.window.MessageBox'
],
stores: [
],
config: {
isGridInspected: false
},
refs: {
treeGrid: '#treegrid'
},
control: {
"#treegrid":{
afterrender: 'afterViewRender'
},
"#loadButton":{
click:'onBtnClick'
}
},
afterViewRender: function(component, eOpts){
this.getTreeGrid().getStore().removeAll();
},
onBtnClick: function(){
this.getTreeGrid().getStore().load();
}
});
My view code
Ext.define('TestTheme2.view.MyTreeGrid', {
extend: 'Ext.tree.Panel',
alias: 'widget.MyTreeGrid',
requires: [
'TestTheme2.store.MyStore',
'Ext.tree.View',
'Ext.grid.column.Check',
'Ext.tree.Column',
'Ext.grid.column.Widget',
'Ext.button.Button',
'Ext.menu.Menu',
'Ext.menu.Item',
'Ext.data.*',
'Ext.grid.*',
'Ext.tree.*',
],
itemId: 'treegrid',
width: '',
title: '',
allowDeselect: true,
enableColumnHide: false,
rowLines: true,
scroll: 'vertical',
sortableColumns: false,
store: 'MyStore',
rootVisible: false,
viewConfig: {
itemId: 'mytreeview2',
enableTextSelection: false,
markDirty: false,
stripeRows: true,
animate: true
},
columns: [
{
xtype: 'checkcolumn',
itemId: 'mycheck',
width: 50,
sortable: false,
dataIndex: 'mark',
text: ''
},
{
xtype: 'treecolumn',
width: 120,
sortable: false,
dataIndex: 'year',
text: 'Year',
flex: 1
},
{
xtype: 'gridcolumn',
width: 120,
sortable: false,
dataIndex: 'week',
text: 'Week'
},
{
xtype: 'gridcolumn',
width: 110,
sortable: false,
dataIndex: 'startdate',
text: 'Start Date'
},
{
xtype: 'gridcolumn',
width: 110,
sortable: false,
dataIndex: 'enddate',
text: 'End Date'
}
]
});
My Store Code
Ext.define('TestTheme2.store.MyStore', {
extend: 'Ext.data.TreeStore',
requires: [
'TestTheme2.model.MyModel'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
storeId: 'MyStore',
model: 'TestTheme2.model.MyModel',
proxy: {
type: 'ajax',
url: '../../PhpWS/MockRestFlow?Service=MyService&type=byweek'
}
}, cfg)]);
}
});
My Model code
Ext.define('TestTheme2.model.MyModel', {
extend: 'Ext.data.Model',
requires: [
'Ext.data.field.Field'
],
fields: [
{
name: 'year'
},
{
name: 'week'
}
{
name: 'startdate'
},
{
name: 'enddate'
}
{
name: 'mark'
}
]
});
My Json File
{
text: '.',
children: [
{
year: 2014,
week: 33,
synergyid: '',
startdate: '01/11/2014',
enddate: '02/11/2014',
mark: false,
expanded: true,
children: [
{
year: 2014,
week: 33,
startdate: '03/11/2014',
enddate: '04/11/2014',
mark: false,
leaf: true
},
{
year: 2014,
week: 33,
startdate: '05/11/2014',
enddate: '06/11/2014',
mark: false,
leaf: true
},
{
year: 2014,
week: 33,
startdate: '07/11/2014',
enddate: '08/11/2014',
mark: false,
leaf: true
}
]
},
{
year: 2014,
week: 34,
startdate: '09/11/2014',
enddate: '10/11/2014',
expanded: false,
mark: false,
children: [
{
year: '2014',
week: 34,
startdate: '11/11/2014',
enddate: '12/11/2014',
mark: false,
leaf: true
},
{
year: 2014,
week: 34,
startdate: '13/11/2014',
enddate: '14/11/2014',
mark: false,
leaf: true
},
{
year: 2014,
week: 34,
startdate: '15/11/2014',
enddate: '16/11/2014',
mark: false,
leaf: true
}
]
},
{
year: 2014,
week: 35,
startdate: '17/11/2014',
enddate: '18/11/2014',
mark: false,
expanded: false,
children: [
{
year: 2014,
week: 35,
startdate: '19/11/2014',
enddate: '20/11/2014',
mark: false,
leaf: true
},
{
year: 2014,
week: 35,
startdate: '21/11/2014',
enddate: '22/11/2014',
mark: false,
leaf: true
},
{
year: 2014,
week: 35,
startdate: '23/11/2014',
enddate: '24/11/2014',
mark: false,
leaf: true
}
]
},
{
year: 2014,
week: 36,
startdate: '17/11/2014',
enddate: '18/11/2014',
mark: false,
expanded: false,
children: [
{
year: 2014,
week: 36,
startdate: '19/11/2014',
enddate: '20/11/2014',
mark: false,
leaf: true
},
{
year: 2014,
week: 36,
startdate: '21/11/2014',
enddate: '22/11/2014',
mark: false,
leaf: true
},
{
year: 2014,
week: 36,
startdate: '23/11/2014',
enddate: '24/11/2014',
mark: false,
leaf: true
}
]
},
{
year: 2014,
week: 37,
startdate: '17/11/2014',
enddate: '18/11/2014',
mark: false,
expanded: false,
children: [
{
year: 2014,
week: 37,
startdate: '19/11/2014',
enddate: '20/11/2014',
mark: false,
leaf: true
},
{
year: 2014,
week: 37,
startdate: '21/11/2014',
enddate: '22/11/2014',
mark: false,
leaf: true
},
{
year: 2014,
week: 37,
startdate: '23/11/2014',
enddate: '24/11/2014',
mark: false,
leaf: true
}
]
},
{
year: 2014,
week: 37,
startdate: '17/11/2014',
enddate: '18/11/2014',
mark: false,
expanded: false,
children: [
{
year: 2014,
week: 37,
startdate: '19/11/2014',
enddate: '20/11/2014',
mark: false,
leaf: true
},
{
year: 2014,
week: 37,
startdate: '21/11/2014',
enddate: '22/11/2014',
mark: false,
leaf: true
},
{
year: 2014,
week: 37,
startdate: '23/11/2014',
enddate: '24/11/2014',
mark: false,
leaf: true
}
]
}
]
}
