1

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.

sarathi
  • 1,009
  • 1
  • 7
  • 14
  • It's a little hard to understand what you mean exactly. Can you describe what you refer to by "looping loading infinitely"? Also: Without seeing the content of `selectQuery` it's hard to understand how `loadData` works. Also: Using SQL in the frontend and sending this unfiltered to the database will most likely be a serious security issue. Everyone can use your endpoint to do whatever the Database user is allowed to do. – Jonas Osburg Oct 21 '19 at 13:30
  • Could you work up your issue in the Sencha Fiddle and elaborate on the steps to reproduce it there? https://fiddle.sencha.com/#home – Brandon Oct 21 '19 at 14:40

2 Answers2

0

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);
Federico Baron
  • 967
  • 6
  • 15
  • after changing your answer infinity looping will not happen but after setRoot, i didn't get any data in this root. 'store.setRoot(MainListArray);' then console 'store.getRoot()' no data in this store. – sarathi Oct 22 '19 at 14:22
  • What's the value of `MainListArray` when you pass it to `setRoot`? – Federico Baron Oct 22 '19 at 15:20
  • console.log(MainListArray); Output is root: chidren : Array(2) 0: {ListName : "list 1": expanded true, children : Array(1)} 1 : ListName : "list 2" children : Array(2) 0: {sub : 2, leaf : true} 1 :{sub : 3, leaf : true} – sarathi Oct 23 '19 at 07:15
  • I'm sorry, can you post the formatted output `console.log(Ext.encode(MainListArray))`? – Federico Baron Oct 23 '19 at 12:20
  • 1
    @ Federico Bardon thank you so much for your support. after your code, I got the solution. I have posted my answer aslo. – sarathi Oct 24 '19 at 06:38
0

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' }]
sarathi
  • 1,009
  • 1
  • 7
  • 14