View Poll Results: How many parts in a page you need to auto refresh?

Voters
3. You may not vote on this poll
  • 1

    0 0%
  • 2

    1 33.33%
  • 3

    0 0%
  • 4

    1 33.33%
  • 5

    1 33.33%
  • 6

    0 0%
  • 7

    0 0%
  • 8

    0 0%
  • 9

    0 0%
  • > 9

    0 0%
  1. #1
    Ext User
    Join Date
    Dec 2008
    Posts
    6
    Vote Rating
    0
    ontangian is on a distinguished road

      0  

    Default How To Auto Reload Tab Panel Content?

    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.

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,546
    Vote Rating
    62
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    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

  3. #3
    Ext User
    Join Date
    Dec 2008
    Posts
    6
    Vote Rating
    0
    ontangian is on a distinguished road

      0  

    Default Confused of How To Use The getUpdater and startAutoRefresh

    Confused of How To Use The getUpdater and startAutoRefresh


    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.

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,546
    Vote Rating
    62
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Do you want to update the TabPanel?

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

  5. #5
    Ext User
    Join Date
    Dec 2008
    Posts
    6
    Vote Rating
    0
    ontangian is on a distinguished road

      0  

    Default Update The Single Panel

    Update The Single Panel


    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.

  6. #6
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,546
    Vote Rating
    62
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    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.

  7. #7
    Ext User
    Join Date
    Dec 2008
    Posts
    6
    Vote Rating
    0
    ontangian is on a distinguished road

      0  

    Default


    Hi Animal,

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

    I tried many times and it was failed.

    Thanks.

  8. #8
    Sencha - Services Team
    Join Date
    Mar 2007
    Location
    Foristell, MO
    Posts
    1,109
    Vote Rating
    3
    jratcliff is on a distinguished road

      0  

    Default


    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]
    });
    Last edited by jratcliff; 6 Jan 2009 at 10:49 AM. Reason: updated the code after testing it

  9. #9
    Ext User
    Join Date
    Dec 2008
    Posts
    6
    Vote Rating
    0
    ontangian is on a distinguished road

      0  

    Default


    Quote Originally Posted by jratcliff View Post
    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.

  10. #10
    Sencha - Services Team
    Join Date
    Mar 2007
    Location
    Foristell, MO
    Posts
    1,109
    Vote Rating
    3
    jratcliff is on a distinguished road

      0  

    Default


    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.