How To Auto Reload Tab Panel Content?

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

Code:

---

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

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

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:

Code:

---

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

Do you want to update the TabPanel?

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

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.

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.

Hi Animal,

Can you explicitly give me the sample of how to do it?

I tried many times and it was failed. :s

Thanks.

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

Code:

---

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]
});

---

Quote:

---

Originally Posted by jratcliff

not tested but how about this:

Code:

---

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:

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.

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:

Code:

---

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

---

To this:

Code:

---

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.