Ext.NET 3.1 Now Available

We are pleased to announce the release of version 3.1.0. The Ext.NET team can pride itself both on having created an awesome product and constantly working on making it even more awesome!

As you probably already know Ext.NET includes components that are not found in Ext JS, and extends various Ext JS classes wherever needed, thus providing its own JavaScript layer on top of Ext JS.

This release is all about improving the overall quality of the framework and polishing it in every aspect.

As a result, and much to our amazement, we ended up with hundreds of bug fixes; more than 500 in total! This alone, is a good reason to consider 3.1.0 a version of great value and importance. As always, you can find more in the Changelog but there are some key points worth mentioning here:

What’s New

The new release does include some new features as well. Without further ado let’s see what’s been added.

Events

You can now use the Success property of the DirectResult object as shown below:

public ActionResult CheckSum(int a, int b, int s)
{
  int sum = a + b;
  DirectResult r = new DirectResult();
  r.Success = (sum == s);
  return r;
} 

You can also make the following call in your Controller providing both a flag and an error message:

public ActionResult SampleAction(string message)
{
   return this.Direct(false, "Error message");
} 

In all Ext.NET versions both DirectMethod and DirectEvent calls automatically encode parameters using Ext.encode. On the other hand, Ext JS uses Ext.Object.toQueryString to prepare parameters of Ext.Ajax requests. This can lead to JSON serialization/deserialization discrepancies when passing certain types of parameters such as arrays to a Controller method, for example. To let you decide on which encoding method to use the Encode option was introduced:

Furthermore, the Recursive option is added to allow for proper JSON serialization/deserialization of nested objects passed as parameters. Recursive default to false and applies only when Encode is false. The following example demonstrates:

View

<ext:Button runat="server" Text="Call">
    <Listeners>
        <Click Handler="
            Ext.net.DirectMethod.request({
                url: ‘/ExtNet/SomeAction’,
                cleanRequest: true,
                encode: false,
                recursive: true,
                params: {
                    intProperty : 4,
                    stringProperty : ‘blah’,
                    arrayProperty : [116, 117],
                    nestedParam: {
                        intProperty : 24,
                        stringProperty : ‘2blah’,
                        arrayProperty : [2116, 2117]
                    }
                },
                success: function(result) {
                    console.log(result);
                }
            });
        " />
    </Listeners>
</ext:Button> 

Controller

public class SomeParam
{
    [JsonProperty(PropertyName = "intProperty")]
    public int IntProperty { get; set; }

    [JsonProperty(PropertyName = "stringProperty")]
    public string StringProperty { get; set; }

    [JsonProperty(PropertyName = "arrayProperty")]
    public List<int> ArrayProperty { get; set; }

    [JsonProperty(PropertyName = "nestedParam")]
    public SomeParam NestedParam { get; set; }
}

public class ExtNetController : Controller
{
    [HttpPost]
    public ActionResult SomeAction(SomeParam param)
    {
        return this.Direct(param);
    }
} 

ComponentView

It is now easier to define a ComponentView plugin in MVC razor syntax. Instead of writing:

@(X.DataView()
  .ItemSelector("some item selector")
  .ItemTpl(X.XTemplate().Html("some template"))
  .Plugins(
    X.ComponentView()
      .Items(items =>
        items.Add(X.ViewItem()
          .Component(c => c.Add(new TextArea()))
        )
      )
  )
) 

you can simply type:

@(X.DataView()
  .ItemSelector("some item selector")
  .ItemTpl(X.XTemplate().Html("some template"))
  .Plugins(
    X.ComponentView()
      .Items(X.ViewItem().Component(new TextArea()))
  )
) 

Configuration and Parameters

The Parameter, StoreParameter and ConfigItem classes now support a constructor that takes an object as a value. The value is automatically serialized to its JSON equivalent, which can be handy when you use primitives as parameter values, for example:

bool b = false;
int i = 10;
float f = 10.10f;
double d = 11.11;
decimal dec = 111.111m;

Ext.Net.Button btn = new Ext.Net.Button
{
  CustomConfig =
  {
    new ConfigItem("bool", b),
    new ConfigItem("int", i),
    new ConfigItem("float", f),
    new ConfigItem("double", d),
    new ConfigItem("decimal", dec)
  },
  DirectEvents =
  {
    Click =
    {
      Action = "SomeAction",
      ExtraParams =
      {
        new Ext.Net.Parameter("bool", b),
        new Ext.Net.Parameter("int", i),
        new Ext.Net.Parameter("float", f),
        new Ext.Net.Parameter("double", d),
        new Ext.Net.Parameter("decimal", dec)
      }
    }
  }
}; 

Charts

Chart components now have the ability to listen to chart series items events by using the ChartItemEvents plugin. The item object is passed as a parameter to the listeners and has the following properties:

• category – the category the item falls under: ‘items’ or ‘markers’
• field – the store field used by this series item
• index – the index of the series item
• record – the store record associated with this series item
• series – the series the item belongs to
• sprite – the sprite used to represents this series item

Note, that Listeners and DirectEvents for all Series are declared in the Chart while each Series can have its own Listeners. The following code snippet based on our Bar Chart example demonstrates:

<ext:CartesianChart
  ID="Chart1"
  runat="server"
  FlipXY="true"
  InsetPadding="40"
  Height="500">
    <Series>
      <ext:BarSeries
        XField="Name"
        YField="Data1">
        <Listeners>
          <ItemClick Handler="console.log(item.category, item.record.get(‘Data1’));" />
        </Listeners>
      </ext:BarSeries>
    </Series>
    <Listeners>
      <ItemClick Handler="console.log(item.category, item.field);" />
    </Listeners>
    <Plugins>
      <ext:ChartItemEvents runat="server" />
    </Plugins>
</ext:CartesianChart> 

Miscellaneous

• You can now remove the show password trigger that appears by default for password fields in Internet Explorer 10+ by setting the new RemoveShowPasswordTrigger property:
   
  

   <ext:TextField runat="server" InputType="Password" RemoveShowPasswordTrigger="true" />  

  The red colored password TextField in the following screenshot has the option set to true.

  

• No title is required to create an Info Notification. Just pass the message as the sole parameter to the new overloaded method. In the screenshot below compare the two message boxes produced by this code:
   
  

  
  X.Msg.Info(DateTime.Now.ToShortTimeString()).Show();
  X.Msg.Info("Server time", DateTime.Now.ToShortTimeString()).Show(); 

Examples Explorer Revisited

While working on the new version we decided to thoroughly review all examples in our Examples Explorer. This was not a trivial task but with worthwhile results, nonetheless. As part of the overall quality improvement process, every example was checked for errors and a considerable number of discovered issues have been fixed. Now, the Examples Explorer is not only your number one learning resource but also the most reliable. Newly added examples are shown in the table below.

How to Get It

As always, you can 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

By default, the Ext.NET.MVC NuGet command will assume your project is running the latest ASP.NET MVC release (currently MVC 5). Both .NET 4.5 and 4.5.1 are supported.

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

Purchase Ext.NET

You can purchase Ext.NET licenses and Premium Support Subscriptions directly from the online store. Your support and commitment is greatly appreciated!

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 Forums.

Technical support questions are also best asked in the in the Forums. The Ext.NET forums are monitored 24 hours a day.

Be sure to follow us on Twitter @extnet, or join us on Facebook.