Page 1 of 2 12 LastLast
Results 1 to 10 of 18

Thread: Extjs4 tree panel loading with bulk data

  1. #1
    Ext JS Premium Member
    Join Date
    Sep 2011
    Posts
    64

    Default Extjs4 tree panel loading with bulk data

    ExtJs 4.0.7

    In Our project we have requirement of loading a tree panel with bulk amount of node with lot of child nodes.
    It could go up to 500 nodes each with a structure.



    a(This could be of 500 nodes)
    |___leaf1
    |___leaf2
    |___leaf 3
    .........|____child1
    .........|_____child2
    .........|_____child4 (could go up to 50 to 60)

    On Loading the TreeStore in IE9, i am getting the error

    "A script on this page is causing Interner Explorer to run slowly,if it continues run your computer may be unresponsive".

    Working in FireFox.(but still for a fraction of second it says Not responding).

    Is there any other way to load the treepanel, to avaoid this error.

    Any help would be really appreciated

  2. #2
    Ext JS Premium Member
    Join Date
    Aug 2007
    Location
    Sarnia, ON, Canada
    Posts
    62

    Default

    Here are your options as I see them.

    1) First of all I would ask whether you are loading the nodes on demand or if you are loading the entire hierarchy on initial load? If you are not loading the hierarchy on demand, I would suggest doing so to improve DOM performance.


    2) Is it possible to sub categorize your nodes? Without understanding your data and your business requirements it's difficult to tell whether this is possible; however, it may be much more useful to allow users to drill down into the tree rather than presenting them with 500 root level items. Realistically the users probably aren't going to need to drill down into all 500 items to perform a business function and therefore it would likely be more efficient (both from a optimization and usability point of view) to display only the items the users need.

    For example, instead of:
    Root
    |___Product (500 items at this level)
    .........|____child1
    .........|____child2

    Sub-Categorize the tree:
    Root
    |___Product Category
    .........|____Product Sub Category
    ..................|____Product
    ...........................|____child1
    ...........................|____child2

    OR
    Root
    |___Products
    .........|____Display Items 1-100
    .........|____Display Items 101-200 (etc.)
    ..................|____Product
    ...........................|____child1
    ...........................|____child2

    3) If limiting the results using the technique above is not possible, than you might want to look into implementing paging. I have not seen a ExtJS 4 UX to do this; however, you could probably port something like the PagingTreeLoader (ExtJS 3) to ExtJS4
    http://www.sencha.com/forum/showthre...gingTreeLoader

    At the end of the day, no matter which option you choose, your solution will need to reduce the amount of DOM manipulation. From a user experience perspective, you should aim to provide the user with a simple way to find what they need, as opposed to "BAM, 500 results... Drill down into the one you're actually interested in".

    Hope this helps.

    Milan Zdimal

  3. #3
    Ext JS Premium Member
    Join Date
    Sep 2011
    Posts
    64

    Default

    Thanks a lot for the reply.
    I am attaching screenshot of the Tree grid:

    Unfortunately the paging is not possible, as we need to load the whole grid. There is a requirement of shifting the dates of the right-side grid, in that case the whole grid need to be moved/ shifted. For example Now in the screen the start date is march 2012, the user can shift the date to May 2012,in that case we need to shift the values accordingly in the associated tree store.

    But as per your suggestion I can sub categorize the tree: Something Like this:
    Job families
    |___job-Family -14
    .........|____Job category_14_5
    ..................|____Demand
    ..................|____Allocation
    .........|____Job category_14_4.
    ..................|____Demand
    ..................|____Allocation

    But because of the business needs I can not sub categorize more. do you think this will help.

    Thanks a lot again.
    Attached Images Attached Images

  4. #4
    Ext JS Premium Member
    Join Date
    Aug 2007
    Location
    Sarnia, ON, Canada
    Posts
    62

    Default

    Im just out to lunch... but i think i have a solution for you. Give me an hour. ;-)

  5. #5
    Ext JS Premium Member
    Join Date
    Sep 2011
    Posts
    64

    Default

    Awesome.. . I am waiting...

  6. #6
    Ext JS Premium Member
    Join Date
    Aug 2007
    Location
    Sarnia, ON, Canada
    Posts
    62

    Default

    I wanted to give you a good answer, but all of the sudden a really slow day turned into a really crazy day. I'll try to respond back later this evening. Sorry about that.

  7. #7
    Ext JS Premium Member
    Join Date
    Sep 2011
    Posts
    64

    Default

    Sure. Dont worry about it. I will wait for your reply and then implement teh same on the weekend.

  8. #8
    Ext JS Premium Member
    Join Date
    Sep 2011
    Posts
    64

    Default

    Hi Milanz,

    did you get a chance to put down the ides. .
    I am just waiting for your reply, any idea would be a great help for me to put together before the release, unfortunately I have only 6 more days to get this done .

  9. #9
    Ext JS Premium Member
    Join Date
    Aug 2007
    Location
    Sarnia, ON, Canada
    Posts
    62

    Default

    Sorry about that. I got sucked into an urgent project to implement a payment gateway this weekend. It will probably be faster to just call me and we can discuss it instead of writing up long threads. I'll PM you my number.

  10. #10
    Sencha Premium User mankz's Avatar
    Join Date
    Nov 2007
    Location
    Stockholm, Sweden
    Posts
    3,153
    Answers
    33

    Default

    We'll likely be releasing the code for a buffered TreeGrid shortly. As soon as 4.1 final is out we'll try to drop it into the UX forum.

Page 1 of 2 12 LastLast

Posting Permissions

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