Stores and Dataview List - Can't Add Element - IndexOf of null

Question

Using Sencha Touch (2.2) with Sencha Architect 2

I have a tree structure in which I navigate.

The nodes are Elements and elements can either be a folder or a leaf.

To display the elements on my Ext.dataview.dataview (LIST), I use a store (storeID: 'elementstore') and Ext.dataview.component.Dataitem.

Here is my code to fill the LIST at first and everytime we open a folder to go deeper in the tree.

Filling the store for the first time, disable event so update() is not called twice has I will be switching to this view right after the creation of it. It works well and give back the desired result. I have in my LIST the first level of Folders and Leaf displayed.

This is fired directly in the list with an onItemTap Event

var EStore = Ext.getStore('elementstore');
EStore.removeAll();
EStore.suspendEvents();
EStore.add(record.get('arrElement'));
EStore.resumeEvents(true); 

Emptying and refilling the store with the reached level of the tree.

This is fired directly in the LIST with an onItemTap Event

if(record.get('strUIType') === 'folder')
    {
        INDEX_STACK.push(index);
        store = Ext.getStore('elementstore');
        store.removeAll();
        store.add(record.get('arrElement'));
    }

What is wrong is when I try to go backward, going up in my tree. Here is the code which is located in a Sencha Controller.

It actually does not go back one level but back at the top level. ACTIVE_PROJECT is the
index of the active tree which are all located in my project store.

var popped =INDEX_STACK.pop();
var tab = tabpanel.getParent().getParent().getParent().getComponent('projects_Tab');

if(popped === undefined)
{
    tab.setActiveItem(0);
}
else
{
    var eStore = Ext.getStore('elementstore');
    eStore.removeAll();

    //Crashes!
    eStore.add(Ext.getStore('projectstore').getAt(ACTIVE_PROJECT).get('arrElement'));
}

Has you see the eStore.add(....) is the crashing line on which I get the following error :

Uncaught TypeError: Cannot call method 'indexOf' of null sencha-touch-all.js:21
Ext.Array.contains.e 
Ext.Array.include 
Ext.define.join 
Ext.define.insert 
Ext.define.add 
Ext.define.onMain_TabsTap  (----Yep this line is my code the rest is sencha touch...
Ext.define.doFire

The only thing I achieve to add to the store in this controller is an empty Ext.create(CarboZero.model.Element). I can not get anything from my active project.

Is there something wrong with removing and readding? Is my store getting corrupted from how I'm using it? I have been working on that for about 2 days without getting anything to work properly...

EDIT TO THE QUESTION

I just set in my Element store the destroyRemovedRecords to FALSE.

Everything works, but I don't understand ANYTHING on why it corrected the problem with my particular structure... WHat is the remove() doing exactly???

Answer 1

Set Element store's property to the following

destroyRemovedRecords : false

Solve the problem, still can't explain why.