Ext.NET 4.7 Now Available

Posted on by fabricio in News

The freshly updated Ext.NET version 4.7 release is ready and now available for download.

You can install Ext.NET using NuGet by running one of the following commands depending on whether your project is a WebForm or MVC project.

Ext.NET WebForms

Install-Package Ext.NET

Ext.NET MVC

Install-Package Ext.NET.MVC

Upgraded to Ext JS 6.6.0

Ext.NET 4.7.0 includes the recent Sencha Ext JS 6.6.0 release. This version introduces several new features and addresses over 50 issues since Ext JS 6.5.3.

Ext.NET Updates

Check the complete list of features implemented and bugs fixed in Ext.NET 4.7 on our github issues tracking page. We’ll point out some of the most interesting new features here.

New Gauge Component

Introduced in an earlier release of Ext JS 6, the Guage Component has now made it into Ext.NET. The component is now more mature in Ext JS and the quality is high enough to make it out to the C# world and Ext.NET production projects.

We have ported the corresponding Sencha examples to our Ext.NET Examples Explorer, featuring the same highlights. The new samples include the Basic, Needles and the Custom demo.

gauges
Gauge components updating as its value is changed

The animation above was taken from the Needles example. It features gauges with needles and includes the following settings:

  1. The top-left gauge had its fill bar removed, and the needle set up so that it crosses over the bar tracks, and just uses the default Diamond needle shape.
  2. The top-right one uses the Wedge shaped needle and got a custom animation set up, just for shows.
  3. Bottom-left, uses the Spike-shaped needle.
  4. And last, the bottom-right gauge got the Arrow-shaped needle customized around so that the needle base is located at the center of the gauge (check how it moves when values are changed), having the gauge value text moved down a little not to overlap with the needle.

Total Customization

The needle can be completely customized as well as the track, value bar, and value text within the gauge. The Custom example shows just how that’s done. Needles can be completely customized by SVG path strings, as shown in the example.

happiness
Customized gauge

Above, the needle with a custom SVG path definition. Additionally, it turns its tracks to round corners and also uses a template-driven value display, customizing the font and adding the percent sign to the value.

Here are the links to the basic MVC and WebForms examples; browse for more elaborate ones (like the needles shown above) using the left navigation pane:

You can see each example’s source code by clicking the Source Code button in the top-left of each sample.

MVC & WebForms Syntax

The two blocks below illustrates the syntax that you can use to draw a simple gauge in MVC Razor and WebForms syntaxes:

MVC


@(Html.X().Gauge()
    .ID("Gauge1")
    .Width(200)
    .Height(250)
    .Value(50)
)

WebForms


<ext:Gauge
    ID="Gauge1"
    runat="server"
    Width="200"
    Height="250"
    Value="50" />

You can see more about what is supported within a Gauge component from the Sencha documentation on Ext.ux.gauge.Gauge.

New Graphite Theme

Ext.NET 4.7 also includes the new Graphite theme. The theme focuses on an accessible interface including dark backgrounds, high contrast, and larger fonts, so everything is very visible in the viewport.

browsing with graphite theme
Browsing a grid using the Graphite Theme

Choosing between a dark or light theme may be up to each individual’s preference and Dark themes may provide some power savings on LCD and OLED displays as it was measured in this article from pcstats.com.

Accessibility and power savings aside, the Graphite theme has a modern appeal to dark-tinted interfaces.

Enabling the Graphite theme in Ext.NET

As any theme in Ext.NET, the basic two ways of setting up which one you want to use within the application are either site-wide by Web.config or page-wide via the ResourceManager. There are other ways, but they basically base on either basic ways shown here, and goes into advanced topics.

When setting via Web.config, it wouldn’t matter whether you are using MVC or WebForms; it would apply as a default to pages on both technologies. That would be a matter of adding the theme= property to the tag.

Web.config


<extnet theme="Graphite" licenseKey="** Ext.NET LICENSE KEY HERE **" />

And Graphite will be the default theme across the whole project/website.

For the page-wide approach, the syntax is the same but the format we use on MVC Razor and WebForms are different, of course; an example of how that would be done would be:

MVC


@Html.X().ResourceManager().Theme("Graphite")

WebForms


<ext:ResourceManager runat="server" Theme="Graphite" />

Notice that as the Web.config setting is broader than the ResourceManager one, the latter takes precedence over the former; that is, setting a theme as Graphite in Web.config and as Triton in ResourceManager will show a page under the Triton theme.

New TreeList Component

The Ext.list.Tree Component is now included in Ext.NET!

The TreeList Component features a nice tree panel/list that allows for extensive formatting and support for responsive layouts.

Ext.NET Tree List component
Experimenting around with the TreeList – Overview example

The new Ext.Net.TreeList is similar to the existing TreePanel Component, but the TreeList is designed to be lightweight and also implements the micro “transforming” feature that flattens the trees and transforms them into a cascaded menu.

Despite being a minimalist component, the TreeList also supports UI CSS customization.

MVC & WebForms Syntax

Here’s how a simple TreeList drawn in MVC and Webforms, respectively, will look like:

MVC


@(Html.X().TreeList().ID("TreeList1")
    .Store(
        Html.X().TreeStore().Root(
            Html.X().Node()
                .Expanded(true)
                .Children(
                    Html.X()
                        .Node()
                        .Text("Parent1")
                        .IconCls("x-fa fa-home")
                        .Children(
                            Html.X()
                                .Node()
                                .Text("Child1")
                                .IconCls("x-fa fa-inbox")
                                .Leaf(true)
                        ),
                    Html.X().Node()
                        .Text("Parent2")
                        .IconCls("x-fa fa-group")
                        .Leaf(true)
                )
        )
    )
)

WebForms


<ext:TreeList runat="server" ID="TreeList1">
    <Store>
        <ext:TreeStore ID="TreeStore1" runat="server">
            <Root>
                <ext:Node Expanded="true">
                    <Children>
                        <ext:Node Text="Parent1" IconCls="x-fa fa-home">
                            <Children>
                                <ext:Node
                                    Text="Child1"
                                    IconCls="x-fa fa-inbox"
                                    Leaf="true" />
                            </Children>
                        </ext:Node>
                        <ext:Node
                            Text="Parent2"
                            IconCls="x-fa fa-group"
                            Leaf="true" />
                    </Children>
                </ext:Node>
            </Root>
        </ext:TreeStore>
    </Store>
</ext:TreeList>

You can see more about what is supported within a TreeList component from the Sencha documentation on Ext.list.Tree.

Ext.NET Fixes

Bundled within this release are several important Ext.NET bug fixes and general improvements.

The following fixes are specific to Ext.NET:

  1. [#1594] Removed references for unused filter events from the GridFilters Plugin.
  2. [#1595] Reviewed typos with the InfoPanel regarding the removeAll() method.
  3. [#1596] Fixed InfoPanels not showing first notification behavior.
  4. [#1608] Added missing events to components inheriting from Ext.Net.Widget (client-side Ext.Widget class).

We also fixed several Ext JS specific issues that we’ve had to deal with for some time. We decided it was time for fixing them on our own.

  1. [#1597] Implemented a specific ProgressBar’s setUI() method, so that the progress indicator bar were not dropped,
  2. [#1598] Fixed an issue with ForceSelection combo boxes not updating validation status accordingly on change.
  3. [#1607] Fixed menus trimming and positioning when the browser height was too small to fit it.

The two issues below were found while reviewing the new Ext JS version against our own Examples Explorer and are brand-new issues introduced by Ext JS 6.6.0 that we needed to correct before Ext.NET 4.7 was ready for release.

  1. [#1604] Reverted the default from Ext JS 6.6.0 to use native JSON decoding implementation, as it is not compatible with Ext.NET’s Direct Methods,
  2. [#1606] Fixed an issue on Charts with Sprite Legends when calling the component selector client-side methods (like down()).

Feedback Please

Your feedback and comments are greatly appreciated. Please feel free to contact us at hello@ext.net if you have any questions or comments, join the conversations happening within the Ext.NET Community forums.

Technical support questions are best asked in the forums. The public discussions may help others in the future and allows the entire Ext.NET community to participate.