Managing stores in a complex component

The Ext Gantt chart deals with a lot of observable data stores: Tasks, Dependencies, Assignments, Resources etc. A typical view component will observe its data stores and react to their changes. When building a view component that consumes data from one or more stores, it’s important to remember to de-register any store listeners in the Component destructor. If you don’t, you can end up with hard-to-trace errors after creating multiple views using the same store. Another common case where this happens is if you have a view component in a window that can be destroyed/closed. Once it’s re-opened, a new component instance is created and is tied to the same original data store. Consider this simple piece of code.

If the task store listeners aren’t cleaned up properly in the Gantt chart destructor, then code may be triggered in the first Gantt panel instance by a store listener even though the panel itself is destroyed. These errors are often tricky to debug and a good idea is to test this, it’s even quite easy. This is what we use for our tests to make sure we don’t ‘leak’ any listeners.

Above you can see that we verify that no listeners are left for 5 different stores, both when not rendering the panel and when rendering the panel (as we shouldn’t assume when the listeners are added). In our TestClass for Siesta we have added these two useful methods for Observables:

Hope this helps you test your Observables!

Leave a Comment