Please note: This code sample was created and tested using Ext.NET 2.0 Beta 1.
Quite a few requests in the Ext.NET community forums is on how to use the framework in codebehind
I have thrown together a small example based on the example GridPanel -> DataSource Controls -> SqlDataSource using the employee table in the Microsoft Northwind example database to feed the content
The c# code is taken almost directly from the markup coding in the example above
(NB! the code is tested using Ext.NET 2.0 Beta 1)
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>GridPanel</title>
<style type="text/css">
<style type="text/css">
.x-grid-cell-fullName .x-grid-cell-inner {
font-family : tahoma, verdana;
display : block;
font-weight : normal;
font-style : normal;
color : #385F95;
white-space : normal;
}
.x-grid-rowbody div {
margin : 2px 5px 20px 5px !important;
width : 99%;
color : Gray;
}
.x-grid-row-expanded td.x-grid-cell{
border-bottom-width:0px;
}
</style>
</head>
<body>
<form id="form" runat="server">
<ext:ResourceManager id="resourceManager" runat="server" Theme="Gray" />
</form>
</body>
</html>
default.aspx.cs
using System;
using System.Web.UI.WebControls;
using System.Configuration;
using ext = Ext.Net;
namespace dk.looksharp.dbview
{
public partial class _default : System.Web.UI.Page
{
string _dataSourceId = "SqlDataSource";
protected override void OnInit(EventArgs e)
{
base.OnInit(e);
}
protected void Page_Load(object sender, EventArgs e)
{
this.form.Controls.Add(BuildDataSource());
this.form.Controls.Add(BuildGridPanel());
}
private SqlDataSource BuildDataSource()
{
string _selectStatement =
"SELECT " +
"[EmployeeID], " +
"[LastName], " +
"[FirstName], " +
"[Title], " +
"[TitleOfCourtesy], " +
"[BirthDate], " +
"[HireDate], " +
"[Address], " +
"[City], " +
"[Region], " +
"[PostalCode], " +
"[Country], " +
"[HomePhone], " +
"[Extension], " +
"[Notes] " +
"FROM [Employees]";
return new SqlDataSource
{
ID = _dataSourceId,
ConnectionString = ConfigurationManager.ConnectionStrings["Northwind"].ToString(),
SelectCommand = _selectStatement
};
}
private ext.GridPanel BuildGridPanel()
{
return new ext.GridPanel
{
Border = true,
Store =
{
this.BuildStore()
},
SelectionModel =
{
new ext.RowSelectionModel() { Mode = ext.SelectionMode.Single }
},
ColumnModel =
{
Columns =
{
new ext.Column
{
ID="fullName",
Text="Full Name",
Width=150,
DataIndex="LastName"
// <Renderer Fn="fullName
},
new ext.Column
{
DataIndex="Title",
Text="Title",
Width=150
},
new ext.Column
{
DataIndex="TitleOfCourtesy",
Text="Title Of Courtesy",
Width=150
},
new ext.Column
{
DataIndex="BirthDate",
Text="BirthDate",
Width=110
},
new ext.Column
{
DataIndex="HireDate",
Text="HireDate",
Width=110
},
new ext.Column
{
DataIndex="Address",
Text="Address",
Width=150
},
new ext.Column
{
DataIndex="City",
Text="City",
Width=100
},
new ext.Column
{
DataIndex="Region",
Text="Region",
Width=100
},
new ext.Column
{
DataIndex="PostalCode",
Text="PostalCode",
Width=100
},
new ext.Column
{
DataIndex="Country",
Text="Country",
Width=100
},
new ext.Column
{
DataIndex="HomePhone",
Text="HomePhone",
Width=150
},
new ext.Column
{
DataIndex="Extension",
Text="Extension",
Width=100
}
}
},
View =
{
new ext.GridView()
{
StripeRows = true,
TrackOver = true
}
}
};
}
private ext.Store BuildStore()
{
ext.Store store = new ext.Store
{
ID = "store", // <-- ID is Required
Model =
{
new ext.Model
{
Fields =
{
new ext.ModelField("FirstName"),
new ext.ModelField("LastName"),
new ext.ModelField("Title"),
new ext.ModelField("TitleOfCourtesy"),
new ext.ModelField("BirthDate", ext.ModelFieldType.Date, "M/d hh:mmtt"),
new ext.ModelField("HireDate", ext.ModelFieldType.Date, "M/d hh:mmtt"),
new ext.ModelField("Address"),
new ext.ModelField("City"),
new ext.ModelField("Region"),
new ext.ModelField("PostalCode"),
new ext.ModelField("Country"),
new ext.ModelField("HomePhone"),
new ext.ModelField("Extension"),
new ext.ModelField("Notes"),
new ext.ModelField("company")
}
}
}
};
store.DataSourceID = this._dataSourceId;
//store.DataBind();
return store;
}
}
}