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:
Target | Quality improvements |
---|---|
Code | Vastly improved. Also, the server-side API has been revised to match that of Ext JS. |
Json.NET | The latest and greatest version 6.0.8 has been incorporated. |
Ext.NET | The size of the Assembly has been dramatically decreased by tidying things (such as resources) up. |
UI | A lot of issues concerning support of touch UIs have been addressed including scrolling on iPad. |
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:
Value | Parameters encoding method |
---|---|
true (default) | Ext.encode |
false | Ext.Object.toQueryString |
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.
Component | Description of new example added to the Examples Explorer |
---|---|
DateField | New overview example of Date and Month fields demonstrating various date pickers. |
TabPanel | The Header Tabs example demonstrates the use of TabBarHeaderPosition . |
Layout | Center layout example shows how components can be centered within their container. |
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.