Duplicate DOM elements by including view by xtype in two different views

Question

I have an app that launches a view by xtype on startup to get the user to sign up. This view has some selectfields and all works as expected. The use also has the option to skip this view and access it later. When the user accesses this view at a later time, I have an issue where data is not being appended to the correct elements. The values are being set but running Ext.ComponentQuery.query('[itemId=item_name]') returns 2 elements. Somehow the elements of this view are getting duplicated.

I have also tried setting autoDestroy: true on the config for this view but this has no effect whatsoever.

I have also tried manually destroying the view using destroy() method on the deactivate() event. When I do this, the behavior turns strange and selecting an item from another pushed view and returning back to the profile screen causes the navigationview to break as if this view is not present. The header of the navigationbar breaks and the back button is incorrectly shown.

Why are the view elements being duplicated? How can I prevent this.

Answer 1

After further investigation I found that the view was not being auto destroyed from the DOM as other views are and thus looked further. I then realized that I was actually navigating away from the view using Ext.Viewport.setActiveItem(Ext.create('MyApp.view.Main'));

Adding a item.destroy() call on deactivate event did the trick. Although, after the Ext.Viewport.setActiveItem, Ext.Viewport.remove() would have done the trick as well!

Hoping this helps someone!