javascript - 如何通过选中和取消选中复选框来切换中心面板的内容

Question

我在西部区域有按钮，通过单击按钮，我在中心区域获得不同的图表(使用边框布局)。在最后一次单击按钮时，我创建了一个带有复选框的窗口。当我选中该框时，我想销毁中心图表并使用 controllpanel : true 创建一个新图表。如果未选中，则应为 controllpanel:false。 我的区域代码是

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

复选框的处理程序是

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()});

任何帮助将不胜感激。

Answer 1

要删除元素并替换为新元素:

        handler: function(field, checked) {
            var centerContainer = Ext.getCmp('abc');

            Ext.suspendLayouts();
            centerContainer.removeAll();
            centerContainer.add([{
                xtype: 'mgoPanel', // My own xtype
                itemId: 'igp1',
                showZoom: false,
                showLegends: true,
                showSlider: false,
                showDataGrid: true,
                chartType: 'groupedBoxPlot',
                controlPanel: checked,
                orientation: 'x'
            }, {
                xtype: 'mgoPanel',
                itemId: 'igp4',
                showZoom: false,
                showLegends: true,
                showSlider: false,
                showDataGrid: true,
                chartType: 'line',
                controlPanel: checked,
                orientation: 'x'
            }]);
            Ext.resumeLayouts(true);
        }