You found a bug! We've classified it as
We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
Sencha Premium Member
Problem with Treestores
In an application we have a need to present a tree displaying the same content in two places: one which allows a user to edit content (add/edit/remove nodes) and another in which the same information is used as an option selection component.
In an ideal world it would be possible to share the same tree store across the two UI components. However, this is not practical because tree store nodes implement NodeInterface which mixes UI (expanded, icon, etc.) with data. When a store is shared across multiple tree grids the expanded state is shared. This is not acceptable to us.
Instead we use the tree store appended, removed and updated events to maintain a parallel set of nodes in a separate store. This works OK - sort of. The problem is our app requires that tree nodes should be sorted when nodes are added/edited and sorting the tree *store* results in a dom error when the tree grid has not yet been displayed. That is, if the tree grid has been displayed and tree store nodes are sorted everything works OK. If the tree grid has not been displayed sorting fails.
The problem, I think, is that the act of sorting the store results in an interaction with the UI. Why? It seems to me this is a bug. Sure I get that at some point the UI needs to reflect the sort order of the store but why the error when nodes on the hidden tree grid are sorted?
I've attached a sample application to illustrate the problem. The application presents a tab panel with two tabs. The tab visible when the application is started contains the 'edit' tree grid (ok, it doesn't edit anything because this is a minimal app to focus on the core problem). However it is the 'master' tree grid. Changes to it are reflected in the grid on the second tab (but not the other way around).
Before looking at the second tab, try collapsing one of the visible nodes (any node). You will see a DOM error. Now refresh browser to reset the application. Select the second tab so the second tree grid is visible. Then go back to the first grid and collapse a grid again. No error.
The error occurs when the node sort function is called in the function 'typeUpdated' in the controller. Again, the question is why is there connection with a UI component that is not ready (the viewready event has not been called)?
We resolve the problem by listening to the viewready event of the second (hidden) tree grid to set a property indicating the ready state of the view. We only sort nodes when the view property indicates the view is ready and can support sorting.