Ext JS树列表存储无限加载?

Question

Ext js View

视图中有一个名为树列表的选项。 当使用树列表中的一些静态数据时，它工作正常。 当更改为动态数据加载时，从存储它不加载。

Ext.define('Count.view.History', {
extend      : 'Ext.Panel',
xtype       : 'historyView',
controller  : 'main',
requires    : ['Count.store.History'],
width       : '100%',
height      : '100%',
title       : 'History',
closable    : true,
autoDestroy : true,
centered    : true,
layout      : 'fit',
fullscreen  : true,
scrollable  : true,    
items       :
[
{
xtype  : 'tree',
store  : 'History'
}
],
});

商店

Ext.define('Count.store.History', {
extend  : 'Ext.data.TreeStore',
autoLoad : false,
alias       : 'store.HistoryStore',
requires    : ['Count.Db', 'Count.model.history'],
config :
{
model   : 'Count.model.history'
},
loadData    : function()
{ 
var meObj=this;
var sqlString = "SELECT tbl_list.ListName, tbl_list.MasterCount, tbl_sub_count.masterCountId, tbl_sub_count.subCount FROM tbl_list INNER JOIN tbl_sub_count ON tbl_list.Id=tbl_sub_count.masterCountID where tbl_sub_count.status='1';";
Count.Db.selectQuery(sqlString, meObj.callbackLoadData, meObj);
},
callbackLoadData   : function(results, scope)
{
var store      = scope;
var len        = results.rows.length;
var MainListArray = {'root': {'expanded': true,  'children': []}};

var masterCountId = "";
var resultObj = "";
for (var i=0; i<len; i++)
{console.log(results);
if(masterCountId == "" || masterCountId != results.rows.item(i).masterCountId)
{
if(resultObj != "")
{
MainListArray.root.children.push(resultObj);
}
resultObj = {'ListName': results.rows.item(i).ListName, 'expanded': true, 'children': []}
masterCountId = results.rows.item(i).masterCountId;
var subListObj = {'subCount': results.rows.item(i).subCount, 'leaf': true}
resultObj.children.push(subListObj);
}
else
{
var subListObj = {'subCount': results.rows.item(i).subCount, 'leaf': true}
resultObj.children.push(subListObj);
}
}
if(resultObj != "")
{
MainListArray.root.children.push(resultObj);
}
console.log(MainListArray);
store.setData(MainListArray);
}
});

控制器

onShowHistory:function()
{
var showHistoryView = Ext.create('Count.view.History');
var storeHistory = Ext.create('Count.store.History');
storeHistory.loadData();
Ext.Viewport.add(showHistoryView);
}

但是当调用loadData函数在存储数据循环无限加载时？

在回答几个解决方案之前，我尝试了所有解决方案。但它行不通。 任何人请为我建议很好的解决方案。

提前谢谢。

Answer 1

如果没有工作的小提琴，我无法进行测试，无论如何，您似乎没有正确填充 TreeStore。

以下是一些可以帮助您正确加载/查看数据的更改。首先尝试使用空根节点初始化存储，在存储配置中添加root: {}。 然后尝试使用setRoot而不是setData加载数据，更改

var MainListArray = {'root': {'expanded': true,  'children': []}};

跟

var MainListArray = {'ListName': 'root', 'expanded': true, 'children': []};

然后

store.setData(MainListArray);

跟

store.setRoot(MainListArray);

Answer 2

终于找到了解决方案。

商店.js

Ext.define('Count.store.History', {
extend  : 'Ext.data.TreeStore',
alias       : 'store.HistoryStore',
requires    : ['Count.Db', 'Count.model.History'],
autoLoad: false,
rootProperty: "root",
root: {},
loadData    : function()
{ 
var meObj=this;
var sqlString = "SELECT list.ListName, list.Count, sub_count.masterCountId, tbl_sub_count.subCount FROM tbl_japa_list INNER JOIN tbl_sub_count ON list.Id=tbl_sub_count.masterCountID where tbl_sub_count.status='1';";
Count.Db.selectQuery(sqlString, meObj.callbackLoadData, meObj);
}, callbackLoadData : function(results, scope)
{
var store      = scope;
var len        = results.rows.length;
var MainListArray = { 'expanded': true, 'children': []};
var CountId = "";
var resultObj = "";
for (var i=0; i<len; i++)
{
if(CountId == "" || CountId != results.rows.item(i).CountId)
{
if(resultObj != "")
{
MainListArray.children.push(resultObj);
}
resultObj = {'text': results.rows.item(i).ListName, 'expanded': true, 'children': []}
CountId = results.rows.item(i).CountId;
var subListObj = {'text': results.rows.item(i).subCount, 'leaf': true}
resultObj.children.push(subListObj);
}
else
{
var subListObj = {'text': results.rows.item(i).sub, 'leaf': true}
resultObj.children.push(subListObj);
}
}
if(resultObj != "")
{
MainListArray.children.push(resultObj);
}
store.setRoot(MainListArray);
}

查看.js

item :[ { xtype : 'treelist' }]