ModExt: how to load new panel from row click on grid?

,listeners : {
    'rowclick': function(grid, index, rec){
        
        this.changePanel();

    }
}

Ext.extend(ExampleProject.grid.Competitions,MODx.grid.Grid,{
    changePanel: function() {
        // Somehow call a function on the container of this grid, remove the grid and load a new one.
    }
});

,changePanel: function(grid, id) {
    Ext.getCmp('home-panel').replaceGrid(grid, id);
}

,listeners : {
    'rowclick': function(grid, index, rec){
        if (grid.getSelectionModel().hasSelection()) {
            var row = grid.getSelectionModel().getSelections()[0];
            var id = row.get('id');
        }
        this.changePanel(grid, id);
    }
}

Ext.extend(ExampleProject.panel.Home,MODx.Panel,{
    replaceGrid: function(grid, id) {
        var tabs = Ext.getCmp('main-tabs');
        var tab = tabs.getActiveTab();
        tab.remove('exampleproject-grid-competitions');

        var artworkGrid = new Ext.getCmp('exampleproject-grid-artworks');
        tab.add(artworkGrid);
        tab.doLayout();
    }
});

Ext.extend(ExampleProject.panel.Home,MODx.Panel,{
    replaceGrid: function(grid, id) {
        var tabs = Ext.getCmp('main-tabs');
        var tab = tabs.getActiveTab();
        tab.remove('exampleproject-grid-competitions');
 
        var artworkGrid = new ExampleProject.grid.Artworks; // This is the line that was changed
        tab.add(artworkGrid);
        tab.doLayout();
    }
});