Introducing Ext.NET 2.2

The official Ext.NET Pro 2.2 release, integrating Ext JS 4.2 is now available. Please feel free to download directly from the Ext.NET download page, or using NuGet.

PM> Install-Package Ext.NET

A new Ext.NET MVC specific NuGet package is now available. Search for Ext.NET.MVC in the NuGet Package Manager, or use the following console command to install.

PM> Install-Package Ext.NET.MVC

We also created a couple of videos demonstrating how to install Ext.NET into a WebForms project using NuGet. The same basic process applies to installing Ext.NET.MVC into an ASP.NET MVC project.

A video tutorial demonstrating in greater detail an Ext.NET WebForms installation using Visual Studio and NuGet is also available.

A lot of effort has gone into this release, so lets work our way through some of the highlights.

Internet Explorer 10 Support

As of Ext JS 4.2, IE 10 is now fully supported, including HTML5 capabilities such as CSS3 transitions, gradients and shadows.

New VerticalMarker Plugin for Charts

The VerticalMarker Plugin can be added to Line Charts to track your mouse movement in the vertical axis. This Plugin is especially helpful if you’re rendering multiple series and would like to provide a visual aid for comparing data points.

To add to your Line Chart, just include the new <ext:VerticalMarker> config inside the Chart <Plugins>.

<ext:Chart runat="server">
    <Plugins>
        <ext:VerticalMarker runat="server" />
    </Plugins>
</ext:Chart> 

As with all Ext.NET Components, the VerticalMarker Plugin is also fully supported in C# and ASP.NET MVC Razor.

Another great Chart demo is Chart > Line > Multiple Axes. Two different Axes are configured (Left and Right), both rendering at different scales, and nice use of the VerticalMarker Plugin.

Kitchen Sink examples

About twenty new “Kitchen Sink” samples have been ported over to the Examples Explorer. Most demonstrate basic Layout or configuration of Components, and are a good place to start if you’re new to the framework.

New Right-to-Left (RTL) Support

A big new feature added to Ext JS 4.2 is RTL rendering and in Ext.NET 2.2 we pick up this functionality.

The RTL property can be set in several locations, including on the Viewport with RTL="true". We’ve also done the extra work to add as a Global property, and set in any of the following locations:

• at the Page level using <ext:ResourceManager RTL="true" />
• at the Application level using Web.config <extnet rtl="true" />
• in the Session using this.Session["Ext.Net.RTL"] = true;
• in the HttpContext using HttpContext.Current.Application["Ext.Net.RTL"] = true;

New TabPanel Features

Vertical rendering of Tabs using new TabPosition="Left|Right" property.

We’ve also added Vertical rendering of Tabs to the <ext:TabStrip> Component. The Docked TabStrip is a crazy demonstration of how far you can push this functionality, including vertical Tab scrolling!

New Drag and Drop reordering of Tabs using the <ext:BoxReorderer /> Plugin.

New Neptune Theme

The new Neptune Theme is now officially included and supported.

From the Sencha blog post announcing Neptune support:

Neptune gives your application a clean, modern and lighter look by minimizing unnecessary visual elements such as borders and increased padding in many places to make the overall interface feel more relaxed and open.

It’s easy to test the new Neptune Theme in your application by setting Theme="Neptune" on the ResourceManager. Four Themes are officially included and fully supported: Neptune, Classic, Gray and Accessibility.

Neptune has also been added as an option in the Examples Explorer, so you can test against any of the 500+ samples. Please note, on Internet Explorer, Neptune is only supported on IE7+.

New ThemePath Property

Sometimes you might bring your own or another 3rd party Ext JS Theme .css file, and would prefer to exclude the embedded Theme from rendering. Set the ThemePath property on the <ext:ResourceManager> with a path to the file and we’ll take care of adding the correct html markup to your Page.

<ext:ResourceManager ThemePath="~/resources/MyTheme/mytheme.css" /> 

As with almost all ResourceManager properties, you can also set across application wide by configuring the property in the Web.config, Session or Application object.

New ResetStyles Property

In Ext JS 4.2, the Reset styles were removed, which could cause some rendering issues if upgrading from an earlier 2.x version of Ext.NET.

The change to remove the Reset Stylesheet is a breaking change (for the better), although we have added a simple ResetStyles property to revert the functionality if you do not want to tackle the CSS upgrades within your application at this time.

If when upgrading your application to Ext.NET 2.2, you notice strange CSS rendering issues, try setting ResetStyles="true" property on the ResourceManager.

<ext:ResourceManager ResetStyles="true" /> // default value is "false" 

While we’re still on the subject of Themes and CSS, if you require total control over the rendering and placement of the Theme .css file, we’ve added a handy new Theme="None" option. If set on the ResourceManager (this is a Global property too), no .css file will be rendered by Ext.NET, and you’re free to manually include as required.

<ext:ResourceManager Theme="None" /> 

New “Development” ScriptMode

On the ResourceManager, you can now set ScriptMode="Development" to render a different Ext JavaScript file and provide enhanced client-side debugging information into the browser console. These extra debugging statements and warnings can really come in handy if you’re trying to track down a JavaScript related issue.

This new ScriptMode option is certainly useful during development, but just remember to remove (or switch to Release) before releasing your application into production.

New CheckboxGroupFor and RadioGroupFor MVC helpers

Two new ASP.NET MVC Razor Helper Methods for rendering CheckboxGroups and RadioGroups have been added. Just pass in a Model, and any IEnumerable list of objects using that Model, and the GroupFor helper will go to work creating the Checkbox or Radio items.

Html.X().RadioGroupFor(Model, IEnumerable) 

Demo available in the MVC Examples Explorer.

TreePanel CommandColumn and ComponentColumn

You’ve been able to add CommandColumns and ComponentColumns to GridPanels for a long time with Ext.NET, but as of 2.2 you can also add to TreePanels. This opens up many new user interface possibilities for rendering or interacting with TreePanel data. Separate TreePanel Command Column and Component Column samples are available in the Examples Explorer.

SignalR + jQuery + Ext.NET

Anup Shah, author of the Ext.NET Web Application Development Book, has put together a cool demo integrating SignalR, jQuery and Ext.NET. There’s a detailed blog post outlining the process and a working sample is available in the Examples Explorer.

Full source to the original SignalR sample is available on GitHub.

Summary

Details regarding the Ext JS 4.2 release are also available in the Introducing Ext JS 4.2 Sencha Blog post.

Many more features and performance improvements are packed in the Ext.NET 2.2 release, so we encourage you to upgrade your application and browse the Examples Explorer (MVC Examples Explorer).

Please feel free to post any technical support questions in the Community Forums, and we’ll be happy to assist.

Follow Ext.NET on Twitter using @extnet or tag us using #extnet.

NOTE: The Ext.NET Pro Bundle SALE is ending May 31, 2013. Double the One on One consulting time is included with Five and Twenty Pack Premium Support Subscriptions, but only until the end of May.