View Full Version : Empty Panel Contents

10 Nov 2011, 1:47 PM
I am trying to completely empty the contents of a panel. I cannot for the life of me seem to figure out how. I know there has to be a way...

11 Nov 2011, 7:03 PM
What do you mean "contents"? To remove all items, do panel.removeAll(). To remove HTML, do panel.update('')

14 Nov 2011, 6:08 AM
Well, the contents is a Google Visualization Chart. Simply put, it's an iframe. Update() does not clean it out. I have tried every method that even remotely resembles something that could clean it out and nothing works.

14 Nov 2011, 7:04 AM
Just tried this and it removes the iframe:

var panel = Ext.create('Ext.panel.Panel', {
renderTo : Ext.getBody(),
width : 400,
height : 400,
title : 'Test',
html : '<iframe src="http://www.sencha.com/" width="100%" height="100%"></iframe>',
dockedItems : [
xtype : 'toolbar',
docked : 'top',
items : [
text : 'Empty',
handler : function() {

14 Nov 2011, 11:43 AM
Well, the panel has an id of "pChart". Would I be doing it wrong if I were trying it like

14 Nov 2011, 12:48 PM
Well, the panel has an id of "pChart". Would I be doing it wrong if I were trying it like
Hello drjamescook. I'm really new to ExtJS and javascript in general. I may advise you to try it this way:

var cmp = Ext.getCmp('pChart');

14 Nov 2011, 12:52 PM
Well, the panel has an id of "pChart". Would I be doing it wrong if I were trying it like

I wouldn't rely on setting the id config as that will lead to id collisions. ComponentQuery is very powerful and robust.

Hello drjamescook. I'm really new to ExtJS and javascript in general. I may advise you to try it this way:

var cmp = Ext.getCmp('pChart');

There is no difference in these two lines:


var cmp = Ext.getCmp('pChart');

The first line is called chaining and is valid JavaScript. It is up to the author if he/she wants to use chaining or not.

16 Nov 2011, 1:43 PM
Just an FYI, I still cannot get this to work. Perhaps it is because the object inside the panel is built and controlled by the Google Visualization object? If so, how do I clear the chart?

17 Nov 2011, 11:02 AM
I think you're using the border layout, if i'm correct, you have an problem there, i had it too. you can't use panel.update('') or panel.removeAll() on it, i don't know why at shure, but it's an system rule.

What you will need to do its add an new panel inside the border panel that you wanna to delete the content, so, if ou do this, you will can remove all HTML from it.

Also, try to look the card panel, maybe it can work for you, i'm using it as my layout base and the border layout, i append to it loading it dynamic...

22 Nov 2011, 9:27 AM
@wallynm - I have attempted to do what you said and that still does not delete the Google Visualization. I have also tried several different panel types. Nothing seems to get rid of it.

22 Nov 2011, 10:59 AM

It might be useful if you posted the config for the containing Panel instance, and the Google visualization script fragment that renders it into your Panel.

Need to find out where all that got rendered to, first. ;)

22 Nov 2011, 2:30 PM
This is from the controller.

// The chart's data store. chartData: [],

// Converts the store into an array.
convertStore: function() {

data = Ext.Array.pluck(Ext.getStore('chartingData').data.items, 'data');

// Empty the chart data array.
this.chartData = [];
this.chartData[0] = [];

// Write the columns to the first index of the array.
if (Ext.getCmp('radioDateRange').getValue() === true) this.chartData[0].push('Date');
if (Ext.getCmp('radioHourly').getValue() === true) this.chartData[0].push('Time');

// Only chart the temperature if the buttons are pressed.
if (Ext.getCmp('btnKWh').pressed === true) this.chartData[0].push('KWh Usage');
if (Ext.getCmp('btnHourlyTemp').pressed === true) this.chartData[0].push('Temperature');
if (Ext.getCmp('btnMinimum').pressed === true) this.chartData[0].push('Min Temp');
if (Ext.getCmp('btnMaximum').pressed === true) this.chartData[0].push('Max Temp');
if (Ext.getCmp('btnAverage').pressed === true) this.chartData[0].push('Avg Temp');
if (Ext.getCmp('btnHeating').pressed === true) this.chartData[0].push('DH Heating');
if (Ext.getCmp('btnCooling').pressed === true) this.chartData[0].push('DH Cooling');

// Loop through the store data and convert into the array.
var dataArray = this.chartData;
Ext.each(data, function(name, index, value) {

// Start with empty array.
var blankArray = [];

// Push the data that needs to be charted into the empty array.
if (Ext.getCmp('radioDateRange').getValue() === true) blankArray.push(name.date);
if (Ext.getCmp('radioHourly').getValue() === true) blankArray.push(name.time);

// If the KWh usage button is on.
if (Ext.getCmp('btnKWh').pressed === true) {
if (name.usage != 0) blankArray.push(name.usage);
else blankArray.push(null);

// If the hourly temperature button is on.
if (Ext.getCmp('btnHourlyTemp').pressed === true) {
if (name.temp != 0) blankArray.push(name.temp);
else blankArray.push(null);

// If the minimum temperature button is on.
if (Ext.getCmp('btnMinimum').pressed === true) {
if (name.min != 0) blankArray.push(name.min);
else blankArray.push(null);

// If the maximum temperature button is on.
if (Ext.getCmp('btnMaximum').pressed === true) {
if (name.max != 0) blankArray.push(name.max);
else blankArray.push(null);

// If the average temperature button is on.
if (Ext.getCmp('btnAverage').pressed === true) {
if (name.avg != 0) blankArray.push(name.avg);
else blankArray.push(null);

// If the degree hours heating button is on.
if (Ext.getCmp('btnHeating').pressed === true) {

// If the degree hours cooling button is on.
if (Ext.getCmp('btnCooling').pressed === true) {


// Create an empty chart config.
chartConfig: {
vAxes: [{title: "KWh Used"}, {title: 'Temperature'}],
hAxis: {title: "Day"},
seriesType: "line",
series: {
0: {type: "bars"},
1: {targetAxisIndex: 1},
2: {targetAxisIndex: 1},
3: {targetAxisIndex: 1}
curveType: 'none'},

// Draws the chart.
drawVisualization: function() {

// Enable the toolbar buttons.

// Convert the store for the chart.

// Create and populate the data table.
var data = google.visualization.arrayToDataTable(this.chartData);

// Create and draw the visualization.
var ac = new google.visualization.ComboChart(document.getElementById('pChart'));
ac.draw(data, this.chartConfig);


This is a clip from the view.

items: [ {
xtype: 'panel',
region: 'center',
id: 'pChartHolder',
layout: {
type: 'fit'
items: [
xtype: 'panel',
id: 'pChart',
hidden: true

The resulting HTML.

<div id="pChart" class="x-panel x-fit-item x-panel-default" role="presentation" style="width: 1271px; height: 208px;">
<iframe name="Drawing_Frame_42516" id="Drawing_Frame_42516" width="1271" height="208" frameborder="0" scrolling="no" marginheight="0" marginwidth="0">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<script type="text/javascript">
var _loaded = false; function CHART_loaded() { _loaded = true; }
<body marginwidth="0" marginheight="0" onload="CHART_loaded()">
<div id="chartArea">
<svg id="chart" width="1271" height="535">
<defs id="defs"><clipPath id="_ABSTRACT_RENDERER_ID_2"><rect x="191" y="102" width="889" height="331"></rect></clipPath></defs><g><rect x="0" y="0" width="1271" height="535" stroke="none" stroke-width="0" fill="#ffffff"></rect><g><g><text text-anchor="start" x="1116" y="114.75" font-family="Arial" font-size="15" stroke="none" stroke-width="0" fill="#222222">KWh Usage</text></g><rect x="1095" y="102" width="15" height="15" stroke="none" stroke-width="0" fill="#3366cc"></rect></g><g><rect x="191" y="102" width="889" height="331" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect><g><rect x="191" y="432" width="889" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="191" y="350" width="889" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="191" y="267" width="889" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="191" y="185" width="889" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="191" y="102" width="889" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect></g><g clip-path="url(#_ABSTRACT_RENDERER_ID_2)"><g><rect x="200" y="326" width="27" height="106" stroke="none" stroke-width="0" fill="#3366cc"></rect><rect x="244" y="351" width="27" height="81" stroke="none" stroke-width="0" fill="#3366cc"></rect><rect x="289" y="194" width="27" height="238" stroke="none" stroke-width="0" fill="#3366cc"></rect><rect x="333" y="227" width="27" height="205" stroke="none" stroke-width="0" fill="#3366cc"></rect><rect x="377" y="272" width="27" height="160" stroke="none" stroke-width="0" fill="#3366cc"></rect><rect x="422" y="326" width="27" height="106" stroke="none" stroke-width="0" fill="#3366cc"></rect><rect x="466" y="297" width="27" height="135" stroke="none" stroke-width="0" fill="#3366cc"></rect><rect x="511" y="322" width="27" height="110" stroke="none" stroke-width="0" fill="#3366cc"></rect><rect x="555" y="219" width="27" height="213" stroke="none" stroke-width="0" fill="#3366cc"></rect><rect x="599" y="177" width="27" height="255" stroke="none" stroke-width="0" fill="#3366cc"></rect><rect x="644" y="239" width="27" height="193" stroke="none" stroke-width="0" fill="#3366cc"></rect><rect x="688" y="252" width="27" height="180" stroke="none" stroke-width="0" fill="#3366cc"></rect><rect x="733" y="351" width="27" height="81" stroke="none" stroke-width="0" fill="#3366cc"></rect><rect x="777" y="326" width="27" height="106" stroke="none" stroke-width="0" fill="#3366cc"></rect><rect x="821" y="342" width="27" height="90" stroke="none" stroke-width="0" fill="#3366cc"></rect><rect x="866" y="186" width="27" height="246" stroke="none" stroke-width="0" fill="#3366cc"></rect><rect x="910" y="157" width="27" height="275" stroke="none" stroke-width="0" fill="#3366cc"></rect><rect x="955" y="194" width="27" height="238" stroke="none" stroke-width="0" fill="#3366cc"></rect><rect x="999" y="264" width="27" height="168" stroke="none" stroke-width="0" fill="#3366cc"></rect><rect x="1043" y="272" width="27" height="160" stroke="none" stroke-width="0" fill="#3366cc"></rect></g><g><rect x="191" y="432" width="889" height="1" stroke="none" stroke-width="0" fill="#333333"></rect></g></g><g></g><g><g><text text-anchor="middle" x="635.5" y="518.75" font-family="Arial" font-size="15" font-style="italic" stroke="none" stroke-width="0" fill="#222222">Day</text></g><g><text text-anchor="end" x="220.075" y="453.0418238982516" font-family="Arial" font-size="15" transform="rotate(-30 220.075 453.0418238982516)" stroke="none" stroke-width="0" fill="#222222">11-01-2011</text></g><g><text text-anchor="end" x="264.475" y="453.0418238982516" font-family="Arial" font-size="15" transform="rotate(-30 264.475 453.0418238982516)" stroke="none" stroke-width="0" fill="#222222">11-02-2011</text></g><g><text text-anchor="end" x="308.875" y="453.0418238982516" font-family="Arial" font-size="15" transform="rotate(-30 308.875 453.0418238982516)" stroke="none" stroke-width="0" fill="#222222">11-03-2011</text></g><g><text text-anchor="end" x="353.275" y="453.0418238982516" font-family="Arial" font-size="15" transform="rotate(-30 353.275 453.0418238982516)" stroke="none" stroke-width="0" fill="#222222">11-04-2011</text></g><g><text text-anchor="end" x="397.67499999999995" y="453.0418238982516" font-family="Arial" font-size="15" transform="rotate(-30 397.67499999999995 453.0418238982516)" stroke="none" stroke-width="0" fill="#222222">11-05-2011</text></g><g><text text-anchor="end" x="442.075" y="453.0418238982516" font-family="Arial" font-size="15" transform="rotate(-30 442.075 453.0418238982516)" stroke="none" stroke-width="0" fill="#222222">11-06-2011</text></g><g><text text-anchor="end" x="486.47499999999997" y="453.0418238982516" font-family="Arial" font-size="15" transform="rotate(-30 486.47499999999997 453.0418238982516)" stroke="none" stroke-width="0" fill="#222222">11-07-2011</text></g><g><text text-anchor="end" x="530.875" y="453.0418238982516" font-family="Arial" font-size="15" transform="rotate(-30 530.875 453.0418238982516)" stroke="none" stroke-width="0" fill="#222222">11-08-2011</text></g><g><text text-anchor="end" x="575.275" y="453.0418238982516" font-family="Arial" font-size="15" transform="rotate(-30 575.275 453.0418238982516)" stroke="none" stroke-width="0" fill="#222222">11-09-2011</text></g><g><text text-anchor="end" x="619.675" y="453.0418238982516" font-family="Arial" font-size="15" transform="rotate(-30 619.675 453.0418238982516)" stroke="none" stroke-width="0" fill="#222222">11-10-2011</text></g><g><text text-anchor="end" x="664.075" y="453.0418238982516" font-family="Arial" font-size="15" transform="rotate(-30 664.075 453.0418238982516)" stroke="none" stroke-width="0" fill="#222222">11-11-2011</text></g><g><text text-anchor="end" x="708.4749999999999" y="453.0418238982516" font-family="Arial" font-size="15" transform="rotate(-30 708.4749999999999 453.0418238982516)" stroke="none" stroke-width="0" fill="#222222">11-12-2011</text></g><g><text text-anchor="end" x="752.875" y="453.0418238982516" font-family="Arial" font-size="15" transform="rotate(-30 752.875 453.0418238982516)" stroke="none" stroke-width="0" fill="#222222">11-13-2011</text></g><g><text text-anchor="end" x="797.275" y="453.0418238982516" font-family="Arial" font-size="15" transform="rotate(-30 797.275 453.0418238982516)" stroke="none" stroke-width="0" fill="#222222">11-14-2011</text></g><g><text text-anchor="end" x="841.675" y="453.0418238982516" font-family="Arial" font-size="15" transform="rotate(-30 841.675 453.0418238982516)" stroke="none" stroke-width="0" fill="#222222">11-15-2011</text></g><g><text text-anchor="end" x="886.0749999999999" y="453.0418238982516" font-family="Arial" font-size="15" transform="rotate(-30 886.0749999999999 453.0418238982516)" stroke="none" stroke-width="0" fill="#222222">11-16-2011</text></g><g><text text-anchor="end" x="930.475" y="453.0418238982516" font-family="Arial" font-size="15" transform="rotate(-30 930.475 453.0418238982516)" stroke="none" stroke-width="0" fill="#222222">11-17-2011</text></g><g><text text-anchor="end" x="974.875" y="453.0418238982516" font-family="Arial" font-size="15" transform="rotate(-30 974.875 453.0418238982516)" stroke="none" stroke-width="0" fill="#222222">11-18-2011</text></g><g><text text-anchor="end" x="1019.275" y="453.0418238982516" font-family="Arial" font-size="15" transform="rotate(-30 1019.275 453.0418238982516)" stroke="none" stroke-width="0" fill="#222222">11-19-2011</text></g><g><text text-anchor="end" x="1063.675" y="453.0418238982516" font-family="Arial" font-size="15" transform="rotate(-30 1063.675 453.0418238982516)" stroke="none" stroke-width="0" fill="#222222">11-20-2011</text></g><g><text text-anchor="middle" x="85.25" y="267.5" font-family="Arial" font-size="15" font-style="italic" transform="rotate(-90 85.25 267.5)" stroke="none" stroke-width="0" fill="#222222">KWh Used</text></g><g><text text-anchor="end" x="176" y="437.75" font-family="Arial" font-size="15" stroke="none" stroke-width="0" fill="#444444">10</text></g><g><text text-anchor="end" x="176" y="355.25" font-family="Arial" font-size="15" stroke="none" stroke-width="0" fill="#444444">30</text></g><g><text text-anchor="end" x="176" y="272.75" font-family="Arial" font-size="15" stroke="none" stroke-width="0" fill="#444444">50</text></g><g><text text-anchor="end" x="176" y="190.25" font-family="Arial" font-size="15" stroke="none" stroke-width="0" fill="#444444">70</text></g><g><text text-anchor="end" x="176" y="107.75" font-family="Arial" font-size="15" stroke="none" stroke-width="0" fill="#444444">90</text></g></g></g></g><g></g></svg></div><div style="position: absolute; top: 10px; left: 10px; white-space: nowrap; font-family: Arial; font-size: 15px; display: none;">KWhUsage</div></body></html></iframe></div>

Sorry about the HTML, it will probably be easier to look at if needed by loading it into an editor and having it auto format it for you.

22 Nov 2011, 2:41 PM

The visible portion of a Panel is it's body.

Target your chart to render there:

// Create and draw the visualization.
var ac = new google.visualization.ComboChart(Ext.getCmp('pChart').body.dom );

Then, the Panel.update method should work better:

Ext.getCmp('pChart').update(''); //clear out the body