我发现很多树的例子都是通过存储中的根数据加载的，这是静态的，或者通过树存储加载数据树视图，最终加载树。
我的要求是树最初是空的，没有数据，所以即使最初加载了T恤，我也会在树存储上使用removeAll来实现它。
我正在使用ExtJs V 5.0.1。
接着点击按钮，我通过store.load方法加载树。
树数据保存在php rest服务输出的json文件中。
单击按钮，树加载正常。 问题是所有崩溃或扩展事件只有作品。在我的情况下，第一个元素被展开将崩溃一次，然后不会扩展。同样，对于折叠的子元素，一旦展开就不会崩溃。
添加我的代码
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();
}
}）;
我的观看代码
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'
}
]
}）;
我的商店代码
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)]);
}
}）;
我的模型代码
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'
}
]
}）;
我的Json文件
{
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
}
]
}
]
}
答案 0 :(得分：2)
不是在渲染后删除商店值，而是在点击按钮时再次加载商店，请你试试下面的一次我在帖子中发现，
最初定义一个没有子项的空扩展根，然后您可以随时加载商店：
Ext.create('Ext.data.TreeStore', {
model: '...',
proxy: {
type: 'ajax',
reader: {
type: 'json',
root: 'data'
},
api: {
read : 'some url'
}
folderSort: true,
rootVisible: false,
root: {expanded: true, text: "", "data": []} // <- Inline root
});
在显式.load之后，内联根被覆盖。 希望这会对你有所帮助。