Extjs treepanel store.load问题
Extjs treepanel store.load问题
提问于 2014-10-14 05:21:26
我已经发现了许多树的例子，这些树是通过存储中的根数据加载的，这是静态的，或者是通过加载数据树视图的树存储来加载的，最终会提前加载树。
我的要求是树最初是空的，没有数据，所以我在树存储上使用removeAll来实现它，即使tee最初是加载的。
我正在使用ExtJsV5.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
}
]
}
]
}回答 1
Stack Overflow用户
回答已采纳
发布于 2014-10-14 06:40:22
与其在呈现后删除存储值，然后单击按钮再次加载存储，请您尝试一下下面的内容，这是我在一篇文章中看到的，
最初只需定义一个没有子的空展开根，然后您可以随时加载该存储：
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之后，内联根将被覆盖。希望这能帮到你。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26353163
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号