Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: Empty Panel Contents

  1. #1

    Default Answered: Empty Panel Contents

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

  2. @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

  3. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379
    Answers
    3997

    Default

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

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  4. #3

    Default

    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.

  5. #4
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379
    Answers
    3997

    Default

    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('');
                        }
                    }
                ]
            }
        ]
    });
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  6. #5

    Default

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

  7. #6

    Default line break in code

    Quote Originally Posted by drjamescook View Post
    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('');

  8. #7
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379
    Answers
    3997

    Default

    Quote Originally Posted by drjamescook View Post
    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.

    Quote Originally Posted by mkutsevol View Post
    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.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  9. #8

    Default

    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?

  10. #9
    Sencha User
    Join Date
    Oct 2010
    Location
    Brazil - MG, Belo Horizonte
    Posts
    62
    Answers
    4

    Smile

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

  11. #10

    Default

    @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.

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •