Javascript Ext JS树列表存储无限加载？

Ext js视图

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

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);

   }
});

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);
   }

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

我尝试了所有的解决方案，然后回答了几个解决方案。但这行不通。 任何人都请给我建议好的解决方案

---

提前谢谢。

没有工作的小提琴我无法测试，不管怎样，你似乎没有正确填充树洞

下面是一些可以帮助您正确加载/查看数据的更改。首先尝试使用空根节点初始化存储，并在存储配置中添加

root:{}

。 然后尝试使用

setRoot

而不是

setData

加载数据，更改

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

与

然后

store.setData(MainListArray);

与

---

没有小提琴我无法进行测试，不管怎样，你似乎没有正确地填满树洞

下面是一些可以帮助您正确加载/查看数据的更改。首先尝试使用空根节点初始化存储，并在存储配置中添加

root:{}

。 然后尝试使用

setRoot

而不是

setData

加载数据，更改

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

与

然后

store.setData(MainListArray);

与

---

终于找到了解决方案。

Store.js

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);

   }
});

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);
   }

---

终于找到了解决方案。

Store.js

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);

   }
});

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);
   }

---

要准确理解你的意思有点难。你能用“无限循环加载”来描述你所指的吗？另外：如果看不到

selectQuery

的内容，就很难理解

loadData

的工作原理。另外：在前端使用SQL并将未过滤的数据发送到数据库很可能是一个严重的安全问题。每个人都可以使用您的端点来执行数据库用户可以执行的任何操作。您能否在Sencha Fiddle中解决您的问题，并详细说明在那里复制它的步骤？要准确理解你的意思有点难。你能用“无限循环加载”来描述你所指的吗？另外：如果看不到

selectQuery

的内容，就很难理解

loadData

的工作原理。另外：在前端使用SQL并将未过滤的数据发送到数据库很可能是一个严重的安全问题。每个人都可以使用您的端点来执行数据库用户可以执行的任何操作。您能否在Sencha Fiddle中解决您的问题，并详细说明在那里复制它的步骤？在更改答案后，将不会发生无限循环，但在setRoot之后，我在这个根中没有获得任何数据store.setRoot（MainListArray）；'然后控制台“store.getRoot（）”此存储中没有数据。

MainListArray

将其传递到

setRoot

时的值是多少？console.log（MainListArray）；输出是root:children:Array（2）0:{ListName:“list 1”：扩展的true，children:Array（1）}1:ListName:“list 2”children:Array（2）0:{sub:2，leaf:true}1:{sub:3，leaf:true}对不起，你能发布格式化的输出

console.log（Ext.encode（MainListArray））

？@Federico Bardon非常感谢您的支持。在你的代码之后，我得到了解决方案。我也发布了我的答案。在更改答案后，将不会发生无限循环，但在setRoot之后，我在这个根中没有得到任何数据store.setRoot（MainListArray）；'然后控制台“store.getRoot（）”此存储中没有数据。

MainListArray

将其传递到

setRoot

时的值是多少？console.log（MainListArray）；输出是root:children:Array（2）0:{ListName:“list 1”：扩展的true，children:Array（1）}1:ListName:“list 2”children:Array（2）0:{sub:2，leaf:true}1:{sub:3，leaf:true}对不起，你能发布格式化的输出

console.log（Ext.encode（MainListArray））

？@Federico Bardon非常感谢您的支持。在你的代码之后，我得到了解决方案。我也把我的答案贴出来了。