Ext.NET 4.4 Now Available

Ext.NET 4.4 has been released and is now available to download directly or install using NuGet.

Ext.NET WebForms

Install-Package Ext.NET

Ext.NET MVC

Install-Package Ext.NET.MVC

Ext JS 6.5.1

The release of Ext.NET 4.4 incorporates another big update to the underlying Sencha Ext JS framework with the inclusion of ExtJS 6.5.1. Like the previous version, more than 300 fixes and features have been added since the last Ext.NET release and as always, everything is automatically included in both Ext.NET WebForms and MVC.

A detailed list of client-side improvements in Ext JS 6.5.1 is available for review, with several of the notable new features detailed next.

Chart Captions support

Now you can easily add captions to your charts using the new Caption feature. It has predefinitions with theme-specific formatting for the title, the subtitle and credits, and you can add any custom captions as you like, with additional ease for positioning them if compared to just adding text sprites around the chart.

We’ve drew an example to illustrade the feature in action in our examples explorer here: Chart Captions sample.

In the example we use it like this:

<Captions>
    <Title Text="Search engine hits last year" />
    <Credits Text="Source: Random number generator." Align="Right">
        <Style FontStyle="italic" />
    </Credits>
    <Items>
        <ext:ChartCaptionItem
            Name="customOne"
            Align="Left"
            AlignTo="Series"
            Text="Generated by: Ext.NET"
            Docked="Bottom">
            <Style FillStyle="blue" FontFamily="Arial" FontSize="10" />
        </ext:ChartCaptionItem>
    </Items>
</Captions> 

Resulting into this. Notice we added colored arrows here to point at the actual captions:

Chart Legend Bullet Customization

The sprite legends now allow user-defined sprite specification, allowing, for instance, to determine the shape of the legend entry’s “bullet”, usually round-shaped. In the Pie Chart Example, if you change the legend specification to this (around line 93):

<LegendSpriteConfig runat="server" Docked="right">
    <Marker Type="Arrow" LineWidth="2" />
</LegendSpriteConfig> 

The picture below shows the “before” and “after” applying this legend config:

You can customize even more if you use an SVG path like this. See for yourself! 🙂

<LegendSpriteConfig runat="server" Docked="right">
    <Marker
        Type="Path"
        LineWidth="1"
        Path="M70.653,310.091h62.802v15.701h165.348c27.239,0,164.369-41.998,164.369-62.805v-62.804c0-20.809-137.13-62.802-164.369-62.802H133.456v15.701H70.653v-15.701H0v188.411h70.653V310.091z"
        Size="20"
        />
</LegendSpriteConfig> 

Store Auto-Reload on Clear Sorters

The store now supports reloading data whenever sorters are removed on a remote sorting store, with the reloadOnClearSorters config option.

Usually, when a grid panel used remote sorting and there are means to clear (or reset) sorting so that the server’s default sort is used, the developer also needed to send the reload command to the store in order to refresh data in the default server order. Now if you use:

<ext:Store ReloadOnClearSorters="true" /> 

On an Ext.Net.Store definition, as soon as the last sorter is removed from the store — or the store had its sorters cleared out — it will trigger a server-side reload to pull the data with the default server sorting.

We added a “Clear Sort” button in the DirectMethod Paging and Sorting example, which uses remote sorting, to show the functionality in action.

Panel Title Positioning

Panels now support some level of title positioning when several gadgets are placed on the panel’s header.

Suppose you want to mimic MS-Windows’ window layout, with the Control button to the left, then the title, and then the minimize, maximize and close buttons, this would be possible with:

<ext:Panel
    runat="server"
    Title="My Panel Header Title"
    TitleAlign="Center"
    TitlePosition="1">
    <HeaderConfig runat="server">
        <Items>
            <ext:Button runat="server" Text="[ – ]" UI="Info" />
            <ext:Button runat="server" Text="––" UI="Warning" />
            <ext:Button runat="server" Text="[&nbsp;&nbsp;]" UI="Warning" />
            <ext:Button runat="server" Text="X" UI="Danger" />
        </Items>
    </HeaderConfig>
</ext:Panel> 

For simplicity, there’s no fancy icons and further content in the sample code. Specific to the Triton theme, for instance, we have the font awesome and pictos available (more info on pictos on our Ext.NET 4.1 release blog post) to pull nice glyphs from. Also, valid on all themes, there are lots of icons available for Ext.NET as well.

The result of the code above using the Triton theme is this:

So there in the panel, the first button is before the title. This is possible by specifying the zero-based TitlePosition="1" argument to the panel.

Grid Panel Features

PreciseHeight

Grid Panels can now adopt an approach to synchronize row heights in greater detail.

This can be useful in situations like a locking grid panel loaded on some client browsers that accept sub-pixel measurement units. It can happen that the locked and normal panes are not precisely aligned in such browsers. The GridPanel‘s PreciseHeight config option can be set to True, to address this issue at the cost of some performance loss (depending on the case), for the more complex calculations required while syncing up.

RowSelectionModel’s DeselectOnContainerClick

Grid panels with the Row selection model can now opt in or out to deselect the last selected row whenever clicking somewhere inside the grid’s body that is not a cell. This can happen, for example, if the sum of all columns’ widths is below the actual grid width.

By default, clicking that “empty” area does not undo the selected row (if any) in the grid. But now you can set DeselectOnContainerClick to True.

See the animation below for what happens if the setting is enabled:

Other Notable Revisions

The full list of Ext.NET 4.4 changes is available for review on GitHub, with some highlights including:

1. [#353] GridPanel BufferedRenderer + RowWrap or RowExpander breaks rendering
2. [#1526] Store’s OnBeforeStoreChanged event breaks itself after first trigger
3. [#1527] Server side calls on pages with FileUploadField clears page.
4. [#1530] RowExpander: typo breaks grid if used with locking
5. [#1535] Radio Group not submitted when the form contains a File Upload field

Your Feedback

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

Technical support questions are best asked in the forums. The public discussion may help others in the future, and allows the community to participate.

Follow @extnet on Twitter to stay up-to-date.