Ext.NET 2.x
BaseMasterPage.Master
<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
<!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 runat="server">
<title>
<asp:ContentPlaceHolder ID="TitleContent" runat="server" />
</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="/resources/css/ui.css" />
<ext:ResourcePlaceHolder runat="server" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server" />
</head>
<body>
<%--<ext:ResourceManager ID="resManager" runat="server" ViewStateMode="Disabled" IDMode="Static" InitScriptMode="Inline" Namespace="" />--%>
<ext:ResourceManager ID="resManager" runat="server" ViewStateMode="Disabled" InitScriptMode="Inline" />
<div>
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</div>
</body>
</html>
Index.aspx
<%@ Page Language="C#" MasterPageFile="~/Views/Shared/BaseMasterPage.Master" Inherits="System.Web.Mvc.ViewPage" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">
Sample Project - Details
</asp:Content>
<asp:Content ID="HeadContent" ContentPlaceHolderID="HeadContent" runat="server">
<script type="text/javascript">
Ext.ns("Framework");
top.Framework = {
resolveUrl: function ResolveUrl(url) {
var appPath = '<%= Request.ApplicationPath %>';
if (appPath == "/")
return url;
else
return '<%= Request.ApplicationPath %>' + url;
},
openWindow: function () {
top.Trace = new Array();
top.Trace['StartOpenDetail'] = new Date();
var w = new Ext.Window({
renderTo: Ext.getBody(),
title: 'Details Window',
frame: true,
modal: false,
isModal: false,
resizable: true,
maximizable: true,
minimizable: true,
draggable: true,
width: 800,
height: 600,
loader: {
url: top.Framework.resolveUrl('/Sample/Sample/Details'),
renderer: 'frame',
disableCaching: true,
loadMask: {
showMask: true,
msg: 'Loading...'
}
}
});
w.show();
},
showTrace: function () {
var strReturn = '';
var lastProperty = null;
top.Trace.sort();
for (var property in top.Trace) {
if (Ext.isEmpty(lastProperty))
strReturn = strReturn + property.toString() + ' -> ' + Ext.Date.format(top.Trace[property], 'H:i:s.u') + '<br/>';
else {
var offset = top.Trace[property] - top.Trace[lastProperty];
strReturn = strReturn + property.toString() + ' -> ' + Ext.Date.format(top.Trace[property], 'H:i:s.u') + ' (+' + offset + 'ms) <br/>';
}
lastProperty = property;
}
var offsetTotal = top.Trace.StopStore - top.Trace.StartOpenDetail;
strReturn = strReturn + '<u>Total:</u> <b>' + offsetTotal + 'ms</b>';
Ext.Msg.show({
title: 'Trace',
msg: strReturn,
buttons: Ext.Msg.OK,
icon: Ext.Msg.INFO
});
}
};
</script>
</asp:Content>
<asp:Content ID="MainContent" ContentPlaceHolderID="MainContent" runat="server">
<ext:Viewport runat="server" Layout="HBoxLayout">
<Content>
</Content>
<LayoutConfig>
<ext:HBoxLayoutConfig Align="Middle" Pack="Center">
</ext:HBoxLayoutConfig>
</LayoutConfig>
<Items>
<ext:Button runat="server" Text="Open Detail">
<Listeners>
<Click Handler="top.Framework.openWindow();" />
</Listeners>
</ext:Button>
</Items>
</ext:Viewport>
</asp:Content>
Details.aspx
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<List<Presentation.Web.MVC.Client.Areas.Sample.ViewModels.VMSample>>"
MasterPageFile="~/Views/Shared/BaseMasterPage.Master" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">
Sample Project - Details
</asp:Content>
<asp:Content ID="HeadContent" ContentPlaceHolderID="HeadContent" runat="server">
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
this.dsDetails.DataBind();
}
</script>
</asp:Content>
<asp:Content ID="MainContent" ContentPlaceHolderID="MainContent" runat="server">
<ext:Viewport runat="server" Layout="FitLayout">
<Bin>
<ext:Store ID="dsDetails" runat="server" ShowWarningOnFailure="false" DataSource="<%# ((List<Presentation.Web.MVC.Client.Areas.Sample.ViewModels.VMSample>)Model).ToList() %>">
<Model>
<ext:Model runat="server" IDProperty="SampleId">
<Fields>
<ext:ModelField Name="SampleId" Type="Int" SortDir="ASC" />
<ext:ModelField Name="PropertyName" Type="String" />
<ext:ModelField Name="Data1" Type="String" />
<ext:ModelField Name="Data2" Type="String" />
<ext:ModelField Name="Data3" Type="String" />
<ext:ModelField Name="Data4" Type="String" />
<ext:ModelField Name="Data5" Type="String" />
</Fields>
</ext:Model>
</Model>
<Listeners>
<Load Handler="App.DetailsForm.form.loadRecord(records[0]);"
Delay="10" />
</Listeners>
</ext:Store>
</Bin>
<Items>
<ext:Panel ID="BorderLayoutMain" runat="server" Layout="BorderLayout">
<Items>
<ext:Panel runat="server" Region="North" Height="55">
<TopBar>
<ext:Toolbar ID="MenuBar" runat="server">
<Items>
<ext:Button runat="server" Text="Text">
<Menu>
<ext:Menu runat="server">
<Items>
<ext:MenuItem Text="Text" Icon="Add">
<ToolTips>
<ext:ToolTip runat="server" Html="Tooltip" />
</ToolTips>
</ext:MenuItem>
<ext:MenuItem Text="Text" Icon="Add" />
<ext:MenuSeparator />
<ext:MenuItem Text="Text" Icon="Disk" />
<ext:MenuItem Text="Text" Icon="Delete" />
<ext:MenuSeparator />
<ext:MenuItem Text="Text" Icon="DoorIn" />
</Items>
</ext:Menu>
</Menu>
</ext:Button>
<ext:Button runat="server" Text="Text">
<Menu>
<ext:Menu runat="server">
<Items>
<ext:MenuItem Text="Text" Icon="Exclamation" />
</Items>
</ext:Menu>
</Menu>
</ext:Button>
<ext:Button runat="server" Text="Text">
<Menu>
<ext:Menu runat="server">
<Items>
<ext:MenuItem Text="Text" Icon="Reload" />
</Items>
</ext:Menu>
</Menu>
</ext:Button>
<ext:Button runat="server" Text="Text">
<Menu>
<ext:Menu runat="server">
<Items>
<ext:MenuItem Text="Text" Icon="PageFind" />
<ext:MenuSeparator />
<ext:MenuItem Text="Text" Icon="CalendarViewWeek" />
<ext:MenuItem Text="Text" Icon="CalendarStar" />
<ext:MenuItem Text="Text" Icon="CalendarViewDay" />
</Items>
</ext:Menu>
</Menu>
</ext:Button>
<ext:Button runat="server" Text="Text">
<Menu>
<ext:Menu runat="server">
<Items>
<ext:MenuItem Text="Text" />
<ext:MenuSeparator />
<ext:MenuItem Text="Text" />
</Items>
</ext:Menu>
</Menu>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Items>
<ext:Toolbar ID="TopBar" runat="server">
<Items>
<ext:SplitButton runat="server" Icon="Add" ToolTip="Tooltip">
<Menu>
<ext:Menu runat="server">
<Items>
<ext:MenuItem runat="server" Text="Text" Icon="Add" />
<ext:MenuItem Text="Text" Icon="Add" />
</Items>
</ext:Menu>
</Menu>
</ext:SplitButton>
<ext:Button runat="server" Icon="Disk" ToolTip="Tooltip" />
<ext:Button runat="server" Icon="Delete" ToolTip="Tooltip" />
<ext:ToolbarSeparator />
<ext:Button runat="server" Icon="PageFind" ToolTip="Tooltip" />
<ext:ToolbarSeparator />
<ext:Button runat="server" Icon="CalendarViewWeek" ToolTip="Tooltip" />
<ext:Button runat="server" Icon="CalendarStar" ToolTip="Tooltip" />
<ext:Button runat="server" Icon="CalendarViewDay" ToolTip="Tooltip" />
<ext:ToolbarSeparator />
<ext:Button runat="server" Icon="DoorIn" ToolTip="Tooltip" />
</Items>
</ext:Toolbar>
</Items>
</ext:Panel>
<ext:Panel runat="server" Region="Center" Layout="BorderLayout">
<Items>
<ext:FormPanel ID="DetailsForm" runat="server" Url='<%# Url.Action("Save") %>' Border="false"
LabelSeparator=":" LabelAlign="Top" AutoDataBind="true" LabelWidth="110" TrackResetOnLoad="true"
Frame="true" Region="North" Height="75" Layout="HBoxLayout" IDMode="Static">
<Defaults>
<ext:Parameter Name="labelAlign" Value="top" Mode="Value" />
<ext:Parameter Name="margins" Value="5" Mode="Raw" />
</Defaults>
<Items>
<ext:TextField ID="SampleId" runat="server" FieldLabel="SampleId" MaxLength="20"
AllowBlank="false" Width="200" />
<ext:TextField ID="PropertyName" runat="server" FieldLabel="PropertyName" MaxLength="20"
AllowBlank="false" Width="200" />
<ext:TextField ID="Data1" runat="server" FieldLabel="Data1" MaxLength="20" AllowBlank="false"
Width="200" />
<ext:TextField ID="Data2" runat="server" FieldLabel="Data2" MaxLength="20" AllowBlank="false"
Width="200" />
<ext:TextField ID="Data3" runat="server" FieldLabel="Data3" MaxLength="20" AllowBlank="false"
Width="200" />
<ext:TextField ID="Data4" runat="server" FieldLabel="Data4" MaxLength="20" AllowBlank="false"
Width="200" />
<ext:TextField ID="Data5" runat="server" FieldLabel="Data5" MaxLength="20" AllowBlank="false"
Width="200" />
</Items>
</ext:FormPanel>
<ext:TabPanel ID="mainTabPanel" runat="server" Border="false" Region="Center" DeferredRender="false">
<Items>
<ext:Panel ID="tab1" runat="server" Border="false" Title="Tab1" Layout="FitLayout">
<Loader runat="server" ID="loaderTab1" Url="/ExtNET2/Sample/Sample/Tab" Mode="Script" Scripts="false" TriggerEvent="activate" Namespace="" IDMode="Static">
<LoadMask ShowMask="true" Msg="Loading Tab..." UseMsg="true" />
<Params>
<ext:Parameter Name="containerId" Value="#{tab1}" Mode="Value" />
</Params>
</Loader>
<Listeners>
<BeforeRender Handler="top.Trace['StartOpenTab'] = new Date();" />
</Listeners>
</ext:Panel>
</Items>
</ext:TabPanel>
</Items>
</ext:Panel>
<ext:PagingToolbar runat="server" StoreID="dsDetails" Region="South" />
</Items>
</ext:Panel>
</Items>
<Listeners>
<AfterRender Handler="top.Trace['StopOpenDetail'] = new Date();" />
</Listeners>
</ext:Viewport>
</asp:Content>
Tab.ascx
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<ext:Panel runat="server" Layout="BorderLayout">
<Items>
<ext:GridPanel runat="server" Height="500" Region="Center" AutoScroll="true">
<Store>
<ext:Store runat="server" AutoLoad="true" ShowWarningOnFailure="false" WarningOnDirty="false"
RemoteSort="false" TabIndex="-1">
<Proxy>
<ext:AjaxProxy Url='/ExtNET2/Sample/Sample/List'>
<Reader>
<ext:JsonReader IDProperty="SampleId" Root="data" TotalProperty="totalCount" />
</Reader>
</ext:AjaxProxy>
</Proxy>
<Model>
<ext:Model runat="server" IDProperty="SampleId" Root="data" TotalProperty="totalCount">
<Fields>
<ext:ModelField Name="SampleId" Type="Int" />
<ext:ModelField Name="PropertyName" Type="String" />
<ext:ModelField Name="Data1" Type="String" />
<ext:ModelField Name="Data2" Type="String" />
<ext:ModelField Name="Data3" Type="String" />
<ext:ModelField Name="Data4" Type="String" />
<ext:ModelField Name="Data5" Type="String" />
</Fields>
</ext:Model>
</Model>
<Sorters>
<ext:DataSorter Property="FechaInicioAnotacionAgenda" Direction="DESC" />
</Sorters>
<Listeners>
<BeforeLoad Handler="top.Trace['StartStore'] = new Date();" />
<Load Handler="top.Trace['StopStore'] = new Date(); top.Framework.showTrace();" Delay="10" />
</Listeners>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" DataIndex="SampleId" Text="SampleId">
<Renderer Handler="return Ext.util.Format.htmlEncode(value);" />
</ext:Column>
<ext:Column runat="server" DataIndex="PropertyName" Text="PropertyName">
<Renderer Handler="return Ext.util.Format.htmlEncode(value);" />
</ext:Column>
<ext:Column runat="server" DataIndex="Data1" Text="Data1" Width="75">
<Renderer Handler="return Ext.util.Format.htmlEncode(value);" />
</ext:Column>
<ext:Column runat="server" DataIndex="Data2" Text="Data2" Width="75">
<Renderer Handler="return Ext.util.Format.htmlEncode(value);" />
</ext:Column>
<ext:Column runat="server" DataIndex="Data3" Text="Data3" Width="75">
<Renderer Handler="return Ext.util.Format.htmlEncode(value);" />
</ext:Column>
<ext:Column runat="server" DataIndex="Data4" Text="Data4" Width="75">
<Renderer Handler="return Ext.util.Format.htmlEncode(value);" />
</ext:Column>
<ext:Column runat="server" DataIndex="Data5" Text="Data5" Width="75">
<Renderer Handler="return Ext.util.Format.htmlEncode(value);" />
</ext:Column>
</Columns>
</ColumnModel>
<View>
<ext:GridView runat="server" MarkDirty="false" TrackOver="true" StripeRows="true"
LoadMask="false" LoadingUseMsg="false" TabIndex="-1" />
</View>
<SelectionModel>
<ext:RowSelectionModel Mode="Single" runat="server" />
</SelectionModel>
<Listeners>
<AfterRender Handler="top.Trace['StopOpenTab'] = new Date();" />
</Listeners>
</ext:GridPanel>
</Items>
</ext:Panel>
SampleController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Presentation.Web.MVC.Client.Areas.Sample.ViewModels;
using Ext.Net.MVC;
namespace Presentation.Web.MVC.Client.Areas.Sample.Controllers
{
public class SampleController : Controller
{
public ActionResult Details()
{
var entity = new VMSample
{
SampleId = 0,
PropertyName = "Sample Details Window Text",
Data1 = Guid.NewGuid().ToString(),
Data2 = Guid.NewGuid().ToString(),
Data3 = Guid.NewGuid().ToString(),
Data4 = Guid.NewGuid().ToString(),
Data5 = Guid.NewGuid().ToString()
};
var list = new List<VMSample>();
list.Add(entity);
return View("Details", list);
}
public ActionResult Tab(string containerId)
{
var partialViewResult = new Ext.Net.MVC.PartialViewResult(containerId, Ext.Net.RenderMode.AddTo);
partialViewResult.WrapByScriptTag = false;
partialViewResult.SingleControl = true;
return partialViewResult;
}
public ActionResult List()
{
var listVMSample = new List<VMSample>();
for (var i = 1; i < 100; i++)
{
listVMSample.Add(new VMSample
{
SampleId = i,
PropertyName = "Item " + i.ToString(),
Data1 = Guid.NewGuid().ToString(),
Data2 = Guid.NewGuid().ToString(),
Data3 = Guid.NewGuid().ToString(),
Data4 = Guid.NewGuid().ToString(),
Data5 = Guid.NewGuid().ToString()
});
}
return new StoreResult(listVMSample, listVMSample.Count);
}
}
}
VMSample.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace Presentation.Web.MVC.Client.Areas.Sample.ViewModels
{
public class VMSample
{
public int SampleId { get; set; }
public string PropertyName { get; set; }
public string Data1 { get; set; }
public string Data2 { get; set; }
public string Data3 { get; set; }
public string Data4 { get; set; }
public string Data5 { get; set; }
}
}
