So schalten Sie den Inhalt eines mittleren Bereichs ein, indem Sie das Kontrollkästchen aktivieren und deaktivieren:

Question

Ich habe Schaltflächen im westlichen Bereich und durch Klicken auf Schaltflächen erhalte ich verschiedene Diagramme im mittleren Bereich (mit Rahmenlayout). Beim letzten Knopfklick habe ich ein Fenster mit Checkbox erstellt. Wenn ich das Kästchen ankreuze, möchte ich das Diagramm in der Mitte zerstören und ein neues Diagramm mit erstellen. Wenn es nicht markiert ist, sollte es controllpanel:false sein. Mein Code für die Regionen ist

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

für Checkbox Handler

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

ist Jede Hilfe wird apreciated.

Answer 1

Um Elemente zu entfernen und durch neue ersetzen:

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