[CLOSED] Autoload / Preload Tab Panels

  1. #1

    [CLOSED] Autoload / Preload Tab Panels

    I have a tab panel with two tabs that I am trying to pre-load so the user does not perceive any wait period when clicking on the second tab. I have tried various uses of AutoLoad(true). I have also tried some code that I saw that loops through all the tabs in javascript and calls setActiveTab on every tab but this only makes the last tab the active tab.

    Given the following example, is there anyway to cause the 2nd tab to pre-load while still having loaded and displayed tab 1?

    
    @{
        Layout = "~/Views/Shared/_BaseLayout.cshtml";
        var X = Html.X();
    }
    
    @section headtag
    {
        
    }
    
    @section example
    {
        @(X.Window()
            .Title("test auto load tabs")
            .Width(700)
            .Height(500)
            .Icon(Icon.Link)
            .Layout(LayoutType.Border)
            .Items(
                X.TabPanel()
                    .ID("TabPanel1")
                    .Region(Region.Center)
                    .Items(
                        X.Panel()
                        .ID("tab1")
                        .Title("tab 1")
                        .Closable(false)
                        .Loader(Html.X().ComponentLoader().Url("http://www.microsoft.com")
                            .Mode(LoadMode.Frame)
                            .LoadMask(lm =>
                            {
                                lm.ShowMask = true;
                                lm.Msg = "Loading 1 ...";
                            }))
                            ,
                        X.Panel()
                        .ID("tab2")
                        .Title("tab 2")
                        .Closable(false)
                            .Loader(X.ComponentLoader().Url("http://www.ext.net")
                            .Mode(LoadMode.Frame)
                            .LoadMask(lm =>
                            {
                                lm.ShowMask = true;
                                lm.Msg = "Loading 2 ...";
                            }))
                            
                    )
            )
        )
    }
    Last edited by Daniil; May 30, 2015 at 3:24 PM. Reason: [CLOSED]
  2. #2
    Hi @Patrick_G,

    There is a very related discussion.
    http://forums.ext.net/showthread.php?25324

    It should help answering some of your questions, at least.
  3. #3
    Thank you for responding so very quickly.

    I had found that post previously and tried the following code but it only causes "tabWhichShouldBeActuallyActivated" to be activated
    tabPanel.items.each(function (tab) {
        tabPanel.setActiveTab(tab);
    });
    
    tabPanel.setActiveTab(tabWhichShouldBeActuallyActivated);
    If I run the following code, it only causes the last tab to be activated.
    tabPanel.items.each(function (tab) {
        tabPanel.setActiveTab(tab);
    });
    This leads me to believe that in this scenario that only the last "setActiveTab" wins, the others previous to this do not get activated or do not get activated long enough for it to cause the contents of the tab to be rendered.

    Would it be possible for someone to merge my mark up sample with this javascript sample into a work able solution?

    Thank you for your help.
  4. #4
    Please clarify have you set DeferredRender="false" for the TabPanel?
  5. #5
    Thank you again. I added the DeferredRender="false" and the javascript from the article but it did not work. Here is what I eventually got to work. The trick is to do a setTimeOut between each setActiveTab
    @section headtag
    {
        <script>
    
            function fnLoadNextTab(tabPanel, tabIndex) {
    
                if (tabIndex == null)
                    tabIndex = 0;
    
                var tab = tabPanel.items.getAt(tabIndex);
                if (tab == null) {
                    // we have reached the end of the line, set the first tab as active
                    tab = tabPanel.items.getAt(0);
                    tabPanel.setActiveTab(tab);
                    return;
                }
                tabPanel.setActiveTab(tab);
    
                window.setTimeout(function () {
                    fnLoadNextTab(tabPanel, tabIndex + 1);
                }, 500);
    
            }
        </script>
    }
    
    @section example
    {
        @(X.Window()
            .Title("test auto load tabs")
            .Width(700)
            .Height(500)
            .Icon(Icon.Link)
            .Layout(LayoutType.Border)
            .Items(
                X.TabPanel()
                    .ID("TabPanel1")
                    .Region(Region.Center)
                    .Listeners(ls => ls.AfterRender.Handler = "fnLoadNextTab(#{TabPanel1})") 
                    .Items(
                        X.Panel()
                        .ID("tab1")
                        .Title("tab 1")
                        .Closable(false)
                        .Loader(Html.X().ComponentLoader().Url("http://www.microsoft.com")
                            .Mode(LoadMode.Frame)
                            .LoadMask(lm =>
                            {
                                lm.ShowMask = true;
                                lm.Msg = "Loading 1 ...";
                            }))
                            ,
                        X.Panel()
                        .ID("tab2")
                        .Title("tab 2")
                        .Closable(false)
                            .Loader(X.ComponentLoader().Url("http://www.ext.net")
                            .Mode(LoadMode.Frame)
                            .LoadMask(lm =>
                            {
                                lm.ShowMask = true;
                                lm.Msg = "Loading 2 ...";
                            }))
                            ,
                        X.Panel()
                        .ID("tab3")
                        .Title("tab 3")
                        .Closable(false)
                            .Loader(X.ComponentLoader().Url("http://www.paug.com/")
                            .Mode(LoadMode.Frame)
                            .LoadMask(lm =>
                            {
                                lm.ShowMask = true;
                                lm.Msg = "Loading 3 ...";
                            }))
                            
                    )
            )
        )
    }
  6. #6
    Yeah, I was about to suggest running it with a delay.

    By the way, there is an ExtJS wrapper for .setTimeout().
    http://docs.sencha.com/extjs/5.1/5.1...t-method-defer

Similar Threads

  1. BorderSpec on Panels
    By dangerlinto in forum 2.x Help
    Replies: 1
    Last Post: Nov 24, 2013, 4:30 AM
  2. Replies: 5
    Last Post: May 17, 2013, 12:54 PM
  3. [CLOSED] So many panels and nested panels
    By thchuong in forum 2.x Premium Help
    Replies: 1
    Last Post: Aug 03, 2012, 6:23 AM
  4. Add Panels with Autoload to an accordion
    By Tallmaris in forum 1.x Help
    Replies: 1
    Last Post: Jul 26, 2011, 9:35 AM
  5. Replies: 6
    Last Post: Jun 15, 2011, 1:07 PM

Tags for this Thread

Posting Permissions