センターパネルの内容をチェックしてチェックする方法チェックボックスをオフにする

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

ハンドラで任意のヘルプapreciatedます

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