I have a form and when a user clicks the save button and it returns success; then display a popup and fade it out. This code is inside my Ajax function. Everything works perfectly except removing the container "notify" after the fadeOut is complete. I'm trying to remove the contain so not to create a new one every time the save button is clicked, else it will suck up memory. How can a remove the container "notify" after the fadeOut is complete?

Also, I tried setting the "remove" config option to true inside the fadeOut and it works the first time. The next time the save button is clicked i receive a dom error.

Any help is greatly appreciated, I been racking my head for an entire day on this one.

            url: 'some file',
            method: 'POST',
            params: {
                //some params
            success: function(response) {
                var text = Ext.decode(response.responseText);

                var notify = Ext.create('Ext.container.Container', {
                    width: 175,
                    height: 60,
                    layout: {
                        type: 'vbox',
                        pack: 'center',
                        align: 'center'
                    floating: true,
                    border: 2,
                    style: {
                        backgroundColor: 'white',
                        fontSize: '14px',
                        color: 'green'
                    items: {
                        xtype: 'container',
                        html: 'Saved Successfully!'
                    opacity: 0, 
                    easing: 'easeOut',
                    delay: 1000,
                    duration: 3000,
                    remove: false ,
                    useDisplay: false