Please feel free to download directly from the Ext.NET download page, or using NuGet.

A new Ext.NET MVC specific NuGet package is now available. Search for Ext.NET.MVC in the NuGet Package Manager, or use the following console command to install.

We also created a couple of videos demonstrating how to install Ext.NET into a WebForms project using NuGet. The same basic process applies to installing Ext.NET.MVC into an ASP.NET MVC project.

A video tutorial demonstrating in greater detail an Ext.NET WebForms installation using Visual Studio and NuGet is also available.

A lot of effort has gone into this release, so lets work our way through some of the highlights.

Internet Explorer 10 Support

As of Ext JS 4.2, IE 10 is now fully supported, including HTML5 capabilities such as CSS3 transitions, gradients and shadows.

New VerticalMarker Plugin for Charts

The VerticalMarker Plugin can be added to Line Charts to track your mouse movement in the vertical axis. This Plugin is especially helpful if you're rendering multiple series and would like to provide a visual aid for comparing data points.

To add to your Line Chart, just include the new <ext:VerticalMarker> config inside the Chart <Plugins>.

<ext:Chart runat="server">
    <Plugins>
        <ext:VerticalMarker runat="server" />
    </Plugins>
</ext:Chart>

As with all Ext.NET Components, the VerticalMarker Plugin is also fully supported in C# and ASP.NET MVC Razor.

Another great Chart demo is Chart > Line > Multiple Axes. Two different Axes are configured (Left and Right), both rendering at different scales, and nice use of the VerticalMarker Plugin.

Kitchen Sink examples

About twenty new "Kitchen Sink" samples have been ported over to the Examples Explorer. Most demonstrate basic Layout or configuration of Components, and are a good place to start if you're new to the framework.

New Right-to-Left (RTL) Support

A big new feature added to Ext JS 4.2 is RTL rendering and in Ext.NET 2.2 we pick up this functionality.

The RTL property can be set in several locations, including on the Viewport with RTL="true". We've also done the extra work to add as a Global property, and set in any of the following locations:

• at the Page level using <ext:ResourceManager RTL="true" />
• at the Application level using Web.config <extnet rtl="true" />
• in the Session using this.Session["Ext.Net.RTL"] = true;
• in the HttpContext using HttpContext.Current.Application["Ext.Net.RTL"] = true;

New TabPanel Features

Vertical rendering of Tabs using new TabPosition="Left|Right" property.

We've also added Vertical rendering of Tabs to the <ext:TabStrip> Component. The Docked TabStrip is a crazy demonstration of how far you can push this functionality, including vertical Tab scrolling!

New Drag and Drop reordering of Tabs using the <ext:BoxReorderer /> Plugin.

New Neptune Theme

The new Neptune Theme is now officially included and supported.

From the Sencha blog post announcing Neptune support:

Neptune gives your application a clean, modern and lighter look by minimizing unnecessary visual elements such as borders and increased padding in many places to make the overall interface feel more relaxed and open.

It's easy to test the new Neptune Theme in your application by setting Theme="Neptune" on the ResourceManager. Four Themes are officially included and fully supported: Neptune, Classic, Gray and Accessibility.

Neptune has also been added as an option in the Examples Explorer, so you can test against any of the 500+ samples. Please note, on Internet Explorer, Neptune is only supported on IE7+.

New ThemePath Property

Sometimes you might bring your own or another 3rd party Ext JS Theme .css file, and would prefer to exclude the embedded Theme from rendering. Set the ThemePath property on the <ext:ResourceManager> with a path to the file and we'll take care of adding the correct html markup to your Page.

<ext:ResourceManager ThemePath="~/resources/MyTheme/mytheme.css" />

As with almost all ResourceManager properties, you can also set across application wide by configuring the property in the Web.config, Session or Application object.

New ResetStyles Property

In Ext JS 4.2, the Reset styles were removed, which could cause some rendering issues if upgrading from an earlier 2.x version of Ext.NET.

The change to remove the Reset Stylesheet is a breaking change (for the better), although we have added a simple ResetStyles property to revert the functionality if you do not want to tackle the CSS upgrades within your application at this time.

If when upgrading your application to Ext.NET 2.2, you notice strange CSS rendering issues, try setting ResetStyles="true" property on the ResourceManager.

<ext:ResourceManager ResetStyles="true" /> // default value is "false"

While we're still on the subject of Themes and CSS, if you require total control over the rendering and placement of the Theme .css file, we've added a handy new Theme="None" option. If set on the ResourceManager (this is a Global property too), no .css file will be rendered by Ext.NET, and you're free to manually include as required.

<ext:ResourceManager Theme="None" />

New "Development" ScriptMode

On the ResourceManager, you can now set ScriptMode="Development" to render a different Ext JavaScript file and provide enhanced client-side debugging information into the browser console. These extra debugging statements and warnings can really come in handy if you're trying to track down a JavaScript related issue.

This new ScriptMode option is certainly useful during development, but just remember to remove (or switch to Release) before releasing your application into production.

New CheckboxGroupFor and RadioGroupFor MVC helpers

Two new ASP.NET MVC Razor Helper Methods for rendering CheckboxGroups and RadioGroups have been added. Just pass in a Model, and any IEnumerable list of objects using that Model, and the GroupFor helper will go to work creating the Checkbox or Radio items.

Html.X().RadioGroupFor(Model, IEnumerable)

Demo available in the MVC Examples Explorer.

TreePanel CommandColumn and ComponentColumn

You've been able to add CommandColumns and ComponentColumns to GridPanels for a long time with Ext.NET, but as of 2.2 you can also add to TreePanels. This opens up many new user interface possibilities for rendering or interacting with TreePanel data. Separate TreePanel Command Column and Component Column samples are available in the Examples Explorer.

SignalR + jQuery + Ext.NET

Anup Shah, author of the Ext.NET Web Application Development Book, has put together a cool demo integrating SignalR, jQuery and Ext.NET. There's a detailed blog post outlining the process and a working sample is available in the Examples Explorer.

Full source to the original SignalR sample is available on GitHub.

Summary

Details regarding the Ext JS 4.2 release are also available in the Introducing Ext JS 4.2 Sencha Blog post.

Many more features and performance improvements are packed in the Ext.NET 2.2 release, so we encourage you to upgrade your application and browse the Examples Explorer (MVC Examples Explorer).

Please feel free to post any technical support questions in the Community Forums, and we'll be happy to assist.

Follow Ext.NET on Twitter using @extnet or tag us using #extnet.

NOTE: The Ext.NET Pro Bundle SALE is ending May 31, 2013. Double the One on One consulting time is included with Five and Twenty Pack Premium Support Subscriptions, but only until the end of May.

Introducing…

What is ONEONONE?

A new service offering is now included with all new Five Pack and Twenty Pack Premium Support Subscription purchases.

One on One is a flexible block of Ext.NET related consulting time to be spent as you see fit. The consulting time will be provided by Ext.NET staff on the core Development and/or Technical Support teams.

This is a bit of an experiment for us at Ext.NET, as we've never offered consulting services in the past. We're considering this a trial run, a Beta test if you will. This trial period will extend only until the end of May 2013.

How can I make the most of ONEONONE?

Here's a few suggestions on how to spend your time:

1. Code review

   Have an Ext.NET core developer review your project then report back with suggestions and samples demonstrating general enhancements.

2. Performance Tuning

   Want to squeeze every last drop of performance you can out of Ext.NET and your application? Let's work together to dig into your app and ensure it's tuned up and running its best.

3. Training

   Need informal training on Ext.NET or dive deep into a specific subject? We can tailor to your needs.

4. New Features

   Missing something? Looking for a new key piece of functionality? We should be able to help.

5. Introduction to Ext.NET

   Summary of Ext.NET history, features, benefits and what to expect going forward.

How do I get started with ONEONONE?

If you're interested in taking advantage of this offer, please purchase an Ext.NET Five Pack or Twenty Pack Bundle before the end of May 2013.

To sweeten the deal even more (if it wasn't sweet enough already), we're doubling the included consulting hours until the end of May. The two hours included with the Five Pack will be doubled to Four. The five hours included with the Twenty Pack will be double to Ten. Check out the below table for further details.

ONEONONE

We're at your disposal for an Ext.NET power session.

Terms and Conditions

Ext.NET One on One is only available with new Ext.NET Pro Bundle purchases. There are currently no options to upgrade or "add on" One on One services, although we might offer these options at a later time.

A basic report with comments, a summary and balance of time will be emailed upon completion of each consultation event. The time required to create this summary will not be deducted from your bank of consulting time.

Time to be used in a minimum of 30 minute blocks even if the full 30 minute block of time is not used.

Consulting is remote only. No on-site consultation is available at this time.

Remote communication will be through Skype for voice and TeamViewer for remote control. Phone conference calls may be possible if you wish to setup. Other remote control software may be used as well, but lets discuss first.

Consulting events are to be scheduled and booked in advance by emailing support@ext.net with your Customer Number. Ext.NET does not guarantee availability at a specific time, but will work with you to coordinate an acceptable time.

Services are provided in English.

Services are only provided to named developers in the Premium Support subscription. Please ensure your forum username is linked to your Premium Support Subscription by emailing to support@ext.net. We will not provide services to generic or shared accounts.

Your One on One services can be used at anytime during the life of your Premium Support Subscription. Any unused One on One services will expire with the Premium Support Subscription.

Ext.NET shall have no responsibility for loss of or damage to Customer’s data or software, regardless of the cause of any such loss or damage.

In this post we briefly look at what SignalR is and how it works. We then look at how Ext.NET can be used with SignalR by modifying a stock ticker example provided by the SignalR project. Lastly we look at some remaining things to be aware of if looking into using SignalR right now.

What is SignalR?

SignalR is an ASP.NET library making it easier to create real time web applications.

The Web experience is traditionally a pull based approach — browsers pull requests from the server. And AJAX builds on top of that.

HTML5 has long discussed server side push, without the need for plugins and applets. Server Sent Push and more recently Web Sockets are the powerful features modern browsers are incorporating.

If a server can simply notify the connecting browser when it is ready then it opens the doors to many possibilities. For example,

• Chat applications
• Collaborative working
• Notification of system changes
• And so on

As an example, imagine a backoffice application, such as one to manage products for an ecommerce web site. Suppose you are updating product information. In the meanwhile a colleague logs into the same application and starts looking at it. There is of course the risk that one could override the other's changes.

Using SignalR you could both be notified that others are looking at the same data. Maybe you are given an option to chat about it ("hey, lets coordinate what we are going to edit here.") Or, maybe the app could lock it for others until you are done with it, and so on.

Perhaps the ecommerce app is getting an incoming feed of updated data from third parties or other systems (e.g. updated order or stock data). The server could notify any browsers connected, offering to update relevant information straight away.

How does SignalR work?

SignalR has libraries for the server side (.NET) and client side (both .NET clients and JavaScript clients). As different browsers have different capabilities, SignalR takes advantage of graceful degradation to determine which transport to use when communicating from a browser to a server:

SignalR uses a fallback mechanism to connect the browser to the server. After an initial negotiation request the following transports are tried in order until a successful connection can be made:

• WebSockets (if the both the server and browser indicate they can support WebSockets)
• Server Sent Events, aka EventSource (if the browser supports Server Sent Events, which is basically all browsers except Internet Explorer)
• Forever Frame (for Internet Explorer only)
• AJAX long polling

WebSockets is the only true full-duplex connection transport. All other transports listed here use the technique/technology named for the incoming data from the server, and standard AJAX POSTs for sends from the client to the server.

https://github.com/SignalR/SignalR/wiki/Faq#what-transports-does-signalr-use-in-various-browsers-to-mimic-a-real-time-connection (as of March 16, 2013)

Unlike general HTTP, a SignalR client will make a persistent connection to the server (in the case of WebSockets, they are truly persistent; for others various techniques are used to make it appear like that). It is on GitHub so you can have a look at how they are progressing it.

On the server side, you have Hubs that provide a high level abstraction for all the message pushing you will do. With your hubs you can push messages to all clients or specific groups of clients or individual clients. These hubs use dynamic methods and other such properties and result in dynamically generated proxies for the client to talk to the server (so on both client and server, you do not worry about low level transport/socket coding, but instead just do regular method calls). It ends up looking like RPC.

For a really quick and simple overview of how it works, I highly recommend you check out Scott Hanselman's video on SignalR. It is just a few minutes, but really clearly explains everything you need to know to get started!

Why not just stick with AJAX?

AJAX based applications are immensely powerful, no doubt.

The above ecommerce backoffice scenarios could all be implemented with AJAX. However, to do that you would need to continuously poll the server. This can be wasteful. Instead with the client just waiting for notification events from the server, bandwidth and resources on both client and server are reduced.

SignalR, in effect, gets closer to more traditional client/server programming paradigms.

What does this have to do with Ext.NET?

There are a number of useful sample applications that Microsoft have provided to demonstrate SignalR, including a chat application, a stock ticker, and more.

Their examples are based on jQuery + HTML.

But this blog post demonstrates very briefly that the same techniques can just as easily be used with Ext.NET, so that your Ext.NET applications can potentially benefit from SignalR.

Note, we won't look at how the StockTicker hub was created in the original GitHub project that I forked. For an overview of hubs and other aspects of implementing SignalR do look at that short video mentioned above!

Converting the SignalR StockTicker Demo into an Ext.NET friendly one

There's a project at GitHub demonstrating a simple fake stock ticker application using SignalR.

When you run the sample page, you get this:

The above screenshot shows a simple table on a page. When run, as updated stock values (fake ones!) are available from the server, they automatically update and various rows highlight momentarily in green or red depending on whether the price went up or down. The buttons above the table also show the market is already open (hence it is now disabled).

If you now open the same page on another browser it will start to show the same data automatically. If you close the market, all browsers will get the close event simultaneously. It is a nice way to see SignalR in action.

So I thought this would be a nice example to convert into an Ext.NET GridPanel instead. I forked the sample project on GitHub so you can get the full source code here:
https://github.com/anupshah/ExtNET-SignalR-StockTicker.

The end result is the same data but showing up on an Ext.NET Grid Panel:

In my fork I simply included Ext.NET 2 from NuGet. Here is the overall approach to the code changes I then made:

1. Created a custom Ext.NET component that inherits the GridPanel (both .NET side and JavaScript side)
2. Initiated the SignalR connection from the custom GridPanel's JavaScript class
3. Updated the GridPanel's Store as and when data from the SignalR connection comes in
4. Highlighted updated rows using a fade technique for a similar effect as the original example

Note, I didn't re-implement the ticker below the table that scrolls across, but the same ideas can be applied there if you wish to try it. In addition, I did not need to make any changes to their StockTicker hub class; I just reused it (and therefore the client proxy that it generates without any need for alterations for it to work with Ext.NET).

Custom Ext.NET GridComponent (C#)

using Ext.Net;

namespace Microsoft.AspNet.SignalR.StockTicker.Ext.NETSignalR.StockTicker
{
    public class SignalRGridPanel : GridPanel
    {
        public override string XType
        {
            get { return "signalrgridpanel"; }
        }

        public override string InstanceOf
        {
            get { return "ExtNetSignalRDemo.SignalRGridPanel"; }
        }

        protected override void OnInit(EventArgs e)
        {
            BuildTopBar();
            BuildStore();
            BuildColumns();
            BuildView();

            base.OnInit(e);
        }

        // All the private Build* methods omitted for brevity
        // Download the code from GitHub to see the details
    }
}

This subclass of GridPanel sets the XType and InstanceOf so that we can put our custom JavaScript inside a subclass of GridPanel on the client side. It then builds the grid here inside the component to demonstrate this being a fully self-contained and therefore much more reusable component. See the full source at GitHub to see how it is all set.

For the JavaScript definition of the custom GridPanel, here is an outline:

Ext.define('ExtNetSignalRDemo.SignalRGridPanel', {
    extend : 'Ext.grid.Panel',
    alias  : 'widget.signalrgridpanel',

    // the SignalR generated client-side hub proxy
    ticker : $.connection.stockTicker,

    // more configuration options here
    
    initComponent: function (config) {
        this.callParent(config);
        
        this.on('afterrender', this.onAfterRender, null, { single: true });
    },
    
    // ...
    
    onAfterRender: function () {
        // initialize the SignalR connection
    }
});

So, simply put, after the GridPanel is rendered, we will initialize the SignalR connection to the server and deal with the various operations that are possible. Notice there is a property called ticker which holds a reference to the client-side hub proxy for the stockTicker created by the SignalR components. Here is onAfterRender:

onAfterRender: function () {
    var gridInstance = this,
        store = gridInstance.getStore(),
        ticker = gridInstance.ticker;

    function init() {
        return ticker.server.getAllStocks().done(function (stocks) {
            $.each(stocks, function () {
                store.load(stocks);
            });
        });
    }

    // Client-side hub methods that the server will call
    $.extend(ticker.client, {
        updateStockPrice: function (stock) {
            var rowIndexOfStockItem = store.indexOfId(stock.Symbol),
                highlightRow = rowIndexOfStockItem,
                row, el, bgColor;

            if (rowIndexOfStockItem === -1) {
                store.loadData([stock], true);
                highlightRow = store.getCount();
            } else {
                store.getAt(rowIndexOfStockItem).set(stock);
            }

            row = gridInstance.getView().getNode(highlightRow);
            el = Ext.get(row);
            bgColor = stock.Change >= 0 ? gridInstance.upBgColor : gridInstance.downBgColor;

            if (el != null) {
                el.highlight(bgColor, { attr: 'backgroundColor', duration: 750 });
            }
        },

        marketOpened: function () {
            gridInstance.down("#btnOpen").setDisabled(true);
            gridInstance.down("#btnClose").setDisabled(false);
            gridInstance.down("#btnReset").setDisabled(true);
        },

        marketClosed: function () {
            gridInstance.down("#btnOpen").setDisabled(false);
            gridInstance.down("#btnClose").setDisabled(true);
            gridInstance.down("#btnReset").setDisabled(false);
        },

        marketReset: function () {
            return init();
        }
    });

    // Start the connection
    $.connection.hub.start()
        .pipe(init)
        .pipe(function () {
            return ticker.server.getMarketState();
        })
        .done(function (state) {
            if (state === 'Open') {
                ticker.client.marketOpened();
            } else {
                ticker.client.marketClosed();
            }
        });
}

The above code is very similar to the JavaScript code for their original example, just refactored to be part of the Ext.NET custom GridPanel component.

In the above we see the ticker client extended with functions that will handle the messages sent by the server, such as updateStockPrice, marketOpened, marketClosed and marketReset.

Once those are set up, we simply start the hub connection.

In updateStockPrice we simply load the new stock data into the Store - we either add a new row if the symbol doesn't exist in the grid already, or we update the row that contains the symbol with the new data. We then get the row element and using the Ext JS highlight method we flash the green or red indicator depending on the stock price.

To put it all together, we simply use the custom GridPanel on a page, which can be as simple as follows:

<ext:SignalRGridPanel ID="GridPanel1" runat="server" />

Remaining issues

It is worth being aware of some of the limitations or implications of using SignalR right now, as it is still early days for it. For example, consider the following:

Scaling out

Perhaps one of the main limiting factors about SignalR at the moment is that there is a single point of failure. Redundancy or scaling your servers with hardware is currently not supported. On the plus side, they are working on it (just in pre-alpha stage as of writing). See for example, https://github.com/SignalR/SignalR/wiki/Azure-service-bus.

Still, that should not stop you trying it out and getting familiar with it.

Depends on jQuery

A point to note, perhaps more minor, is that the client side implementation of SignalR has been done with jQuery. While jQuery is an awesome library itself and pairs nicely with Ext.NET (Ext JS), perhaps Microsoft could have provided its SignalR implementation independent of any other JavaScript framework at its core, but then provide mechanisms such as plugins to work with popular frameworks such as jQuery and others.

That being said, the need to include an additional library such as jQuery within an Ext.NET application could perhaps be worth it given the benefits that come along with it.

To take full advantage of WebSockets, you need IIS 8

In terms of pre-requisites be aware that while many modern browsers support HTML5 Web Sockets, only IIS8 on the server does (i.e. Windows 8/Windows Server 2012).

That being said, Windows Server 2008 (IIS 7.5) still works, but WebSockets will not be used; instead Server Sent Events will be used instead as the fallback. (I dev'd the Ext.NET stock ticker demo on Windows Server 2008 R2, for example.)

Links for further information

The following links were used in the above article, but are summarized here as useful starting points

• Scott Hanselman's short overview video of SignalR. Highly recommended.
• Microsoft's official SignalR page with videos and tutorials
• SignalR GitHub project where you can access all the code
• The original stock ticker example also on GitHub
• My forked stock ticker example with Ext.NET support as used in this article, also on GitHub

Understanding the differences between Ext.NET event types and when to choose a certain type is an important concept to learn. Your project requirements will help determine which event type to use given a particular scenario.

In this series of four articles on the subject we will discuss client side and server side events, how they are triggered, how to handle each, and potential use cases for each.

This first post will investigate usage of client side Listeners.

All Ext.NET components, such as Panel, Window and Button, enable four types of events handlers:

Listeners

Listeners are event handlers for client side triggered events. The Listener event handler will execute JavaScript code you provided after the action is triggered, such as a clicking a Button.

Using Visual Studio Intellisense is a great way to discover which events are available on the component. Each component inherits events from its super class and will typically extend with more events unique to that component.

All classes in Ext.NET inheriting from the Observable class trigger events. All client side events are defined inside the <Listeners> property.

If a component fires a Listener event (client side), in order to handle that event (run custom logic) you must first subscribe to the event by adding a JavaScript function. Subscribing to an event can be accomplished by the following ways:

Listeners Configuration

The Listeners property is configured on the component in markup or code-behind. To handle the 'click' event of a Button you configure the Click Listener by setting the Handler property with some JavaScript. The JavaScript within the Handler will be executed in the browser when the Button is clicked.

// C#
Button1.Listeners.Click.Handler = "alert('Hello World');";


// ASPX
<ext:Button runat="server" Text="Submit">
    <Listeners>
        <Click Handler="alert('Hello World');" />
    </Listeners>
</ext:Button>


// Razor (ASP.NET MVC)
@(Html.X().Button()
    .Listeners(ev => 
        ev.Click.Handler = "alert('Hello World');"
    )
)

Another important Listener property is Fn.

The Fn property is set with a JavaScript function name or inline function. Here are examples of valid Fn values:

// A JavaScript function is defined
// somewhere on the page. 
var doSomething = function () {
    alert('Hello World');
};

// Option #1
// .Fn property is set with the JavaScript function name
Fn="doSomething"; 

// Option #2
// An inline JavaScript function definition
Fn="function () { alert('Hello World'); }"

// Option #2b
// Same function as above, but with named arguments
Fn="function (item, e) { alert('Hello World'); }"

The Handler property is set with only the body of the JavaScript function. This code is automatically wrapped in a proper JavaScript function template.

For example, if you set:

<ext:Button runat="server" Text="Submit">
    <Listeners>
        <Click Handler="alert('Hello World');" />
    </Listeners>
</ext:Button>

Ext.NET will convert the above to the following when rendered to the page.

Ext.create("Ext.button.Button", {
    text: "Submit",
    listeners: {
        click: function (item, e) {
            alert('Hello World');
        }
    }
});

Each event has its own list of arguments. You can find arguments in the Sencha Ext JS client side API documentation or reviewing the Ext.NET source code of the Listeners class (all listeners classes are located in the <Ext.Net>\Events\Listeners folder).

There's also a handy sample in the Examples Explorer for listing all Listeners related to a component and showing their event signatures, see Listeners Arguments Reflector.

The Button Click Listener has two arguments: item and e. The item will be an instance of the Button component. The e is an instance of the event object.

The Reconfigure listener of the GridPanel is called with the following arguments: item, store and columns.

If you set the Fn property, you must add the required function arguments manually. The arguments can be given different names, but the order is important. For example, the following two functions use different function argument names (item vs cmp), but each will work exactly the same.

var doSomething = function (item, e) {
    alert(item.id); // alerts 'Button1'
};

var doSomethingElse = function (cmp, ev) {
    alert(cmp.id); // alerts 'Button2'
};

<ext:Button ID="Button1" runat="server">
    <Listeners>
        <Click Fn="doSomething" />
    </Listeners>
</ext:Button>

<ext:Button ID="Button2" runat="server">
    <Listeners>
        <Click Fn="doSomethingElse" />
    </Listeners>
</ext:Button>

Every Listener includes the following properties:

Using .On and .AddListener server side Methods

These methods should be used to add a Listener to a component during a DirectEvent, after the component has been rendered in the browser.

The methods allow adding of client side handlers after a component has been created and are typically used during a DirectEvent. Unlike using the <Listeners>, the On Method allows to add several handlers for one event (one handler for each On call).

Button1.On("click", new JFunction("alert('The button is clicked');", "button", "e"));

Arguments can be omitted if you don't use it in the handler.
Please note that if the handler returns false then other handlers will not be executed (returning false cancels the event handling), DirectEvent handlers for this event will not be executed also.

Using .on or .addListener client side methods

If you need to add an event handler using client side JavaScript, you can call the on function on the client side instance of a component.

Button1.on(
    "click", 
    function (button, e) {
        alert('The button is clicked');
    }
);

Additional tips and tutorials can be found in the client side API documentation.

You can also trigger an event to fire manually in JavaScript by calling the fireEvent JavaScript function. You must pass the name of the event as the first argument. The following sample demonstrates calling the fireEvent function:

// this will cause all 'click' Listeners 
// on the Button to fire.
App.Button1.fireEvent('click', App.Button1); 

Please note that DirectEvents can also be initiated by calling the fireEvent function (DirectEvents are executed after Listeners, but the sequence can change by using Delay property of the Listener).

A DirectEvent can be canceled if any Listener (without a Delay set) returns false. Please see fireEvent client side documentation.

Summary

In this part of the article we considered Listeners - client side handlers of client side events. Listeners allow us to handle events in the client browser with instant feedback upon user actions and without server interaction.

DirectEvents will be explored in the next tutorial.

After over more than year and a half of development, the official Ext.NET 2 release is now available for download.

Ext.NET 2 integrates the Sencha ExtJS 4 library making it even easier for ASP.NET developers, both Web Forms and MVC (more on that below), to build the next generation of HTML5 enabled web applications.

With access to 100+ Controls, Ext.NET developers now have the largest integrated suite of ASP.NET Controls and HTML5 based Charts available today.

Thousands of new features and improvements have been added to Ext.NET 2, and it's going to take more than a few blog posts to work through the details. To help you get the most out of Ext.NET, we're starting a regular blog series to communicate new features, functionality, and developer tips.

Quick Installation

The quickest and easiest way to install Ext.NET 2 is using the Visual Studio Package Manager and NuGet. One simple call to Install-Package Ext.NET using NuGet and everything you need will be automatically installed and configured within seconds.

All download options are available on the new Ext.NET download page.

Public release versions of Ext.NET Pro, including the Examples Explorer, and the new MVC Examples Explorer are available with full source code from GitHub. Be sure to keep up to date by following the Ext.NET Pro project.

ASP.NET MVC Support

With Ext.NET 2 we are thrilled to announce full support for ASP.NET MVC, including full support for the Razor View Engine.

Everything in Ext.NET now "just works" in both Web Forms and MVC projects. All Ext.NET Components, all properties, all methods and all client/server-side events are fully supported.

Please note, this is not some subset of additional widgets, or an under-developed side library. With Ext.NET you choose your platform and know you need not make sacrifices for missing functionality. The versatility of language options allow Ext.NET developers to choose an architecture best suited for their project and team.

The following sample demonstrates creating the same basic Window Component using three different language options: ASP.NET MVC Razor, ASP.NET Web Forms markup, and C# code-behind.

Example (ASP.NET MVC Razor)

@(Html.X().Window()
    .Title("Hello World")
    .Icon(Icon.Application)
    .Height(215)
    .Width(350)
    .BodyPadding(5)
    .Html("An Ext.NET Window")
)

Example (ASP.NET Web Forms)

<ext:Window 
    runat="server"
    Title="Hello World"
    Icon="Application"
    Height="215"
    Width="350"
    BodyPadding="5"
    Html="An Ext.NET Window"
    />

Example (C#)

var win = new Window { 
    Title = "Hello World",
    Icon = Icon.Application,
    Height = 215,
    Width = 350,
    BodyPadding = 5,
    Html = "An Ext.NET Window"
};

Charting

New in Ext.NET 2 (ExtJS 4) is a plugin free (no Flash!) Charting package. Charting is included in the main Ext.NET library and not a separate package. Install Ext.NET and you also instantly have a fully integrated powerful Charting package right within the library.

And... just like all other Components in Ext.NET, the Charting library is fully supported in ASP.NET MVC Razor View Engine.

@(Html.X().Chart()
    .Height(350)
    .Width(350)
    .Shadow(true)
    .Series(Html.X().PieSeries()
        .Highlight(true)
        .HighlightSegmentMargin(20)
        .Label(new SeriesLabel
        {
            Field = new string[] { "Name" },
            Display = SeriesLabelDisplay.Rotate
        })
    ))

New Ext.NET Book

In case you missed the recent blog post announcing the new Ext.NET book, there's a new Ext.NET book available from Packt.

It's 400+ pages, and it's awesome!

Authored by long time Ext.NET community member and friend of Ext.NET Anup Shah (onenaught.com), the book provides a comprehensive look into all the major components, features and functionality of Ext.NET 2.

If you're an active Ext.NET developer, Chapter 9 on "Extending Ext.NET Controls – Custom Controls and Plugins" is worth the price of the book alone.

Get the book for FREE!

As a special reward for all new Ext.NET Pro bundle purchasers, Ext.NET is including a FREE copy of the eBook, or “Print Book + eBook”, depending on the quantity of licenses purchased. More information and pricing available in the Store.

Community Forums

We're seeing activity within the Community Forums increase daily and regularly hitting 125+ new posts per day. The post count is closing in quickly on 100,000 and recently passed 22,000 discussions.

Special Thanks

We want to thank all community members for their feedback during our earlier releases. Thanks! Your contributions, feedback and bug reporting were fantastic and really helped to refine the Ext.NET 2 release.

We're super excited about this release. It's been a lot of work, and we're interested in your feedback. Please feel free to post questions or comments in the Ext.NET Community Forums and let us know what you think.

Follow Ext.NET on Twitter using @extnet or tag us using #extnet.

A guide to building Rich Internet Applications with Ext.NET using ASP.NET Web Forms and ASP.NET MVC

The technical editors were the entire Ext.NET team (@Daniil, @Vladimir & @geoffrey.mcgill) so it could not get any better! As a result, this book will have many tips and techniques not yet mentioned elsewhere.

As far as we are aware, this is the first book on Ext.NET, so it was an honour to be asked to write it.

About the book

The book provides an overview of Ext.NET 2 covering major areas and features of Ext.NET and also empowers the reader to know how to find out more details when needed.

If you are an ASP.NET developer looking to incorporate Ext.NET and Ext JS into your application then this book is for you.

You will find tips and code samples in addition to discussions about features not discussed elsewhere.

With over 400 pages, this book will help you:

• Understand how Ext.NET and Ext JS fit together to help create applications with seamless server side integration
• Learn how to organize controls and layouts to create highly interactive UIs with the richness of desktop-like applications
• Understand the different AJAX options available to interact with the server and choose the techniques that suit your needs
• Know the various options to represent and model data, locally or remotely, and reuse them where needed
• Learn how to build sophisticated grids, trees, and other AJAX-based components that interact with the server efficiently
• Gain confidence in extending components and creating plugins for reusability and maintainability
• Create user-friendly forms with rich and custom client and server side validation
• Learn how to troubleshoot your applications

Chapter overviews

Here's a summary of what each chapter contains:

Chapter 1, Getting Started with Ext.NET, provides an overview of what Ext.NET is and how it is related to Ext JS and ASP.NET. In addition, this chapter covers how you can obtain and set up your development environment ready for Ext.NET development.

Chapter 2, Ext.NET Controls Overview, introduces various types of controls available in Ext.NET. Using the Button control, we introduce many concepts common throughout the Ext.NET control suite. We also look at how client-side and server-side events can be set up. This chapter also introduces other more common components including Panels, Toolbars, Menus, Windows, and Tooltips. We also get a glimpse of some of the complex UIs that are possible by reusing these components.

Chapter 3, Layout with Ext.NET, covers the numerous layout options available in Ext.NET to help you organize your web applications. Topics covered include the Viewport, and specific layouts such as Border, Accordion, Fit, HBox, VBox, and more.

Chapter 4, AJAX with Ext.NET, looks at the powerful AJAX options Ext.NET supports. We cover the powerful DirectEvents and DirectMethods features, as well as AJAX options specific to certain controls. This is a powerful chapter that lays the foundation for slick and usable applications that are responsive to user interactions.

Chapter 5, Working with Data, looks at the powerful data handling techniques available in Ext.NET. We cover XTemplates, which allows you to define HTML templates to bind data to, and we explain the Stores, Models, and Proxies architecture that allows for powerful data-binding reuse across many Ext.NET components. The ComboBox and DataView are introduced as examples of controls that reuse this architecture.

Chapter 6, Introducing GridPanels, covers the popular and highly sophisticated GridPanel control. It is another control that reuses the Stores, Models, and Proxies architecture, but is given its own chapter. We look at various features of the GridPanel such as paging, filtering, sorting, grouping, column summaries, row expanding, and selection models. We also look at how grid editing can be enabled, including in-line grid editing at the row or cell level. As large as this chapter is, there are many other GridPanel capabilities that we have not been able to fit into this book, so many links to further examples and resources are also provided.

Chapter 7, Forms and Validation, looks at the numerous form controls available in Ext. NET, how to lay them out, and how to enable client and remote validation. We also look at how custom validators can be created. Lastly, we also see how Ext.NET's data-binding capabilities can also be reused with forms.

Chapter 8, Trees and Tabs with Ext.NET, introduces the popular TreePanel and TabPanel controls. Due to limited space in the book, we cannot cover all the sophisticated possibilities that these controls offer, but we do provide an overview of how tree nodes can be loaded asynchronously and how to reuse the Store, Models, and Proxies architecture to bind data to trees. We also look at various ways TabPanels can be configured, including how to load content on-demand using various AJAX techniques supported by Ext.NET.

Chapter 9, Extending Ext.NET Controls – Custom Controls and Plugins, is perhaps the most powerful chapter in this book. It shows you how to extend Ext.NET controls in a variety of ways to support both ASP.NET Web Forms and ASP.NET MVC Razor templates, enabling you to create highly reusable components. Most of the chapter looks at how controls can be extended, but we also look at how you can use the available plugin mechanisms to reuse functionality across different types of components.

Chapter 10, Troubleshooting and Debugging, looks at how to debug your Ext.NET applications. In particular, we look at how to enable debug versions of Ext.NET and Ext JS JavaScript and what tools to use for cross-browser troubleshooting. This chapter also provides important tips on how to request help in the Ext.NET forums in a way that will increase your chances of receiving a quick response.

My personal favorite is chapter 9. Not only did I learn a lot myself when putting it together, I think it is also one of the most important; I wish I knew this about 3 or 4 years ago as it would have helped make my own apps even more reusable. For me it is worth getting the book for this chapter alone!

Get the book for FREE!

As a special reward for all new Ext.NET Pro bundle purchasers, Ext.NET is including a FREE copy of the eBook, or “Print Book + eBook”, depending on the quantity of licenses purchased. More information and pricing available in the Store.

About the author

I've been a web developer since 1997. In 2007 or 2008 I shifted focus from public-facing sites to web-based lines of business applications. While the techologies were the same, the emphasis was different. More JavaScript, AJAX and componentisation was needed as we were creating a shrink-wrapped product.

Frustrated with the toolset I was using at the time, I searched for components that integrated with ASP.NET but also gave me full control on the client side when needed. I came across an early version of Ext.NET. It was great because it had just the right layout components I needed (the BorderLayout was what drew me in!) and it integrated with the powerful client side JavaScript framework, Ext JS. The components were far richer than YUI or jQuery UI, and very quickly we started to incorporate the framework into our product.

I've been immensely productive using Ext.NET. The powerful AJAX framework and flexible component architecture has helped us drive our product forward even more making it both responsive and highly usable.

So when Packt Publishing approached me to write a book on Ext.NET it was hard to resist. I hope the book helps provide some useful insights and guidance to creating Ext.NET-based web applications.

You can find me on the Ext.NET Forums (user name "anup") or on my web site: http://www.onenaught.com

Installation packages available for download or NuGet.

Ext.NET is a dramatic step forward for rich dynamic web application system development in ASP.NET.

Install with NuGet

We're now releasing Ext.NET Pro as a NuGet Package enabling quick installation into your ASP.NET web application within seconds.

Simply search for "Ext.NET" with the NuGet package manager and NuGet automatically handles installation of the most recent Ext.NET Assemblies (.dll) and merging of correct Web.config settings.

Given the overwhelming ease and convenience of using NuGet, we're contemplating moving installation/download of Ext.NET Pro exclusively to NuGet. Your feedback is appreciated.

Updated Examples Explorer

The Examples Explorer has been updated with several new samples and refinements including a "Recent SVN Commits" browser. The public SVN Commits browser allows for quick previewing of all recent source code changes and their associated commit comments.

Continuous Development

Continual development of Ext.NET ensures new features are being introduced into the framework weekly. The next major release of Ext.NET (v2) is well underway and will include integration of Sencha ExtJS 4.

Full support for ASP.NET MVC (all View Engines, including Razor) will be built directly into the Ext.NET Assembly.

A private "Developer Preview" of Ext.NET v2 will be available soon to all Ext.NET Pro license holders with a valid Premium Support Subscription. Release of a public (Ext.NET Community License) preview will happen shortly thereafter.

NEW Components

With the v1.0 release, we've integrated the latest Sencha Ext JS release, added 40 new controls, and have now broken the 100+ control mark (plus dozens of plugins). Never before have ASP.NET developers had access to such a powerful and cohesive suite of web controls for building rich ajax enabled web applications.

Some notable new Components include:

1. Calendar: Wicked awesome new Calendar with Day, Week and Month views.
2. ButtonGroup: Create Button groupings and layouts similar to Microsoft Office toolbars.
3. ListView: A fast and light-weight implementation of a Grid.
4. MultiCombo: ComboBox with multi selection ability.
5. HBox and VBox Layouts for flexible control of horizontal and vertical item layouts.

NEW Community Forums

Looking for some technical support? Want to connect with other Ext.NET developers? Post some cool code? Please be sure to check out the recently updated Community Forums.

With an active community of developers, a dedicated professional support team, and 40,000+ posts, this valuable resource of information is always available to help answer questions.

NEW Examples Explorer

The Version 1.0 Examples Explorer has been updated with over 100 new samples and now contains over 300 live working demos. We obviously have a lot to talk about here in future blog posts, but a few new notable samples include:

1. Component Overview Complete list of Ext.NET Components packed onto one page with theme switching.
2. Dynamic Component creation with XRender All Ext.NET and/or ASP.NET controls can now be added dynamically during ajax requests.
3. ASP.NET MVC Demo
4. Simple Tasks Demo
5. GridPanel with RowEditor Plugin

NEW Pricing

We've gone back through the Ext.NET Pro license pricing and sharpened our pencils. Along with the new release we're introducing new pricing and a simplified structure for Ext.NET Pro Licenses and Premium Support Subscriptions.

Options are now bundled in simplified single (1), five (5) or twenty (20) license packs.

On Sale Now SALE

For a limited time (ending December 10, 2010), all Ext.NET Pro + Support Bundles are on SALE. If you’ve been thinking about purchasing a Pro License, now is your chance to jump in and support Ext.NET with even better pricing.

Premium Support For All

Premium Support Subscriptions are now available for both closed-source Pro License and open-source Community License members. In the past we've only been able to offer Premium Support Subscriptions to Pro License holders, but now Premium Support is opened up to both Pro and open-source Community developers. Included with a Premium Support Subscription is priorty technical support, direct access to the real-time project source code, and early access to future releases.

Premium Support Subscriptions can be purchased in the Ext.NET Store.

Free Upgrades For Pro + Premium Support Bundle Purchase

Starting today, when an Ext.NET Pro License and Premium Support subscription is purchased together, a free upgrade to the next major release is included. This is in addition to the already included free minor version upgrades. For example, upgrading from 1.0 to 1.1 to 1.x are all free, and now upgrading to a future 2.0 release would be included during your twelve month subscription.

Thanks!

We would love to hear from you and feedback is always appreciated. Please feel free to join in the conversations happening within the forums and let us know what you think.

Follow our new Twitter handle @extnet or tag us using #extnet.

Finally, here's a big high-five to the Ext.NET developer community and all those who sent their feedback, support and encouragement. Thanks for hanging in there.