ExtJS 4 weird tree loading behavior

0
votes

I have a tree panel which uses an ajax store. When the server fetches results for a node, it's usually not instantaneous (takes a few seconds).

I have another grid control which reloads the root node (depending on different parameters)

This may cause weird behavior when a request is sent before the previous one is completed:

  1. A user selects something on the grid, which causes the tree to send a request
  2. Before the previous request is complete the user changes something which causes a new request to be sent
  3. The tree starts to have problems when expanding nodes after both requests are complete

Is there a way for me to abort all pending requests sent by the tree store before reloading the tree?

Thanks in advance for your help! Amitay.

P.S - ExtJS version 4.1.1

1
javascriptextjsextjs4.1
So the content of the tree might be reloaded with a different data while a server request on the previous data is ongoing. Is this what you are trying to prevent? Can you explain why you reload the root node? – Izhaki
This is actually a tree-grid (not a simple tree). I use it for a dashboard in my application, which shows various metrics. Thanks to the tree, the user can drill down to view the data in detail. When the user selects a metric to display, the tree should be reloaded to reflect the user's selection. The problem happens when the user selects something, and changes his selection before the previous had finished loading. – amitayh

1 Answers

1
votes

Adding data to a tree store is a tricky business. The framework does many things in an effort to keep things aligned every time it loads or loads data into the tree store. As an example try adding a record to a tree store that already exists in a tree somewhere else. If the ids of records are durable (meaning set from server) then all heck breaks loose. This is because a tree store has complicated machinery and may not fit all use cases.

So no wonder that if two competing requests try to load data into the tree store things will not work well. What can be done?

  1. Load mask. When a tree branch is expanded the loading mask should cover the tree to hide any other controls. This helps to avoid concurrent data manipulation. In 4.1.1 this actually works OOTB (was broken before).

  2. If you are allowing external controls to influence the tree look at the 'loading' property http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.Store-property-loading . Checking for loading should prevent other action to proceed. There is an 'abort' method on data connection to cancel the pending request, if this is desired.

  3. Finally look at autoAbort property on data connection: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.Connection-cfg-autoAbort This will kill all other pending requests, might be what you are looking for.