Implementing filters for ExtJS Tree grid with large amount of data

Question

I am working on a project which is using ExtJS 4.1

I need to implement a tree grid with filters. As per my understanding from reading various articles, blogs and SO posts, ExtJS does not provide filter mechanism with tree store and we need to write our own filtering mechanism.

For filtering there are two approaches suggested: 1) Load the data into the tree grid and then show / hide the node based on filter conditions 2) Manipulate the store (copy the data and remove the record from the store)

I tried first approach. It was working perfectly with the test data (around 30 nodes). But with the snapshot of production data, I was getting "Unresponsive Script" error in IE and FireFox. With Chrome it was working fine.

Basically the production database has large amount of data, around 3500 records which form around 900 nodes in the tree grid. I suspect, once the tree store is populated, while rendering all 900 nodes into the tree grid, I get "Unresponsive Script" error.

I am new to ExtJS and not sure what is the best way to tackle this problem. I would like to know, how does filtering works on grid. Can I replicate same filtering mechanism for Tree grid?

Any suggestions to tackle this problem are welcome.

Answer 1

I have found that loading child nodes on the expand events of each node is a decent way to minimize the dom interaction of the tree panel. That way when you filter, it's only going to need to filter the first level of the tree structure rather than the entire thing. I have it working in an access control management application right now that is handling about 350 resources in one tree panel and two others with about 75 nodes each that are linked together through events. There's no noticeable UI lag with that approach but I haven't scaled it up quite to your scale and it would depend greatly how many items were in the first level of your tree whether or not that could work for you.

Answer 2

Instead of Tree if you can use Grid with grouping then use you can use Grid with filtering like this with pagination. If not then you can use something like Ext.grid.plugin.BufferedRenderer which can be used for TreePanel as well but it is available only on 4.2. If none of this is the solution for you then you have to create your own custom filtering than can handle pagination for you.