Empty Panel Contents

**drjamescook** · 10 Nov 2011 1:47 PM

Hello,
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...

hendricd

@drjames--

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

Target your chart to render there:

Code:

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

Then, the Panel.update method should work better:

Code:

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

**mitchellsimoens** · 11 Nov 2011 7:03 PM

What do you mean "contents"? To remove all items, do panel.removeAll(). To remove HTML, do panel.update('')

**drjamescook** · 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.

**mitchellsimoens** · 14 Nov 2011 7:04 AM

Just tried this and it removes the iframe:

Code:

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() {
                        panel.update('');
                    }
                }
            ]
        }
    ]
});

**drjamescook** · 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

Code:

Ext.getCmp('pChart').update('');

**mkutsevol** · 14 Nov 2011 12:48 PM

Originally Posted by drjamescook

Well, the panel has an id of "pChart". Would I be doing it wrong if I were trying it like

Code:

Ext.getCmp('pChart').update('');

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

Code:

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

**mitchellsimoens** · 14 Nov 2011 12:52 PM

Originally Posted by drjamescook

Well, the panel has an id of "pChart". Would I be doing it wrong if I were trying it like

Code:

Ext.getCmp('pChart').update('');

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

Originally Posted by mkutsevol

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

Code:

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

There is no difference in these two lines:

Code:

Ext.getCmp('pChart').update('');

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

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.

**drjamescook** · 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?

**wallynm** · 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...

**drjamescook** · 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.

Empty Panel Contents

Thread Tools

Search Thread

Display

Answered: Empty Panel Contents

Answered: Empty Panel Contents

line break in code

line break in code