Panel with autoloader and autorefresh

[manoj123]

I am trying to create a panel with a loader and an auto refresh in fixed intervals after rendering. On auto refresh, the components are duplicated rather than being overwritten. I tried to add removeAll() and doLayout() on the panel before the autorefresh line which didn't help.

Ext JS code

		var myPanel  = Ext.create('Ext.panel.Panel', {		title: 'Hello',
		region: 'center',
		loader: {
			url: 'progress.php',
			renderer: 'component',
			autoLoad: true
		},
        defaults: {
                border: false,
                layout: 'fit'
        },
		listeners: {
		afterrender: function(c) {
			c.getLoader().startAutoRefresh(5000);
			
		}
        }
	});

Sample component from the loader URL.

        
{
      xtype: 'textfield',        name: 'email',
        fieldLabel: 'Email Address',
        vtype: 'email'  
}

Thanks for looking.

[mitchellsimoens]

You said you have tried removing all? Like this:

Ext.create('Ext.panel.Panel', {
    title: 'Hello',
    renderTo : document.body,
    loader: {
        url: 'data.json',
        renderer: 'component',
        autoLoad: true,
        listeners : {
            beforeload : function(loader) {
                var panel = loader.target;

                panel.removeAll();
            }
        }
    },
    defaults: {
        border: false,
        layout: 'fit'
    },
    listeners: {
        afterrender: function(c) {
            c.getLoader().startAutoRefresh(5000);
        }
    }
});

[manoj123]

Thanks mitchellsimoens

Have visited this thread to update about the same thing. Adding beforeload event on the loader worked fine. A suggestion from you means its not a hack.