PDA

View Full Version : [CLOSED] TabPanel - perform page load only when active



cwolcott
May 09, 2012, 2:17 PM
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?

Daniil
May 09, 2012, 3:47 PM
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?

cwolcott
May 09, 2012, 3:48 PM
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.

Daniil
May 09, 2012, 4:39 PM
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().rel oad();" />
<TabChange Handler="newTab.getComponent(0).getStore().reload();" />
</Listeners>
</ext:TabPanel>
</body>
</html>

cwolcott
May 09, 2012, 4:48 PM
Awesome, works like a charm. Please close the thread.