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

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'
} ]