Ext.NET 4.3 Now Available

Posted on by Geoffrey McGill in News

The Ext.NET Team is excited to announce that Ext.NET 4.3 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

The release of Ext.NET 4.3 incorporates another big update to the underlying Sencha Ext JS framework with the inclusion of ExtJS 6.5. 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 Ext.NET MVC.

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

Chart Features

Smoothing out the LineChart lines between connected data hubs is now configurable with the new Curve property. The following sample demonstrates configuring the Curve property of a LineSeries.


protected object chartCurve = new
{
    type = "cardinal",
    tension = 1.0
};

Then inside the LineSeries configuration the chartCurve can be applied using the following:


<ext:LineSeries
    XField="Xdata"
    YField="Ydata"
    Curve="<%# chartCurve %>"
    AutoDataBind="true"
    />

The LineSeries with the default type="linear" (see left) would then be rendered with a curved line (see right):

The above chart example was based on our Basic LineChart sample.

The PanZoom interaction has also been improved with a new DoubleTapReset boolean property. By default DoubleTapReset is false, but setting to true will trigger the Chart to reset its zoom and pan with a double-tap in a touch environment.

Form Features

The TextField selection action can now follow a specific direction when using the SelectText method. This feature becomes very useful when apps are run in a left-to-right language enviroment.

The Slider Component has improved support for multiple thumbs configuration. In the sample below, the additional thumbs on the slider are only updated because the ThumbPerValue setting is set to true.


<ext:Slider
    ID="sld1"
    runat="server"
    ThumbPerValue="true"
    Numbers="25,55,85"
    Width="250"
    />

<ext:Button
    runat="server"
    Text="Update to 5-thumb"
    Handler="App.sld1.setValue([20, 37, 60, 75, 95])"
    />

<ext:Button
    runat="server"
    Text="Update to 3-thumb"
    Handler="App.sld1.setValue([25, 55, 85])"
    />

The Change and BeforeChange events were also reviewed to support the improved thumb information.

The Toolbar Components now have a TrackMenus setting that, when used with menu buttons within the toolbar, suppresses automatic button menu expansion if one of the toolbar buttons’ menu is expanded. To prevent this (default) behavior, set TrackMenus="false".

Toolbars with menu buttons can now be set to prevent buttons with a menu to expand when moving the mouse over them if another button has its menu expanded. This feature is useful when you want to handle the menus’ hiding mechanism so that the toolbar won’t be interfering with the menus’ expanded state.


<ext:Toolbar runat="server" TrackMenus="false" />

The lightweight Widget Components can now be configured with a Name property and also a customized Ripple effect for a nice visual feedback when clicked.


<ext:ProgressBarWidget runat="server" Ripple="true" />
<ext:ProgressBarWidget runat="server" RippleString="green" />
<ext:SliderWidget runat="server" RippleString="#00ff00" />

The Widget Grid Panel sample provides a working demonstration of setting Ripple="true".

The new ReplaceCls() method was included to enable replacing CSS classes bound to the component. Very helpful when the component is handled during disabled or enabled events.

GridPanel Features

GridPanel Grouping can now have tooltips configured for expanded and collapsed modes by setting the CollapseTip and ExpandTip properties.


<ext:Grouping
    runat="server"
    CollapseTip="Collapse this group"
    ExpandTip="Expand this group"
    />

For example, if used with our Grid Panel Grouping example, when hovering the mouse on the grouping rows, the following tips will be rendered:

When using GridPanel filters, you can now bind custom actions in the events of the filter being activated and deactivated. A Grid Filters Local example sample has been added, or see documentation.


<Listeners>
    <FilterActivate
        Handler="Ext.Msg.alert('filter', 'activated: ' + column.text)"
        />
    <FilterDeactivate
        Handler="Ext.Msg.alert('filter', 'deactivated: ' + column.text)"
        />
</Listeners>

New Component KeyMap Support

A particularly interesting component that we completely reworked in the Ext.NET 4.3 release is KeyMap, which now includes the option to add a KeyMap configuration to any other Component.

We have included a new KeyMap sample which demonstrates several techniques for configuring the component-level key mapping.

The following code sample outlines a basic configuration to bind a Handler to the pressing of the a key.


<KeyMap>
   <KeyBind Key="a" Handler="Ext.Msg.alert('Pressed');" />
</Keymap>

Other Notable Revisions

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

  1. [#1350] GridPanel’s Ext.Net.GridView enableTextSelection issue
  2. [#1441] SelectOnFocus for text fields (TextArea, TextField) is ignored (always true)
  3. [#1497] Ext.chart.series.Pie3D can skip refreshing legend text when data changes
  4. [#1505] Grid Panels horizontal scrollbar misbehavior with IE11
  5. [#1514] Ext.Net.DropDownField: calling reset() triggers javascript error
  6. [#1518] Ext.Net.MenuPanel item selection to be improved
  7. [#1520] Ext.Net.CalendarPanel: Mouse hover/clicks on month view calendar events ignored on IE

Your Feedback

As always, 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.