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.
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
<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
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 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.
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.
Details regarding the Ext JS 4.2 release are also available in the Introducing Ext JS 4.2 Sencha Blog post.
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