PDA

View Full Version : When removing/adding items: Uncaught TypeError: Cannot read property 'dom' of null?



ThiemNguyen
21 Apr 2012, 1:17 AM
Hello everyone.
Currently I am optimizing my app, basically it's an application with 5 tabs but I decided to use Ext.TabBar docked at the bottom and an Ext.Container above for DOM minimization. When switching between views, I remove/add items from/to that Ext.Container.

Here is my code:

The MainPanel which contains a docked Ext.TabBar and Ext.Container above.

Ext.define('rs.view.MainPanel',{
extend: 'Ext.Container',
xtype: 'MainPanel',
id: 'main-panel',
config: {
layout: 'card',
fullscreen: true,
items: [
{
xtype: 'coaTabs', // Ext.TabBar
},
{
xtype: 'coaPanels', // Here is my main Ext.Container
}
]
},
});


and the following is coaTabs and coaPanels, nothing special:

coaPanels:

Ext.define('rs.view.coaPanels',{
extend: 'Ext.Container',
xtype: 'coaPanels',
id: 'coa-panels',


config: {
layout: 'card',
items: [ ]
}
})

coaTabs:

Ext.define('rs.view.coaTabs', {
extend: 'Ext.TabBar',
xtype: 'coaTabs',
id: 'coa-tabs',


config: {
activeTab: 0,
docked: 'bottom',
items: [
{
title: "Welcome",
iconCls: 'home',
id: 'welcome',
},
{
title: "Catalog",
iconCls: 'catalog',
id: 'catalog',
},
{
title: "Search",
iconCls: 'search',
id: 'search',
},
{
title: "Favorites",
iconCls: 'favorites',
id: 'favorite',
},
{
title: "Settings",
iconCls: 'settings',
id: 'setting',
}
]
}
});

Everytime when I switch between views, let's say from view1 to view2, I destroy view1 and add view2 to coaPanels.

The following code is when I tried to switch from GroupViewOne to GroupViewTwo (with corresponding stores, to be easy to understand, it's a switch from category list to sub-category list. Here I use 2 separated lists / 2 stores because I don't want to use Ext.NestedList since its performance is not very good).
I put it in my controller, this function is triggered when an item of the category list in GroupViewOne is tapped:


showGroupTwo: function(list,index,target,record){
GROUP_ONE_ID = record.get('id');
GROUP_ONE_NAME = record.get('name');

var coaPanels = this.getCoaPanels();
coaPanels.getActiveItem().destroy();
coaPanels.add([{xtype:'GroupViewTwo'}]);


this.getGroupViewTwoTitlebar().setTitle(GROUP_ONE_NAME);


var groups = Ext.getStore('Groups'); //category
var groups2 = Ext.getStore('GroupsTwo'); //sub-category

// fetch sub-categories based on given category id
groups2.removeAll();
groups.each( function(innerrecord){
if (innerrecord.get('parent') == GROUP_ONE_ID)
groups2.add(innerrecord);
});
},


After doing this, GroupViewTwo displayed with proper records but I get an error from the console. It says "Uncaught TypeError: Cannot read property 'dom' of null?".

It's obvious that I've done something wrong.
I tried using removeAll(), removeAll(true), remove(item,true), removeAt(0), getComponent(0).destroy(). All of them lead to that error as well.
Highly appreciate for any suggestions. Thank you.

Updated: This happens only when the views I'm working with have store binded to them. So it's very likely that I've done something wrong with store manipulation.

mitchellsimoens
23 Apr 2012, 6:57 AM
Do you destroy the view in a controller using an activeitemchange listener?