Create Ext.NET objects in codebehind

Please note: This code sample was created and tested using Ext.NET 2.0 Beta 1.

For the last couple of years I have been using Ext.NET for intranet applications used by our team. The oldest application is a tableeditor in which we can quickly edit customization parameters for our integration solution based on Biztalk 2006 R2

In this article I will present a small example on how to work with Ext.NET in codebehind and this will also be the foundation for future articles where I will end up with a full blown table editor

I will use Visual Studio 2010, .NET Framework 4.x and Ext.NET 2.0 Beta. Data/content is stored on SQL Server 2005 

Use nuget in VS to download Ext.NET and related components, You also need to install MVC even if you do not intend to use it as Ext.NET uses some of the classes from MVC (no known workaround)

The code below is a tranformed version taken from the demo pages at Ext.NET
Direct link: http://examples.ext.net/#/Portal/Basic/Simple/

Documentation from an older version of Ext.NET can be found here: http://docs.ext.net/ 

(NB! the code is tested on Ext.NET 2.0 Beta 1)

In case you need a C# to VB conversions please use eg
http://www.developerfusion.com/tools/convert/csharp-to-vb/  

the page with markup (default.aspx)

<%@ Page Language="C#" AutoEventWireup="true" 
    CodeBehind="default.aspx.cs" 
    Inherits="dk.looksharp.dbview._default" %>
<%@ 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="head" runat="server">
    <title>Portal</title>
</head>
<body>
    <form id="form" runat="server">
        <ext:ResourceManager id="resourceManager" runat="server" Theme="Gray" />
    </form>
</body>
</html>

 

Codebehind (default.aspx.cs)

using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

using ext = Ext.Net;
using ux = Ext.Net.Utilities;

namespace dk.looksharp.dbview
{
    public partial class _default : System.Web.UI.Page
    {
        private int _portletId = 1;

        protected override void OnInit(EventArgs e)
        {
            // Viewport
            ext.Viewport _viewport = new ext.Viewport
            {
                Layout = "BorderLayout",
                StyleSpec = "backgroundColor: transparent;",
                Items = 
                { 
                    CreateAccordion(),
                    CreateTabPanel()
                }
            };
            this.form.Controls.Add(_viewport);
            base.OnInit(e);
        }

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!ext.X.IsAjaxRequest)
            {
                // Load portlet content
string text = @"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna."; this.resourceManager.RegisterClientScriptBlock("text", string.Format("var text=\"{0}\";", text)); foreach (ext.Portlet portlet in ux.ControlUtils.FindControls<ext.Portlet>(this.Page)) { portlet.Html = "={text}"; portlet.BodyPadding = 5; portlet.CloseAction = ext.CloseAction.Hide; } } } private ext.Panel CreateAccordion() { // Accordion / West Region ext.Panel _accordion = new ext.Panel { Region = ext.Region.West, Title = "West", Width = Unit.Pixel(200), Layout = ext.LayoutType.Accordion.ToString(), MinWidth = 175, MaxWidth = 400, Split = true, Margins = new ext.Margins(5, 0, 5, 5).ToString(), Collapsible = true, Items = { new ext.Panel { Title = "Navigation", BodyBorder = 0, BodyStyle = "padding:6px;", Icon = ext.Icon.FolderGo, Html = "={text}" }, new ext.Panel { Title = "Settings", BodyBorder = 0, BodyStyle = "padding:6px;", Icon = ext.Icon.FolderWrench, Html = "={text}" } } }; return _accordion; } private ext.TabPanel CreateTabPanel() { ext.TabPanel _panel = new ext.TabPanel { Title = "Tab Panel", ActiveTabIndex = 0, Region = ext.Region.Center, Margins = new ext.Margins(5, 2, 5, 0).ToString(), Items = { CreatePortalPanel("Tab 1"), CreatePortalPanel("Tab 2") } }; return _panel; } private ext.Panel CreatePortalPanel(string title) { ext.Portal _portal = new ext.Portal { Border = false }; ext.PortalColumn _column = null; for (int i = 0; i < 3; i++) { _portletId++; ext.Portlet _portlet = new ext.Portlet { ID = string.Format("Portlet{0}", _portletId), Title = string.Format("Panel {0}", _portletId), Icon = ext.Icon.Accept }; _column = new ext.PortalColumn { CellCls = "x-column-padding", Items = { _portlet } }; _portal.Items.Add(_column); } ext.Panel _panel = new ext.Panel { Title = title, Layout = ext.LayoutType.Fit.ToString(), Items = { _portal } }; return _panel; } } }