Ext JS Premium Member
rendering of expanded nodes with accordion panel/tree panel
This unfortunately will be shorter than originally I wrote (I timed out and lost my full diatribe...)
I have the following setup:
This all works perfectly. When I do the following there is no issue:
- An accordion panel which contains "panel". In one panel is a tree panel. In another is a ListView
- The tree panel uses a custom tree model, but essentially is a serious of collections, that contain 1-N albums that contain 1-N countries. The list view is a list of all countries.
- The tree model itself is a proxy to the application's global stores which contain the physical models which are managed by various controllers. The ListView also gets it's model from these global stores, but since it is a pain view of the country store there is no need to wrap here.
- I have a tree store listener to help manage/sync tree structure differences.
(so far so good) However if instead of being on the Browse Collection panel, if the user is on a different Accordion panel (like Countries) the result is a little different.
- Expand the collection node, and then expand the album node.
- Create a new country "mooX".
- Create an object (in my case a stamp) which indirectly will relate "mooX" to album "bar".
- If the user is on the Browse Collection panel which contains the TreePanel the country "mooX" will correctly appear under the expanded album "bar" after the TreeModels/Stores are updated.
I have verified via debugging that the node/structure tree is completely updated correctly. The node is rendered/inserted first using renderChild with renderMode = MAIN. (this is the same in both cases and is the placeholder node). However, when the update() is called and the doUpdate( ) is invoked (on delayed task) since the tree is not visible (as it is on another accordion panel) the node is never "filled in" with a renderMode of BODY. Thus when the user switches to the Browse Collection pane the tree panel shows a node but it is missing the text/icon and other needed nodal information (see attached image).
So the trick is, I need to make sure update() is called when the user sees the Tree Panel. The panel containing the tree panel will emit an Expand event when it is shown. I noticed that the TreePanel will call update() with the onAdd(), onRemove(), onScroll() etc. method as well as one other one: recalculate( ). It is noted in the javadoc for recalculate() for Component this will "do nothing by default".
So what I ended up doing was listening for the Events.EXPAND call on the content panel that represented the Browse Collection accordion pane, and then called the tree panel's recalculate() method which now correctly shows the update.
I am wondering if much like calling layout, whether the afterExpand( ) method of ContentPanel should automatically call recalculate on the children components? For things that are not trees this would not have any impact, but trees would correctly render their pending "inserted nodes" correctly.
Which GXT version are you using? Update to 2.1.3
Ext JS Premium Member
thanks sven. Yes I am using GXT 2.1.1 I see now in the change log there is a bug fix:
 Fixed TreePanel updates not working correctly while TreePanel is not visible.
that might work. I'll have to wait for it to be released without subscription. This application is developed as a hobby open-source application.
I am having the same issue and do not have a subscription to download the latest release. Is there a work-around for this in the meantime?
Please disregard my previous post. I just read the post in it's entirety and realized the work-around is described in detail.
Tags for this Thread