getting TypeError: el is null .../ext/ext-all-debug-w-comments.js Line 44393 when loading grid a second time - extjs4.2

Question

I'm using a panel called "content panel" in the center of a border layout of my viewport.
I swap content in and out as needed by click handlers against the menu buttons. The second time I swap in this grid it gives this error. This is the only grid that does it in the app and the only grid that has a paging bar. I know the error has something to do with the paging bar being rendered. What am I missing?
controller (changes is the button that's failing):
Ext.define('DDI.controller.DDI', {
extend : 'Ext.app.Controller',
views : [ 'panel.BannerPanel', 'panel.ContentPanel', 'panel.NavPanel', 'panel.FooterPanel', 'Welcome' ],
init : function() {
this.control({
'navpanel button[text=Home]' : {
click : function() {
var cp = Ext.getCmp('contentpanel');
cp.removeAll();
cp.add({
xtype : 'welcomepanel'
});
}
},
...
'navpanel button[text=Changes]' : {
click : function() {
var cp = Ext.getCmp('contentpanel');
var height = Ext.getBody().getViewSize().height - 100;
// cp.removeDockedComponent(cp.getDockedComponent(0));
cp.removeAll(false);
cp.add({
xtype : 'changesummaryview',
height : height
});
cp.doLayout();
}
},
....
The grid panel is defined as such:
var changeStore = Ext.create('DDI.changetracker.store.Change');
Ext.define('DDI.changetracker.view.ChangeSummaryView', {
extend : 'Ext.grid.Panel',
alias : 'widget.changesummaryview',
id : 'changesummaryview',
title : 'All Change Summary',
scroll : 'both',
store : changeStore,
tbar : [
'Open Change Summary View',
'-',
{text : 'New Change'
}, {
xtype : 'button',
text : 'Print'
},
'->',
{xtype : 'exporterbutton'
}
],
bbar : Ext.create('Ext.PagingToolbar', {
store : changeStore,
displayInfo : true
}),
listeners : {
'render' : function(grid) {
grid.view.tip = Ext.create('Ext.tip.ToolTip', {
target : grid.getEl(),
showDelay : 2000,
// Each grid row causes its own seperate show and hide.
delegate : ".x-grid-cell",
items : [], // add items later based on the record
// Render immediately so that tip.body can be referenced prior
// to the first show.
listeners : {
// Change content dynamically depending on which element
// triggered the show.
beforeshow : function updateTipBody(tip) {
var rec = grid.view.getRecord(
Ext.get(tip.triggerElement).findParentNode('.x-grid-row'));
grid.fireEvent('rowhover', tip, rec);
return true;
}
}
});
}
},
columns : [
{
header : 'ticket',
dataIndex : 'ticket',
filter : {
type : 'string'
},
flex : 1,
editor : 'textfield'
},
{
header : 'account_name',
dataIndex : 'account_name',
flex : 1,
editor : {
xtype : 'customercombo',
fieldLabel : ''
}
},
{
header : 'employee_1',
dataIndex : 'employee_1',
flex : 1,
editor : {
xtype : 'personelcombo',
fieldLabel : '',
valueField : 'name'
}
},
{
header : 'dns_team_approved',
dataIndex : 'dns_team_approved',
filter : {
type : 'string'
},
flex : 1,
editor : {
xtype : 'dnsapprovecombo',
fieldLabel : ''
}
},
{
header : 'approval_status',
dataIndex : 'approval_status',
flex : 1,
editor : {
xtype : 'approvalstatuscombo',
fieldLabel : ''
}
},
{
header : 'status',
dataIndex : 'status',
flex : 1,
filter : {
type : 'list',
options : [ [ '%', 'All' ], [ 'OPEN', 'OPEN' ], [ 'HOLD', 'HOLD' ], [ 'CLOSED', 'CLOSED' ],
[ 'CANCELED', 'CANCELED' ] ],
value : '%',
active : true,
single : true
},
editor : {
xtype : 'statuscombo',
fieldLabel : '',
store : 'Status'
}
}, {
header : 'open_date',
dataIndex : 'open_date',
flex : 1,
editor : 'textfield'
}, {
header : 'next_check',
dataIndex : 'next_check',
flex : 1,
editor : 'textfield',
renderer:function(value, metadata, record, rowIndex, colIndex, store){
a=value.split(" ");
d=a[0].split("-");
t=a[1].split(":");
dateValue=new Date(d[0],d[1]-1,d[2],t[0],t[1],t[2]);
today=new Date();
if (dateValue <= today){
return '<span style="background-color: #FFff66">'+value+'</span>';
}
return value;
}
}, {
header : 'start_time',
dataIndex : 'start_time',
flex : 1,
editor : 'textfield',
renderer:function(value, metadata, record, rowIndex, colIndex, store){
a=value.split(" ");
d=a[0].split("-");
t=a[1].split(":");
dateValue=new Date(d[0],d[1]-1,d[2],t[0],t[1],t[2]);
today=new Date();
if (dateValue <= today){
return '<span style="background-color: #FF8080">'+value+'</span>';
}
return value;
}
}, {
header : 'end_date',
dataIndex : 'end_date',
flex : 1,
editor : 'textfield'
}, {
header : 'is_expedited',
dataIndex : 'is_expedited',
flex : 1,
editor : 'textfield'
} ],
features : [ {
ftype : 'filters',
encode : false,
local : false
} ],
plugins : [ {
ptype : 'cellediting',
clicksToEdit : 2,
pluginId : 'cellediting'
} ]