[CLOSED] TabPanel - perform page load only when active

  1. #1

    [CLOSED] TabPanel - perform page load only when active

    I have a tab panel with several tabs.

    What is the best way to only perform the page_load on the tab that is currently active?

    What is the correct way to perform the page_load when there is a tab change?
    Last edited by Daniil; May 09, 2012 at 5:05 PM. Reason: [CLOSED]
  2. #2
    Hi,

    Each tab is configured with Loader with Mode="Frame", right?

    Well, by default, a tab should load its content when it is first time activated. So, Page_Load of a loaded into iframe page should be executed on activating a tab.

    Do you face any different behavior?
  3. #3
    Here is my issue:

    <ext:TabPanel runat="server" region="Center">
       <items>
          <ext:Panel runat="server" Title="Active" Icon="UserGreen" Layout="BorderLayout">
             <items>
                <ext:GridPanel ...>
                   <Store>
                      <ext:Store runat="server" RemoteSort="true" PageSize="25" onReadData="ActiveUsers_RefreshData">
                       ...
                      </ext:Store>
                   </Store>
                   ...
                </ext:GridPanel>
             </items>
          </ext:Panel>
          <ext:Panel runat="server" Title="Inactive" Icon="UserRed" Layout="BorderLayout">
             <items>
                <ext:GridPanel ...>
                   <Store>
                      <ext:Store runat="server" RemoteSort="true" PageSize="25" onReadData="InactiveUsers_RefreshData">
                       ...
                      </ext:Store>
                   </Store>
                   ...
                </ext:GridPanel>
             </items>
          </ext:Panel>
       </items>
    </ext:TabPanel>
    I would like only the tab that is active to load its data. Thus when the tab panel first comes up I do not want the "Inactive" tab to load its data.
    Then when the user changes tab I would like to refresh the grids store for the new active tab.
  4. #4
    I would implement it this way.

    Example
    <%@ Page Language="C#" %>
    
    <script runat="server">
        protected void Store_ReadData(object sender, StoreReadDataEventArgs e)
        {
            (sender as Store).DataSource = new object[] 
                {
                    new object[] { DateTime.Now.Second }
                };
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <title>Ext.NET v2 Example</title>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        <ext:TabPanel runat="server">
            <Items>
                <ext:Panel runat="server" Title="Tab 1">
                    <Items>
                        <ext:GridPanel runat="server" AutoHeight="true">
                            <Store>
                                <ext:Store 
                                    runat="server" 
                                    OnReadData="Store_ReadData" 
                                    AutoLoad="false">
                                    <Model>
                                        <ext:Model runat="server">
                                            <Fields>
                                                <ext:ModelField Name="test" />
                                            </Fields>
                                        </ext:Model>
                                    </Model>
                                    <Proxy>
                                        <ext:PageProxy>
                                            <Reader>
                                                <ext:ArrayReader />
                                            </Reader>
                                        </ext:PageProxy>
                                    </Proxy>
                                </ext:Store>
                            </Store>
                            <ColumnModel runat="server">
                                <Columns>
                                    <ext:Column runat="server" Text="Test" DataIndex="test" />
                                </Columns>
                            </ColumnModel>
                        </ext:GridPanel>
                    </Items>
                </ext:Panel>
                <ext:Panel runat="server" Title="Tab 2">
                    <Items>
                        <ext:GridPanel runat="server" AutoHeight="true">
                            <Store>
                                <ext:Store 
                                    runat="server" 
                                    OnReadData="Store_ReadData" 
                                    AutoLoad="false">
                                    <Model>
                                        <ext:Model runat="server">
                                            <Fields>
                                                <ext:ModelField Name="test" />
                                            </Fields>
                                        </ext:Model>
                                    </Model>
                                    <Proxy>
                                        <ext:PageProxy>
                                            <Reader>
                                                <ext:ArrayReader />
                                            </Reader>
                                        </ext:PageProxy>
                                    </Proxy>
                                </ext:Store>
                            </Store>
                            <ColumnModel runat="server">
                                <Columns>
                                    <ext:Column runat="server" Text="Test" DataIndex="test" />
                                </Columns>
                            </ColumnModel>
                        </ext:GridPanel>
                    </Items>
                </ext:Panel>
            </Items>
            <Listeners>
                <AfterRender Handler="this.getActiveTab().getComponent(0).getStore().reload();" />
                <TabChange Handler="newTab.getComponent(0).getStore().reload();" />
            </Listeners>
        </ext:TabPanel>
    </body>
    </html>
  5. #5
    Awesome, works like a charm. Please close the thread.

Similar Threads

  1. Replies: 1
    Last Post: May 18, 2012, 1:52 PM
  2. [CLOSED] Set active tab tabpanel
    By Pablo_Azevedo in forum 1.x Premium Help
    Replies: 3
    Last Post: Jun 22, 2011, 8:03 AM
  3. TabPanel set active tab on server
    By logicspeak in forum 1.x Help
    Replies: 1
    Last Post: Aug 25, 2010, 4:40 PM
  4. Replies: 3
    Last Post: Jun 28, 2010, 3:37 PM
  5. [CLOSED] Load Ifram into non active tab
    By Jurke in forum 1.x Premium Help
    Replies: 1
    Last Post: Apr 29, 2009, 11:46 AM

Posting Permissions