PDA

View Full Version : Extjs4 tree panel loading with bulk data



Susanta_bmc
16 Mar 2012, 7:51 AM
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

milanz
16 Mar 2012, 10:00 AM
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/showthread.php?66923-3.0-Ext.ux.tree.PagingTreeLoader

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

Susanta_bmc
16 Mar 2012, 10:33 AM
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.

milanz
16 Mar 2012, 10:57 AM
Im just out to lunch... but i think i have a solution for you. Give me an hour. ;-)

Susanta_bmc
16 Mar 2012, 11:10 AM
Awesome.. :) . I am waiting...

milanz
16 Mar 2012, 12:37 PM
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.

Susanta_bmc
16 Mar 2012, 12:45 PM
Sure. Dont worry about it. I will wait for your reply and then implement teh same on the weekend.

Susanta_bmc
18 Mar 2012, 11:49 AM
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 :( .

milanz
18 Mar 2012, 11:54 AM
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.

mankz
18 Mar 2012, 1:20 PM
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.

Susanta_bmc
23 Mar 2012, 6:28 PM
Any probable dates for to get the ux

mankz
25 Mar 2012, 5:02 AM
No, avout 2-3 weeks I think.

Susanta_bmc
28 Mar 2012, 10:04 AM
I am not sure if this is already resolved but in my case i looked through the posting http://www.sencha.com/forum/showthread.php?129866-Support-for-Buffered-Tree

(http://www.sencha.com/forum/showthread.php?129866-Support-for-Buffered-Tree)and made few changes to get the buffer for the tree panel. if any one interested let me know i will post the details.

paulieb12
23 Apr 2012, 12:50 PM
Susanta_bmc

Very interested in your solution. If you could PM me teh code or add as attachment that would be excellent.

We have a similar requirement to yourself. Our users want to be able to query and return a large dataset. This needs to be displayed in a treegrid to a max of ~10,000 rows (including parents and children).

For that to be in any way performant we need to buffer the results. What I would ideally like to do is pull all results into the store and then only render say 100-200 rows. As you scroll up and down further results are pulled from the store.

We also need to support sorting(multi column), filtering and a search box.

mankz:

Any progress report on the UX? Also do you think it is possible to get added as a new feature in Ext 4.1 or later?

panpur
23 Apr 2012, 11:28 PM
I am not sure if this is already resolved but in my case i looked through the posting http://www.sencha.com/forum/showthread.php?129866-Support-for-Buffered-Tree

(http://www.sencha.com/forum/showthread.php?129866-Support-for-Buffered-Tree)and made few changes to get the buffer for the tree panel. if any one interested let me know i will post the details.

Hi, could you please share what changes you made to make it work?

Thanks

Anton_Siamashka
6 May 2012, 2:15 AM
No, avout 2-3 weeks I think.

Do you have any result with it?

dllchrist
19 Jul 2012, 3:18 PM
bump this, when the 'buffered tree grid' ux will be available?

garg.shivani02
30 Jul 2014, 2:29 AM
I am not sure if this is already resolved but in my case i looked through the posting http://www.sencha.com/forum/showthread.php?129866-Support-for-Buffered-Tree

(http://www.sencha.com/forum/showthread.php?129866-Support-for-Buffered-Tree)and made few changes to get the buffer for the tree panel. if any one interested let me know i will post the details.

Hi,

Can you please post the details to get the buffer for the tree panel.
It would be a great help.

Thanks!!