How To Auto Reload Tab Panel Content?

[ontangian]

Guys, can you tell me how to do auto reload tab panel content? For example:

var contentPanel = new Ext.TabPanel({
                        region:'center',
                        deferredRender:false,
                        activeTab:0,
                        enableTabScroll:true,
                        items:[{
                        autoLoad: {url: 'doMenuScreenMonitoring.php', scope: this},
                        title: 'Screen Monitoring',
                        closable:false,
                        autoScroll:true
                        }]
                    });

I want to reload the tab "Screen Monitoring" so it will reload in certain seconds (ie: every 5 seconds it will reload the tab content) without refreshing the whole page.

Thank you in advance for any body can help me by sharing the solution to me.

[Animal]

Get the Updater for that Panel.

http://extjs.com/deploy/dev/docs/?cl...ber=getUpdater

You'll have to explicitly create it as a Panel first and then use it as the item.

Then ask it to autoRefresh.

http://extjs.com/deploy/dev/docs/?cl...artAutoRefresh

[ontangian]

Hi Animal,

Thanks for you reply. By the way, can you explicitly tell me where to insert the code that you mean (getUpdater and startAutoRefresh)? Because I tried this and it was Javascript error:

var contentPanel = new Ext.TabPanel({
                        region:'center',
                        deferredRender:false,
                        activeTab:0,
                        enableTabScroll:true,
                        items:[{
                        autoLoad: {url: 'doMenuScreenMonitoring.php', scope: this},
                        title: 'Screen Monitoring',
                        closable:false,
                        autoScroll:true
                        }]
                    });
contentPanel.getUpdater().startAutoRefresh(3);

The TabPanel which I want to use is exactly like what I mentioned above. And for your information the code above inserted in the body of Ext.onReady();

Please show me the exact code where I need to insert the getUpdater and startAutoRefresh.

Thanks again for your kindness help.

[Animal]

Do you want to update the TabPanel?

Or that single Panel that you added as it's sole child item?

[ontangian]

Hi Animal,

All I want to do is update the single Panel. I mean, if the 'contentPanel' variable consist of three tabs, the only I want to update is the tab "Screen Monitoring".

Can you represent to me the exact codes of how to do it?

Thank you for your kindness help.

[Animal]

Create the Panel first. So you get it in a variable. Then you can use the methods on it that I linked to. And use that variable as the item.

[jratcliff]

not tested but how about this: -- ok, tested now and this works:

var menuScreenPanel = new Ext.Panel({
    autoLoad: {url: 'doMenuScreenMonitoring.php', scope: this},
    title: 'Screen Monitoring',
    closable:false,
    autoScroll:true
});
menuScreenPanel.on('render', function() {
	menuScreenPanel.getUpdater().startAutoRefresh(5, 'doMenuScreenMonitoring.php');
});

var contentPanel = new Ext.TabPanel({
    region:'center',
    deferredRender:false,
    activeTab:0,
    enableTabScroll:true,
    items:[menuScreenPanel]
});

[ontangian]

not tested but how about this:

var menuScreenPanel = new Ext.Panel({
    autoLoad: {url: 'doMenuScreenMonitoring.php', scope: this},
    title: 'Screen Monitoring',
    closable:false,
    autoScroll:true
});
menuScreenPanel.getUpdater().startAutoRefresh({
    interval:5,
    url: 'doMenuScreenMonitoring.php'
});

var contentPanel = new Ext.TabPanel({
    region:'center',
    deferredRender:false,
    activeTab:0,
    enableTabScroll:true,
    items:[menuScreenPanel]
});

Hi jratcliff,

I have tried it. But it still not working. The user interface became messed up because of the code:

menuScreenPanel.getUpdater().startAutoRefresh({
    interval:5,
    url: 'doMenuScreenMonitoring.php'
});

But, if I commented out the above code, the UI back to normal, but no auto refresh happened.

Do you have any idea how to do it? I have spent a week to find a way to do it.

I really need your help to find the way to do it.

[jratcliff]

My apologies. Again, I didn't test it last night and thus missed a couple of issues. I just tested this now and it works. You just need to change the code to run AFTER the panel has been rendered (oh, and I got the parameters wrong - should be two, with the first the number of seconds and the second, the url)


So change this:

menuScreenPanel.getUpdater().startAutoRefresh({
    interval:5,
    url: 'doMenuScreenMonitoring.php'
});

To this:

menuScreenPanel.on('render', function() {
	menuScreenPanel.getUpdater().startAutoRefresh(5, 'doMenuScreenMonitoring.php');
});

I'll go ahead and update my original response in case someone else needs this.

[ontangian]

My apologies. Again, I didn't test it last night and thus missed a couple of issues. I just tested this now and it works. You just need to change the code to run AFTER the panel has been rendered (oh, and I got the parameters wrong - should be two, with the first the number of seconds and the second, the url)


So change this:

menuScreenPanel.getUpdater().startAutoRefresh({
    interval:5,
    url: 'doMenuScreenMonitoring.php'
});

To this:

menuScreenPanel.on('render', function() {
    menuScreenPanel.getUpdater().startAutoRefresh(5, 'doMenuScreenMonitoring.php');
});

I'll go ahead and update my original response in case someone else needs this.

Hi jratcliff,

Thank you very much for your help. It's working as you tried it. I am really greatfull for you kindness help.

I hope God will give you a present for helping me...

Once again, thanks...