How to switch content of a center panel in by check and uncheck checkbox

I have buttons in west region and by clicking on buttons I am getting different charts in center region(using border layout). In last button click, I created a window with checkbox. When I check the box I want to destroy the the chart in center and create a new chart with controllpanel : true. If it is unchecked then it should be controllpanel:false. My code for regions is

Ext.define('MyApp.view.main.Main', {
requires: ['Mgo.*', 'MyApp.view.main.MainModel', 'Ext.plugin.Viewport'],
extend: 'Ext.container.Container',
ui: 'navigation',
height: '100%',
width: '100%',
layout: 'border',
floating: true,
controller: 'MainController',
items: [{
    xtype: 'toolbar',
    height: 50,
    region: 'north',
    split: true, // enable resizing
    //margin: '0 5 5 5',
    items: [{
        xtype: 'image',
        width: 160,
        src: 'resources/images/newpowered.gif',
        style: "height: 30px;  left: auto; right: 1066px; top: 20px; margin: 0px;"
    }, '->', {
        xtype: 'image',
        height: 30,
        width: 30,
        tooltip: 'About',
        position: 'right',
        margin: '0 4 0 0',
        hidden: false,
        src: 'resources/images/a.png'
    }]

}, {
    title: 'Charts',
    region: 'west',
    xtype: 'panel',
    width: 230,
    split: true,
    items: [{
        xtype: 'button',
        height: 50,
        width: 220,
        text: 'Line Chart',
        name: 'linechart',
        icon: 'resources/images/line.png',
        iconAlign: 'left',
        textAlign: 'left',
        scale: 'large',
        margin: '5 0 0 5',
        handler: 'onLineChartClick'
    }, {
        xtype: 'button',
        height: 50,
        width: 220,
        text: 'Bar Chart',
        textAlign: 'left',
        name: 'barchart',
        icon: 'resources/images/bar.png',
        iconAlign: 'left',
        scale: 'large',
        margin: '5 0 0 5',
        handler: 'onBarChartClick'
    }, {
        xtype: 'button',
        height: 50,
        width: 220,
        text: 'Settings',
        textAlign: 'left',
        name: 'settings',
        icon: 'resources/images/settings.png',
        iconAlign: 'left',
        scale: 'large',
        margin: '5 0 0 5'
    }]
}, {
    xtype: 'panel',
    region: 'center',
    id: 'abc',
    layout: 'card',
    border: true,
    items: [{
        xtype: 'mgoPanel', // My own xtype
        itemId: 'igp1',
        showZoom: false,
        showLegends: true,
        showSlider: false,
        showDataGrid: true,
        chartType: 'groupedBoxPlot',
        controlPanel:false, // this should be true when checkbox is checked
        orientation: 'x'
    }, {
        xtype: 'mgoPanel',
        itemId: 'igp4',
        showZoom: false,
        showLegends: true,
        showSlider: false,
        showDataGrid: true,
        chartType: 'line',
        controlPanel:false, // this should be true when checkbox is checked
        orientation: 'x'
    }]
}]});

Handler for Checkbox is

Ext.define('MyApp.view.main.CheckBox', {
extend: 'Ext.form.Panel',
alias: 'widget.checkboxPanel',
height: 300,
width: 400,
layout: 'fit',
bodyPadding: 10,
items: [{
    xtype: 'fieldcontainer',
    fieldLabel: 'Select Panels',
    defaultType: 'checkboxfield',
    items: [{
        boxLabel: 'Control Panel',
        name: 'ctrlPanel',
        inputValue: '1',
        id: 'checkbox1',
        handler: function(field, value) {
            debugger;
            if (this.checked == true) {
                var xyz = Ext.getCmp('abc').items.items;
                for (i = 0; i <= xyz.length-1; i++) {
                    xyz[i].destroy(); // destroying center element. Need to true controllpanel
                }
            }
        }
    }]
}],
renderTo: Ext.getBody()});

Any help will apreciated.