Sample with a common nested borderlayouts. Note nesting is required because first borderlayout usually resides in MasterPage and second borderlayout is in content page. The time may vary across browsers/computer. I tested on IE8 w/ compatibility mode as our application is IE only.
Fast, Old Way (438ms):
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Response.AddHeader("Pragma", "no-cache")
Me.Response.Cache.SetCacheability(HttpCacheability.NoCache)
If Not Coolite.Ext.Web.Ext.IsAjaxRequest Then
Me.script.AddBeforeClientInitScript("this.startPoint=new Date();")
Me.script.Listeners.DocumentReady.Handler = "window.status=new Date() - this.startPoint;"
End If
End Sub
Private Sub store_RefreshData(ByVal sender As Object, ByVal e As Coolite.Ext.Web.StoreRefreshDataEventArgs) Handles store.RefreshData
Dim list As New List(Of Object)
For i As Integer = 1 To 26
list.Add(New With {.FirstName = "John" & i, .LastName = "Doe" & i, .Department = "Department" & i, .Age = 25})
Next
Me.store.DataSource = list
Me.store.DataBind()
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<script type="text/javascript">
function btnClick(btn) {
alert(btn.text);
}
</script>
<ext:ScriptManager runat="server" ID="script">
</ext:ScriptManager>
<ext:Store runat="server" ID="store">
<Proxy>
<ext:DataSourceProxy>
</ext:DataSourceProxy>
</Proxy>
<Reader>
<ext:JsonReader ReaderID="LastName">
<Fields>
<ext:RecordField Name="LastName">
</ext:RecordField>
<ext:RecordField Name="FirstName">
</ext:RecordField>
<ext:RecordField Name="Department">
</ext:RecordField>
<ext:RecordField Name="Age">
</ext:RecordField>
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
<ext:ViewPort ID="Viewport1" runat="server">
<Body>
<ext:BorderLayout runat="server">
<North>
<ext:Panel runat="server" Border="false" Height="50">
<Body>
Navigation and Header</Body>
</ext:Panel>
</North>
<Center MarginsSummary="5,5,5,5">
<ext:Panel ID="Panel1" runat="server" Border="false">
<Body>
<ext:BorderLayout runat="server">
<West Collapsible="true" Split="true">
<ext:TreePanel runat="server" ID="tree" Title="Folders" Icon="FolderStar" UseArrows="true"
TrackMouseOver="true" Width="350">
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button ID="Button1" runat="server" Text="Save" Icon="Disk" Handler="btnClick">
</ext:Button>
<ext:Button ID="Button2" runat="server" Text="Save" Icon="Disk" Handler="btnClick">
</ext:Button>
<ext:Button ID="Button3" runat="server" Text="Save" Icon="Disk" Handler="btnClick">
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Root>
<ext:TreeNode Text="Root" Icon="Folder">
<Nodes>
<ext:TreeNode Text="Child1" Icon="Folder">
</ext:TreeNode>
<ext:TreeNode Text="Child2" Icon="Folder">
</ext:TreeNode>
<ext:TreeNode Text="Child3" Icon="Folder">
</ext:TreeNode>
<ext:TreeNode Text="Child4" Icon="Folder">
</ext:TreeNode>
<ext:TreeNode Text="Child5" Icon="Folder">
</ext:TreeNode>
</Nodes>
</ext:TreeNode>
</Root>
</ext:TreePanel>
</West>
<Center>
<ext:GridPanel runat="server" ID="grid" Title="Users" Icon="User" StoreID="store">
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:Button ID="Button11" runat="server" Text="Save" Icon="Disk" Handler="btnClick">
</ext:Button>
<ext:Button ID="Button4" runat="server" Text="Save" Icon="Disk" Handler="btnClick">
</ext:Button>
<ext:Button ID="Button5" runat="server" Text="Save" Icon="Disk" Handler="btnClick">
</ext:Button>
<ext:Button ID="Button6" runat="server" Text="Save" Icon="Disk" Handler="btnClick">
</ext:Button>
<ext:Button ID="Button7" runat="server" Text="Save" Icon="Disk" Handler="btnClick">
</ext:Button>
<ext:Button ID="Button8" runat="server" Text="Save" Icon="Disk" Handler="btnClick">
</ext:Button>
<ext:Button ID="Button9" runat="server" Text="Save" Icon="Disk" Handler="btnClick">
</ext:Button>
<ext:Button ID="Button10" runat="server" Text="Save" Icon="Disk" Handler="btnClick">
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<ColumnModel>
<Columns>
<ext:RowNumbererColumn Fixed="true">
</ext:RowNumbererColumn>
<ext:Column DataIndex="FirstName" Header="First Name">
</ext:Column>
<ext:Column DataIndex="LastName" Header="Last Name">
</ext:Column>
<ext:Column DataIndex="Department" Header="Department">
</ext:Column>
<ext:Column DataIndex="Age" Header="Age">
</ext:Column>
</Columns>
</ColumnModel>
<View>
<ext:GridView ForceFit="true">
</ext:GridView>
</View>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server">
</ext:RowSelectionModel>
</SelectionModel>
<BottomBar>
<ext:PagingToolbar ID="PagingToolbar1" runat="server" StoreID="store" PageSize="25">
</ext:PagingToolbar>
</BottomBar>
</ext:GridPanel>
</Center>
</ext:BorderLayout>
</Body>
</ext:Panel>
</Center>
</ext:BorderLayout>
</Body>
</ext:ViewPort>
</form>
</body>
</html>
Slow, New Way (1001ms)
<%@ 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">
<script runat="server">
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Response.AddHeader("Pragma", "no-cache")
Me.Response.Cache.SetCacheability(HttpCacheability.NoCache)
If Not Ext.Net.X.IsAjaxRequest Then
Me.script.AddBeforeClientInitScript("this.startPoint=new Date();")
Me.script.Listeners.DocumentReady.Handler = "window.status=new Date() - this.startPoint;"
End If
End Sub
Private Sub store_RefreshData(ByVal sender As Object, ByVal e As Ext.Net.StoreRefreshDataEventArgs) Handles store.RefreshData
Dim list As New List(Of Object)
For i As Integer = 1 To 26
list.Add(New With {.FirstName = "John" & i, .LastName = "Doe" & i, .Department = "Department" & i, .Age = 25})
Next
Me.store.DataSource = list
Me.store.DataBind()
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<script type="text/javascript">
function btnClick(btn) {
alert(btn.text);
}
</script>
<ext:ResourceManager runat="server" ID="script">
</ext:ResourceManager>
<ext:Store runat="server" ID="store">
<Proxy>
<ext:PageProxy>
</ext:PageProxy>
</Proxy>
<Reader>
<ext:JsonReader IDProperty="LastName">
<Fields>
<ext:RecordField Name="LastName">
</ext:RecordField>
<ext:RecordField Name="FirstName">
</ext:RecordField>
<ext:RecordField Name="Department">
</ext:RecordField>
<ext:RecordField Name="Age">
</ext:RecordField>
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
<ext:Viewport ID="Viewport1" runat="server">
<Content>
<ext:BorderLayout ID="BorderLayout1" runat="server">
<North>
<ext:Panel ID="Panel1" runat="server" Border="false" Height="50">
<Content>
Navigation and Header</Content>
</ext:Panel>
</North>
<Center MarginsSummary="5,5,5,5">
<ext:Panel ID="Panel2" runat="server" Border="false">
<Content>
<ext:BorderLayout ID="BorderLayout2" runat="server" >
<West Collapsible="true" Split="true">
<ext:TreePanel runat="server" ID="tree" Title="Folders" Icon="FolderStar" UseArrows="true"
TrackMouseOver="true" Width="350">
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:Button ID="Button1" runat="server" Text="Save" Icon="Disk" Handler="btnClick">
</ext:Button>
<ext:Button ID="Button2" runat="server" Text="Save" Icon="Disk" Handler="btnClick">
</ext:Button>
<ext:Button ID="Button3" runat="server" Text="Save" Icon="Disk" Handler="btnClick">
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Root>
<ext:TreeNode Text="Root" Icon="Folder">
<Nodes>
<ext:TreeNode Text="Child1" Icon="Folder">
</ext:TreeNode>
<ext:TreeNode Text="Child2" Icon="Folder">
</ext:TreeNode>
<ext:TreeNode Text="Child3" Icon="Folder">
</ext:TreeNode>
<ext:TreeNode Text="Child4" Icon="Folder">
</ext:TreeNode>
<ext:TreeNode Text="Child5" Icon="Folder">
</ext:TreeNode>
</Nodes>
</ext:TreeNode>
</Root>
</ext:TreePanel>
</West>
<Center>
<ext:GridPanel runat="server" ID="grid" Title="Users" Icon="User" StoreID="store">
<TopBar>
<ext:Toolbar ID="Toolbar2" runat="server">
<Items>
<ext:Button ID="Button11" runat="server" Text="Save" Icon="Disk" Handler="btnClick">
</ext:Button>
<ext:Button ID="Button4" runat="server" Text="Save" Icon="Disk" Handler="btnClick">
</ext:Button>
<ext:Button ID="Button5" runat="server" Text="Save" Icon="Disk" Handler="btnClick">
</ext:Button>
<ext:Button ID="Button6" runat="server" Text="Save" Icon="Disk" Handler="btnClick">
</ext:Button>
<ext:Button ID="Button7" runat="server" Text="Save" Icon="Disk" Handler="btnClick">
</ext:Button>
<ext:Button ID="Button8" runat="server" Text="Save" Icon="Disk" Handler="btnClick">
</ext:Button>
<ext:Button ID="Button9" runat="server" Text="Save" Icon="Disk" Handler="btnClick">
</ext:Button>
<ext:Button ID="Button10" runat="server" Text="Save" Icon="Disk" Handler="btnClick">
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<ColumnModel>
<Columns>
<ext:RowNumbererColumn Fixed="true">
</ext:RowNumbererColumn>
<ext:Column DataIndex="FirstName" Header="First Name">
</ext:Column>
<ext:Column DataIndex="LastName" Header="Last Name">
</ext:Column>
<ext:Column DataIndex="Department" Header="Department">
</ext:Column>
<ext:Column DataIndex="Age" Header="Age">
</ext:Column>
</Columns>
</ColumnModel>
<View>
<ext:GridView ForceFit="true">
</ext:GridView>
</View>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server">
</ext:RowSelectionModel>
</SelectionModel>
<BottomBar>
<ext:PagingToolbar ID="PagingToolbar1" runat="server" StoreID="store" PageSize="25">
</ext:PagingToolbar>
</BottomBar>
</ext:GridPanel>
</Center>
</ext:BorderLayout>
</Content>
</ext:Panel>
</Center>
</ext:BorderLayout>
</Content>
</ext:Viewport>
</form>
</body>
</html>