1. #1
    Sencha User
    Join Date
    Jan 2011
    Posts
    8
    Vote Rating
    0
    drjamescook is on a distinguished road

      0  

    Default Answered: Empty Panel Contents

    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 - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,330
    Answers
    3541
    Vote Rating
    847
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    What do you mean "contents"? To remove all items, do panel.removeAll(). To remove HTML, do panel.update('')
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Jan 2011
    Posts
    8
    Vote Rating
    0
    drjamescook is on a distinguished road

      0  

    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 - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,330
    Answers
    3541
    Vote Rating
    847
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    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 @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  6. #5
    Sencha User
    Join Date
    Jan 2011
    Posts
    8
    Vote Rating
    0
    drjamescook is on a distinguished road

      0  

    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
    Sencha User mkutsevol's Avatar
    Join Date
    Oct 2011
    Posts
    7
    Vote Rating
    0
    mkutsevol is on a distinguished road

      0  

    Default line break in code

    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 - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,330
    Answers
    3541
    Vote Rating
    847
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    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 @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  9. #8
    Sencha User
    Join Date
    Jan 2011
    Posts
    8
    Vote Rating
    0
    drjamescook is on a distinguished road

      0  

    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
    Vote Rating
    0
    wallynm is on a distinguished road

      0  

    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
    Sencha User
    Join Date
    Jan 2011
    Posts
    8
    Vote Rating
    0
    drjamescook is on a distinguished road

      0  

    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.