Ext JS treelist store loading infinitely?

Question

Ext js View

There is option called treelist in the view. when use some static data in the tree list it working fine. when changed to dynamic data load from store it not loading.

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'

        }
    ],
});

Store

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

   }
});

Controller

onShowHistory:function()
{

    var showHistoryView = Ext.create('Count.view.History');
    var storeHistory = Ext.create('Count.store.History');
    storeHistory.loadData();
    Ext.Viewport.add(showHistoryView);

}

But when call loadData function in store data looping loading infinitely?

I tried all the solution before answered few solutions. But it won't work. Anyone please suggest me good solution for this.

Thanks in Advance.

Answer 1

I can't test without a working fiddle, anyway it seems you are not filling the TreeStore correctly.

Here is some changes can help you to load/view data correctly. First try to initialize the store with an empty root node adding root: {} in your store config. And then try to load data using setRoot instead of setData, change

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

with

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

and then

store.setData(MainListArray);

with

store.setRoot(MainListArray);

Answer 2

Finally got the solution.

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

View .js

item :[ { xtype : 'treelist' }]