Official Ext.NET 2.3 Release Now Available

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

PM> Install-Package Ext.NET

As well, a separate ASP.NET MVC specific NuGet package of Ext.NET is available. Search for Ext.NET.MVC in the NuGet Package Manager, use the following console command to install, or download directly from Ext.NET.

PM> Install-Package Ext.NET.MVC

A full list of new features, revisions and fixes are available in the CHANGELOG.

Here’s a few highlights:

New MultiUpload Component

Features include:

• Multiple file selection
• File upload progress
• Custom limits for file size and number of uploads
• Filter by file type (i.e. *.jpg, *.png)
• File queue
• Drag and Drop (it is supported in browsers that support the HTML5 File API and the Drag and Drop API only: FireFox 4.0+, Chrome, Safari 5.0+, IE 10)

The MultiUpload component requires some changes in Web.config and Global.asax files for correct handling of Session and Authentication requests. Further details can be found in the following sample.

Other related examples are available in the Examples Explorer (MultiUpload > Basic)

NOTE:The MultiUpload component does require Flash be enabled in the browser.

New GridPanel Printing

New client-side printing functionality has been added to the GridPanel. To use, simply call the client-side JavaScript .print() function of the GridPanel instance. The functionality supports column renderers, printing of the current page and, printing of the entire GridPanel data set [default functionality].

New samples in the Examples Explorer (GridPanel > ArrayGrid > Simple and GridPanel > ArrayGrid > ArrayWithPaging)

FilterHeader Plugin

The FilterHeader Plugin shows all filters in the GridPanel’s Header in a convenient way compared to typical menu based GridPanel filters and provides rich functionality such as Custom Behaviour and Custom Field. As always, fully functional demos with full source code can be found in our Examples Explorer (GridPanel > FilterHeader)

PasswordMask

The functionality of the PasswordMask plugin has been improved by adding the following features:

• TriggerButton to generate strong password by pattern
• Estimate password strength
• Check password against black list (“qwerty”, “111111”, “welcome”, etc.)
• TriggerButton to Show/Hide password value
• Check password does not equal the username

A new demo is available in the Examples Explorer (Form > TextField > Advanced Password Mask)

TemplateWidget Property for BaseControl

Using the new TemplateWidget property of the BaseControl it’s possible to render multiple instances of one component, without separate requests to the server. Now any Ext.NET component inheriting from BaseControl (almost everything) provides a factory function to create instances of itself.

By default, to render a new instance of the component you should call the following function App.[ControlId](). Or you can use TemplateWidgetFnName property to declare the name of the factory method.

The default config of the base component can be changed by sending a config to the method: App.[ControlId]([NewConfig]). For instance, we have the following window with a TextField:

<ext:Window
    runat="server"
    IDMode="Ignore"
    Width="550"
    Height="300"
    TemplateWidget="true"
    TemplateWidgetFnName="createMessageWindow">
    <Items>
        <ext:FormPanel runat="server">
            <Items>
                <ext:TextField
                    runat="server"
                    LabelWidth="55"
                    FieldLabel="Write something"
                    />
            </Items>
        </ext:FormPanel>
    </Items>
    <Buttons>
        <ext:Button runat="server" Text="Click me" />
    </Buttons>
</ext:Window> 

IDMode="Ignore" is used to avoid conflicts between different instances of the same control. Every click of the Button below will render of new instance of the base window without communication to the server.

<ext:Button
    runat="server"
    Text="Open new window"
    Handler="App.createMessageWindow().show();"
    /> 

Full examples with the TemplateWidget can be found in our Examples Explorer (Miscellaneous > Template Widget)

New ItemSelector Widget

The ItemSelector widget has been added to Ext.NET. The ItemSelector displays two MultiSelect controls and allows for moving items between them. By default, one MultiSelect control has a title Available, while another has a title Selected. Items for the Available MultiSelect control come from the Items Collection, while Items for the Selected MultiSelect come from the SelectedItems Collection. A detailed sample is available in the Examples Explorer (Form > MultiSelect > ItemSelector)

Improvements to ServerMapping

Using the ServerMapping property of the Store Model, it’s possible to call an object’s Method without arguments, including extension methods and indexers:

public class Department
{
    public int ID { get; set; }
    public string Name { get; set; }
    public string GetIdPlusName() {
        return this.ID + ": " + this.Name;
    }
}

public class Employee
{
    public string Name { get; set; }
    public string Surname { get; set; }
    public Department Department { get; set; }
    public string[] Phone { get; set; }

    public static List GetAll()
    {
        return new List
        {
            new Employee
            {
                ID = 1,
                Name = "Nancy",
                Surname = "Davolio",
                Department = Department.GetAll()[0],
                Phone = new string[] { "555-555-555", "777-777-777" }
            }
        };
    }
}

<ext:Model runat="server">
    <Fields>
        <ext:ModelField Name="Name" />
        <ext:ModelField
            Name="Surname"
            ServerMapping="Surname.ToUpper()"
            />
        <ext:ModelField
            Name="Department"
            ServerMapping="Department.Name"
            />
        <ext:ModelField
            Name="DepartmentIdPlusName"
            ServerMapping="Department.GetIdPlusName()"
            />
        <ext:ModelField
            Name="PhoneHome"
            ServerMapping="Phone[0]"
            />
        <ext:ModelField
            Name="PhoneWork"
            ServerMapping="Phone[1]"
            />
    </Fields>
</ext:Model> 

Demos and source code available at GridPanel > Data Presentation > Server Mapping (WebForms) and GridPanel > Data Presentation > Server Mapping (MVC)

DataIndex property on Fields

If you want to load a complex object into a FormPanel during a DirectEvent/DirectMethod request, the DataIndex property now supports dot (‘.’) syntax for child objects.

FormPanel1.SetValues(new {
    FirstName = "John",
    LastName = "White",
    Phone = new {
        CountryCode = "+1",
        AreaCode = "222",
        Number = "333-4444",
        Extension  = "555"
    }
}); 

<ext:FormPanel
    ID="FormPanel1"
    runat="server">
    <Items>
        <ext:TextField
            runat="server"
            Flex="1"
            Name="FirstName"
            AllowBlank="false"
            />

        <ext:TextField
            runat="server"
            Flex="1"
            Name="LastName"
            AllowBlank="false"
            />

        <ext:FieldContainer
            runat="server"
            FieldLabel="Phone">
            <Items>
                <ext:TextField
                    runat="server"
                    Name="PhoneCountryCode"
                    DataIndex="Phone.CountryCode"
                    />
                <ext:DisplayField runat="server" Text="(" />
                <ext:TextField
                    runat="server"
                    Name="PhoneAreaCode"
                    DataIndex="Phone.AreaCode"
                    />
                <ext:DisplayField runat="server" Text=")" />
                <ext:TextField
                    runat="server"
                    Name="PhoneNumber"
                    DataIndex="Phone.Number"
                    />
                <ext:DisplayField runat="server" Text="(" />
                <ext:TextField
                    runat="server"
                    Name="PhoneExtension"
                    DataIndex="Phone.Extension"
                    />
                <ext:DisplayField runat="server" Text=")" />
            </Items>
        </ext:FieldContainer>
    </Items>
</ext:FormPanel> 

In addition, you can load complex records into the FormPanel from the Store.

<ext:Store ID="Store1" runat="server" >
    <Model>
        <ext:Model runat="server">
            <Fields>
                <ext:ModelField Name="FirstName" />
                <ext:ModelField Name="LastName" />
                <ext:ModelField Name="Phone" Type="Object" />
            </Fields>
        </ext:Model>
    </Model>
    <Listeners>
        <Load Handler="App.FormPanel1.loadRecord(records[0]);" />
    </Listeners>
</ext:Store> 

A full sample can be found in the Examples Explorer (Form > Miscellaneous > Data Binding).

New GroupPaging Plugin

We’ve received many requests to provide a solution for paging Groups in the GridPanel, and the new GroupPaging Plugin is here to help. The new functionality is simple to enable by just adding the <ext:GroupPaging /> config inside the PagingToolbar’s <Plugins> Property.

<ext:PagingToolbar runat="server">
    <Plugins>
        <ext:GroupPaging />
    </Plugins>
</ext:PagingToolbar> 

Demo available at GridPanel > Plugins > GroupPaging.

New ProgressBarColumn Widget

The ProgressBarColumn widget has been added to simplify displaying progress-bars inside a GridPanel. Demo available in the Examples Explorer (GridPanel > ColumnModel > ProgressBarColumn)

RemoveClearTrigger Property for IE10

The RemoveClearTrigger property of TextField removes the clear trigger that appears by default for all input types in Internet Explorer 10. This default IE10 behavior can be an annoying visual element for end users of your Ext.NET application, so we decided to introduce a dedicated property to make removal painless.

<ext:TextField runat="server" RemoveClearTrigger="True" /> 

In addition, the ClearButton plugin now automatically deactivates the IE10 clear trigger button.

Improved Button options for TextField

Recently we added two new Button related Collections for the TextField component – LeftButtons and RightButtons. We’ve also added two new properties LeftButtonsShowMode and RightButtonsShowMode to the TextField component to make them even more useful. Options include:

• Always – Buttons are always visible
• Focus – Buttons are visible only if a TextField has focus
• MouseOver – Buttons are visible only if the mouse cursor over it
• NonBlank – Buttons are visible only if a TextField is not blank
• MouseOverNonBlank – Buttons are visible only if a TextField is not blank and the mouse pointer is hovered over it
• MouseOverOrFocus – Buttons are visible only if the mouse pointer is hovered or a TextField has focus

GlobalSettings and RequestSettings

We added two properties GlobalSettings and RequestSettings to the JSON class for managing serialization of objects into JSON.

protected void Application_Start()
{
    JSON.GlobalSettings = new Newtonsoft.Json.JsonSerializerSettings();
} 

Related discussion and sample case can be found in this forum thread

Minified JavaScript files for all UXs

All JavaScript files of our Extensions (UXs) have been minified and now require less time to download. It’s still possible to view the source code in the readable (non-minified) form by setting the ScriptMode property on the ResourceManager to Debug.

<ext:ResourceManager ScriptMode="Debug" /> 

Comparisions between the size of JavaScript files of different UXs in Debug (non-minified) vs Release (minified) modes:

Summary

Many other features, bug fixes and performance improvements are packed in the Ext.NET 2.3 release. We encourage you to upgrade your application and browse through the WebForms Examples Explorer and MVC Examples Explorer.

To the best of our knowledge, there are no Breaking Changes. Any Breaking Changes would be listed in the BREAKING_CHANGES document. If you happen to find a Breaking Change not included in this list, please feel free to post in the Ext.NET Community Forums.

Technical support questions are best asked in the in the Community Forums as well, and we’re always available to assist.

Follow us on Twitter @extnet, or join us on Facebook where we’re now posting regular updates.