Hi,
Please see my sample below. Please ensure that you view the sample using IE9 with compatability mode disabled. I have 5 index pages, each page loads the same information. Navigating between each page using the buttons (Open One, Open Tow, Open Three, Open Four, Open Five) on the toolbar gradually increases the memory.
I am using a Windows7 X64.
I have updated to included a link to the CDN for Jquery. It did not make a difference to the memory. Var is not required before monitor.
Master Page
<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
<%@ Import Namespace="Ext.Net.MVC" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>
</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/Scripts/Monitor.js"></script>
</head>
<body>
<form id="form1" runat="server" class="x-hidden">
</form>
<ext:ResourceManager ID="MasterResourceManager" runat="server" Theme="Gray">
</ext:ResourceManager>
<ext:Viewport ID="TheViewPoint" EnableTheming="True" runat="server" IDMode="Explicit"
Layout="BorderLayout">
<Items>
<ext:Panel runat="server" ID="NorthPanel" Region="North" AutoHeight="True">
<Items>
<ext:Toolbar ID="MainToolBar" runat="server">
<Items>
<ext:Button runat="server" ID="btn" Height="50" Text='Open One'>
<Listeners>
<Click Handler="Monitor.MenuItemOnClick({ title: 'Sample', linkurl: '/Grid/Index', icon: null, passParentSize: true})" />
</Listeners>
</ext:Button>
<ext:Button runat="server" ID="Button1" Height="50" Text='Open Two'>
<Listeners>
<Click Handler="Monitor.MenuItemOnClick({ title: 'Sample', linkurl: '/Grid/Index2', icon: null, passParentSize: true})" />
</Listeners>
</ext:Button>
<ext:Button runat="server" ID="Button2" Height="50" Text='Open Threet'>
<Listeners>
<Click Handler="Monitor.MenuItemOnClick({ title: 'Sample', linkurl: '/Grid/Index3', icon: null, passParentSize: true})" />
</Listeners>
</ext:Button>
<ext:Button runat="server" ID="Button3" Height="50" Text='Open Four'>
<Listeners>
<Click Handler="Monitor.MenuItemOnClick({ title: 'Sample', linkurl: '/Grid/Index4', icon: null, passParentSize: true})" />
</Listeners>
</ext:Button>
<ext:Button runat="server" ID="Button4" Height="50" Text='Open Five'>
<Listeners>
<Click Handler="Monitor.MenuItemOnClick({ title: 'Sample', linkurl: '/Grid/Index5', icon: null, passParentSize: true})" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</Items>
</ext:Panel>
<ext:Panel ID="MainContentPanel" Layout="Fit" runat="server" BodyPadding="0" AutoScroll="false"
Border="False" Title="1" Region="Center">
<Loader ID="MainContentPanelLoader" runat="server" Mode="Frame" DisableCaching="true"
AutoLoad="false" Scripts="false">
</Loader>
<Items>
<ext:Panel runat="server">
</ext:Panel>
</Items>
<Listeners>
<AfterRender Handler="App.MainContentPanel.setTitle('');">
</AfterRender>
</Listeners>
</ext:Panel>
</Items>
</ext:Viewport>
</body>
</html>
Controller
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Ext.Net.MVC;
namespace MVC3Sample.Controllers
{
public class GridController : Controller
{
//
// GET: /Grid/
public ActionResult Index()
{
return View("Index");
}
public ActionResult Index2()
{
return View("Index2");
}
public ActionResult Index3()
{
return View("Index3");
}
public ActionResult Index4()
{
return View("Index4");
}
public ActionResult Index5()
{
return View("Index5");
}
public StoreResult GetData(string filter = "", int start = 0, int pageSize = 1, int pageIndex = 1)
{
StoreResult response = new StoreResult();
List<User> data = new List<User>();
Random randow = new Random();
DateTime now = DateTime.Now;
for (int i = start + 1; i <= 67; i++)
{
User user = new User()
{
Firstname = "User " + i,
Lastname = "User Last " + i,
Age = i + 23
};
data.Add(user);
}
response.Data = data;
response.Total = 67;
return response;
}
}
public class User
{
public String Firstname { get; set; }
public String Lastname { get; set; }
public int Age { get; set; }
}
}
JS File
Monitor = {
MenuItemOnClick: function (config, item) {
if (Ext.isEmpty(config.isPopup)) {
config.isPopup = "false";
}
if (config.isPopup.toString().toLowerCase() == "false") {
var numericId = "452316466989"; // this.hashCode(config.linkUrl);
var id = "panel" + numericId;
var panel = App.MainContentPanel.getComponent(id);
App.MainContentPanel.load({
autoLoad: true,
renderer: "frame",
url: config.linkurl,
params: config.data
});
Ext.Function.defer(function () {
var iframe = $(App.MainContentPanel.el.dom).find("iframe");
if (iframe.length > 0) {
var newId = "Iframe" + numericId;
iframe.attr("id", newId);
}
}, 100);
}
else {
Monitor.ShowModal(config.linkUrl);
}
}
}
INDEX Page
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<meta content="NO-CACHE" http-equiv="CACHE-CONTROL" />
<script src="/Scripts/Monitor.js" type="text/javascript"></script>
<script type="text/javascript">
</script>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server">
</ext:ResourceManager>
<ext:Viewport ID="viewportResultView" runat="server" Layout="border" IDMode="Static">
<Items>
<ext:Panel ID="Panel2" runat="server" Title="Sample" Height="100" Region="Center">
<Items>
<ext:GridPanel IDMode="Static" ID="gridPanelCompanyInformation" runat="server" Region="North"
Title="Array Grid" Width="600" Height="350">
<Store>
<ext:Store ID="Store1" runat="server" AutoLoad ="true" Buffered="true" PageSize = "100" >
<Proxy>
<ext:AjaxProxy DirectionParam="SortDirection" FilterParam="filter" LimitParam="pageSize"
GroupParam="Group" PageParam="pageIndex" SortParam="sort" StartParam="start"
Url="/Grid/GetData">
<Reader>
<ext:JsonReader TotalProperty = "total" Root = "data" messageProperty= "message" />
</Reader>
<ExtraParams>
</ExtraParams>
</ext:AjaxProxy>
</Proxy>
<Model>
<ext:Model ID="Model1" runat="server" >
<Fields>
<ext:ModelField Name="Firstname" />
<ext:ModelField Name="Lastname" />
<ext:ModelField Name="Age" Type="Int" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:Column ID="Column1" runat="server" Text="Firstname" DataIndex="Firstname" />
<ext:Column ID="Column2" runat="server" Text="Lastname" DataIndex="Lastname" />
<ext:Column ID="Column3" runat="server" Text="Age" DataIndex="Age" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
</SelectionModel>
</ext:GridPanel>
</Items>
</ext:Panel>
</Items>
<Listeners>
</Listeners>
</ext:Viewport>
</body>
</html>
INDEX2 Page
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<meta content="NO-CACHE" http-equiv="CACHE-CONTROL" />
<script src="/Scripts/Monitor.js" type="text/javascript"></script>
<script type="text/javascript">
</script>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server">
</ext:ResourceManager>
<ext:Viewport ID="viewportResultView" runat="server" Layout="border" IDMode="Static">
<Items>
<ext:Panel ID="Panel2" runat="server" Title="Sample" Height="100" Region="Center">
<Items>
<ext:GridPanel IDMode="Static" ID="gridPanelCompanyInformation" runat="server" Region="North"
Title="Array Grid" Width="600" Height="350">
<Store>
<ext:Store ID="Store1" runat="server" AutoLoad ="true" Buffered="true" PageSize = "100" >
<Proxy>
<ext:AjaxProxy DirectionParam="SortDirection" FilterParam="filter" LimitParam="pageSize"
GroupParam="Group" PageParam="pageIndex" SortParam="sort" StartParam="start"
Url="/Grid/GetData">
<Reader>
<ext:JsonReader TotalProperty = "total" Root = "data" messageProperty= "message" />
</Reader>
<ExtraParams>
</ExtraParams>
</ext:AjaxProxy>
</Proxy>
<Model>
<ext:Model ID="Model1" runat="server" >
<Fields>
<ext:ModelField Name="Firstname" />
<ext:ModelField Name="Lastname" />
<ext:ModelField Name="Age" Type="Int" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:Column ID="Column1" runat="server" Text="Firstname" DataIndex="Firstname" />
<ext:Column ID="Column2" runat="server" Text="Lastname" DataIndex="Lastname" />
<ext:Column ID="Column3" runat="server" Text="Age" DataIndex="Age" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
</SelectionModel>
</ext:GridPanel>
</Items>
</ext:Panel>
</Items>
<Listeners>
</Listeners>
</ext:Viewport>
</body>
</html>
INDEX3 Page
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<meta content="NO-CACHE" http-equiv="CACHE-CONTROL" />
<script src="/Scripts/Monitor.js" type="text/javascript"></script>
<script type="text/javascript">
</script>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server">
</ext:ResourceManager>
<ext:Viewport ID="viewportResultView" runat="server" Layout="border" IDMode="Static">
<Items>
<ext:Panel ID="Panel2" runat="server" Title="Sample" Height="100" Region="Center">
<Items>
<ext:GridPanel IDMode="Static" ID="gridPanelCompanyInformation" runat="server" Region="North"
Title="Array Grid" Width="600" Height="350">
<Store>
<ext:Store ID="Store1" runat="server" AutoLoad ="true" Buffered="true" PageSize = "100" >
<Proxy>
<ext:AjaxProxy DirectionParam="SortDirection" FilterParam="filter" LimitParam="pageSize"
GroupParam="Group" PageParam="pageIndex" SortParam="sort" StartParam="start"
Url="/Grid/GetData">
<Reader>
<ext:JsonReader TotalProperty = "total" Root = "data" messageProperty= "message" />
</Reader>
<ExtraParams>
</ExtraParams>
</ext:AjaxProxy>
</Proxy>
<Model>
<ext:Model ID="Model1" runat="server" >
<Fields>
<ext:ModelField Name="Firstname" />
<ext:ModelField Name="Lastname" />
<ext:ModelField Name="Age" Type="Int" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:Column ID="Column1" runat="server" Text="Firstname" DataIndex="Firstname" />
<ext:Column ID="Column2" runat="server" Text="Lastname" DataIndex="Lastname" />
<ext:Column ID="Column3" runat="server" Text="Age" DataIndex="Age" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
</SelectionModel>
</ext:GridPanel>
</Items>
</ext:Panel>
</Items>
<Listeners>
</Listeners>
</ext:Viewport>
</body>
</html>
INDEX4 Page
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<meta content="NO-CACHE" http-equiv="CACHE-CONTROL" />
<script src="/Scripts/Monitor.js" type="text/javascript"></script>
<script type="text/javascript">
</script>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server">
</ext:ResourceManager>
<ext:Viewport ID="viewportResultView" runat="server" Layout="border" IDMode="Static">
<Items>
<ext:Panel ID="Panel2" runat="server" Title="Sample" Height="100" Region="Center">
<Items>
<ext:GridPanel IDMode="Static" ID="gridPanelCompanyInformation" runat="server" Region="North"
Title="Array Grid" Width="600" Height="350">
<Store>
<ext:Store ID="Store1" runat="server" AutoLoad ="true" Buffered="true" PageSize = "100" >
<Proxy>
<ext:AjaxProxy DirectionParam="SortDirection" FilterParam="filter" LimitParam="pageSize"
GroupParam="Group" PageParam="pageIndex" SortParam="sort" StartParam="start"
Url="/Grid/GetData">
<Reader>
<ext:JsonReader TotalProperty = "total" Root = "data" messageProperty= "message" />
</Reader>
<ExtraParams>
</ExtraParams>
</ext:AjaxProxy>
</Proxy>
<Model>
<ext:Model ID="Model1" runat="server" >
<Fields>
<ext:ModelField Name="Firstname" />
<ext:ModelField Name="Lastname" />
<ext:ModelField Name="Age" Type="Int" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:Column ID="Column1" runat="server" Text="Firstname" DataIndex="Firstname" />
<ext:Column ID="Column2" runat="server" Text="Lastname" DataIndex="Lastname" />
<ext:Column ID="Column3" runat="server" Text="Age" DataIndex="Age" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
</SelectionModel>
</ext:GridPanel>
</Items>
</ext:Panel>
</Items>
<Listeners>
</Listeners>
</ext:Viewport>
</body>
</html>
INDEX5 Page
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<meta content="NO-CACHE" http-equiv="CACHE-CONTROL" />
<script src="/Scripts/Monitor.js" type="text/javascript"></script>
<script type="text/javascript">
</script>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server">
</ext:ResourceManager>
<ext:Viewport ID="viewportResultView" runat="server" Layout="border" IDMode="Static">
<Items>
<ext:Panel ID="Panel2" runat="server" Title="Sample" Height="100" Region="Center">
<Items>
<ext:GridPanel IDMode="Static" ID="gridPanelCompanyInformation" runat="server" Region="North"
Title="Array Grid" Width="600" Height="350">
<Store>
<ext:Store ID="Store1" runat="server" AutoLoad ="true" Buffered="true" PageSize = "100" >
<Proxy>
<ext:AjaxProxy DirectionParam="SortDirection" FilterParam="filter" LimitParam="pageSize"
GroupParam="Group" PageParam="pageIndex" SortParam="sort" StartParam="start"
Url="/Grid/GetData">
<Reader>
<ext:JsonReader TotalProperty = "total" Root = "data" messageProperty= "message" />
</Reader>
<ExtraParams>
</ExtraParams>
</ext:AjaxProxy>
</Proxy>
<Model>
<ext:Model runat="server" >
<Fields>
<ext:ModelField Name="Firstname" />
<ext:ModelField Name="Lastname" />
<ext:ModelField Name="Age" Type="Int" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:Column runat="server" Text="Firstname" DataIndex="Firstname" />
<ext:Column ID="Column1" runat="server" Text="Lastname" DataIndex="Lastname" />
<ext:Column ID="Column2" runat="server" Text="Age" DataIndex="Age" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
</SelectionModel>
</ext:GridPanel>
</Items>
</ext:Panel>
</Items>
<Listeners>
</Listeners>
</ext:Viewport>
</body>
</html>
View that Inherits Master Page
<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
Controller for View
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
}