Results 1 to 5 of 5

Thread: Tree taking long time in loading when records exceeds 200 count

  1. #1
    Sencha User
    Join Date
    Jul 2012
    Posts
    10
    Answers
    2
    Vote Rating
    1
      0  

    Default Answered: Tree taking long time in loading when records exceeds 200 count

    Hi

    We are using Ext Tree in our project . We observered that whenever the record counts increases 200 count, tree takes long time in rendering . Data from the server comes in around max 1 sec but rendering of the tree takes more than 20-25 secs.

    I am posting below the code we have been using in our project . I would request you to review my code and help us in knowing what wrong is happening.[
    code]
    Ext.define('treeNode', {
    extend: 'Ext.data.Model',
    fields: [
    { name: 'id', type: 'string' },
    { name: 'text', type: 'string' },
    { name: 'code', type: 'string' },
    { name: 'nodeType', type: 'string' },
    { name: 'qtip', type: 'string' }
    ]
    });

    var store = Ext.create('Ext.data.TreeStore', {
    model: 'treeNode',
    sortOnLoad: false,
    batchUpdateMode:'complete',
    proxy: {
    type: 'ajax',
    url: 'Services/InfographicsDataService.svc/GetTree',
    extraParams: {
    langCode: lcode,
    surveyCode: scode
    },
    headers: {
    'Content-Type': 'application/json; charset=utf-8'
    },
    reader: {
    type: 'json',
    root: 'd'
    }
    },
    listeners:
    {
    append: function () {

    },
    load: function () {

    },
    write: function () {

    }
    },
    root: {
    text: 'CodeBook(' + scode.toUpperCase() + ')',
    id: 'root',
    expanded: true
    }

    });

    this.tree = Ext.create('Ext.tree.Panel', {
    store: store,
    columnLines: true,
    header: false,
    renderTo: 'tree-div',
    height: 220,
    width: 713,
    useArrows: false,
    iconCls: 'x-tree-noicon',
    style: { 'fontize': '20px' },
    // viewConfig: {
    // style: { overflowX: 'true' }
    // },

    });

    [/code]



    Regards,

  2. Hi ,

    Thanks for reply.

    I have found the problem. Problem is in the line
    root: {
    expanded: true
    }

    with root expanded setting, tree loads the next level data also BUT- It loades next level data in non batchupdate mode and thus takes a lot of time specially in getHeight method(extjs calls internally) which tree calls for each node.
    If I keep root node expanded false and expand programatically my root node and in after render event ( afterrender:function (tree) {tree.getRootNode().expand();) then tree loads next level data in batchupdate mode and loads the tree in less than 1 sec.

    If I am unclear let me know. I would try to explain more. rest extjs people can make us understand.

  3. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,551
    Answers
    3931
    Vote Rating
    1271
      0  

    Default

    The issue may not be your code but the tree trying to render everything and browser having to take time to do it for that many nodes
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  4. #3
    Sencha Premium Member
    Join Date
    May 2012
    Posts
    52
    Vote Rating
    12
      0  

    Default

    Might be something else - does the render time change with the timout set in the proxy, if you set it to 10000 for example is the render time redubced to about 10 seconds? If you set "Autoload" for the store does it render fast then?

  5. #4
    Sencha User
    Join Date
    Jul 2012
    Posts
    10
    Answers
    2
    Vote Rating
    1
      1  

    Default

    Hi ,

    Thanks for reply.

    I have found the problem. Problem is in the line
    root: {
    expanded: true
    }

    with root expanded setting, tree loads the next level data also BUT- It loades next level data in non batchupdate mode and thus takes a lot of time specially in getHeight method(extjs calls internally) which tree calls for each node.
    If I keep root node expanded false and expand programatically my root node and in after render event ( afterrender:function (tree) {tree.getRootNode().expand();) then tree loads next level data in batchupdate mode and loads the tree in less than 1 sec.

    If I am unclear let me know. I would try to explain more. rest extjs people can make us understand.

  6. #5
    Sencha Premium Member
    Join Date
    May 2012
    Posts
    52
    Vote Rating
    12
      0  

    Default

    Well done, and thank you for letting us know. Nested lists are powerful but they have a log of quirks - I spend more time on them than almost anything!

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •