Lesson 1. Getting to Know Ext.NET

A brief introduction to Ext.NET 2.0 beta

Dear reader, let's talk about such a nice and useful ASP.NET Framework as Ext.NET. It is based on the famous JS Framework - Sencha Ext JS. It greatly facilitates the life of many ASP.NET developers, eliminating the need to learn Ext JS, and then screw it to your ASP.NET application. Ext.NET provides convenient and simple controls, but not only. There are many other useful things in it, but more on that later.

The current version of Ext.NET 2.0 beta provides almost all the features of Ext JS 4.1.0 and includes some very nice plugins. If you are thinking of using Ext.NET in your real project, I would recommend that you turn to the version of Ext.NET 1.3, it is more stable and almost not satisfactory, functionally certainly weaker, but not fundamentally. Much of what is written here applies to it, although there is no compatibility between them. And if you still decided to use Ext.NET 2.0 beta, then remember that marking beta implies that it can still change several times and is unstable in some places. But still it is the version of Ext.NET 2.0 beta, this is the future and it is necessary to study it. In it, the developers added a lot of new things, a full list of changes you can see here .

Why do I need it?

First, let's take a look at the most interesting examples that the authors provide, so that you understand how good Ext.NET is. Go to the examples.ext.net page , you will see a large tree of examples.
Choose Desktop -> Introduction -> Overview. You will see a full desktop, like what is in MS Windows. Windows, the Start button, graphics, and more are available to you. Isn’t it an interesting opportunity?



Next, pay attention to Layout -> BorderLayout -> Complex in CodeBehind. All problems with displaying elements in this window are covered by Ext.NET. You can almost forget about layout and problems with cross-browser compatibility, they are already solved here.



I think on this I will end with examples, because then you will figure it out yourself. I want you to pay special attention to the sections Chart, DataView, GridPanel, Layout, Miscellaneous.
If you think why you need Ext.NET when there is jQuery UI, Telerik Controls and many other sets of controls that provide similar functionality. And you will be right, Ext.NET has its pros and cons. Consider the pros:

1. With Ext.NET, you get ready-made ASP.NET and ASP.NET MVC controls that you don’t need to learn to work with these platforms. Controls, each of which is a “thing in itself” and has rich functionality. Total controls about 100! And you can expand them, write a plugin or create your own control. In general, there is a whole world;
2. The whole process of rendering Ext.NET takes care of such a problem as markup, you can forget. You just need to indicate what and where to display, through a concept such as Layout and Container;
3. Ready-made topics that you can expand or create a new one;
4. Easy and simple way to respond to events through DirectEvent and DirectMethod;
5. Huge ability to display various data arrays;
6. Ready HTML5 graphics based on Raphael;
7. The Ext.NET community is rather lively and rather big, you can always ask a question on the forum and calmly wait for an answer.

But of course Ext.NET has its drawbacks.

1. It is applicable mainly for corporate or closed projects, in the field of small Internet projects, I think all its power will not be useful. There are at least three reasons for this.
2. • Scripts and resources weigh quite a lot for the Internet, about 500 Kb will need to be downloaded in order for something to be displayed on the user's screen. Often, the user on the slow channel spits and goes further, but there are fewer and fewer of them;
   • It is quite demanding on client machines. As a solution, we usually installed Chrome or FireFox, but they "ate" a lot of memory;
   • It works poorly with mobile browsers, including because it lacks the power of mobile processors. But to solve this problem, Sencha has another Sencha Touch framework, which is similar to ExtJS as a younger brother. But I have not heard plans for implementing Sencha Touch on the ASP.NET platform. Although along with ASP.NET MVC, this is pretty easy.
   
   
   
3. In order to fully work with Ext.NET, you will have to overcome a rather large but interesting “threshold” of knowledge, and most of the time you will have to learn Ext JS, which is quite difficult. In defense, I can say that most of the functionality of Ext.NET does not require much knowledge, it is enough to understand and delve into the examples that the authors provide.

The main place to find information is www.ext.net , where you can find a forum and examples. Outside of these places, you can ask questions on stackoverflow.com and the Russian-speaking group groups.google.com/group/extnet . I think you will always be answered.

Writing Hello World!

Well, let's begin.
Before you start you will need:

1. Visual Studio 2010 of any edition, I also recommend installing ServicePack 1 on it.
2. Install the perfect package manager for Visual Studio NuGet. You can find out how to do this here.

To get started, you need to create a new ASP.NET project and add the Ext.NET NuGet package to it. To do this, open the Package Manager Console. And enter into it:

Install-Package Ext.NET -Pre

All the necessary libraries and the new Ext.NET.Default.aspx web page will be automatically added to your project. For the convenience of adding controls to the page layout, add a few lines to the Web.config of your application. This will save you the need to write on every page.

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %> 

, which is needed to register Ext.NET controls on the page. Open Web.config, find the
configuration -> system.web section and add the following lines to it:

Make the Ext.NET.Default.aspx page the default page.



Now that all the preparations are complete, we can launch our application by pressing F5.

We will see a carefully prepared, easy example from the authors, which displays in the right pop-up window what we write to him. The window that you see in front of you can be dragged around the screen, closed (though you won’t be able to open it later), it has a shadow, a title, and you can even resize it, and the size of the text field will also change.



Let's see the source code of our program. We see four controls:

1. This is the ResourceManager, its presence is mandatory on all pages that use Ext.NET, its capabilities are very wide, but they will be discussed in the next lessons;
2. Window - this is the window that you have already seen. He has a wide selection of possible settings, some of which are used in our example. Also, this control is a container for other controls, in our particular case for TextField. And also our window may contain many buttons;
3. TextArea - the text field that we see inside the window, physically this is an old and familiar to many HTML textarea field . And when you click on the Submit button, its value is transmitted to the server where it goes through processing;
4. Button is a button that, when clicked, accesses the server and, in particular, to the “Button1_Click” method, which is assigned to the click event handler through the “OnDirectClick” attribute (for more details, we will look at DirectEvent and DirectMethod in a separate lesson). The method, in turn, displays the message in the lower right corner using the following line: X.Msg.Notify ("Message", this.TextField1.Text) .Show () ;. Object X is auxiliary and simplifies certain actions. In our particular case, we can immediately get a notification window and display it.

With just a couple of movements we can change the theme of our page. By default, three themes are supplied: blue (Default), gray (Gray) and accessible (Access) - for visually impaired people. They change in Web.config in the configuration -> extnet section through the theme attribute . Let's take a look at the topic of Slate .



Other parameters that you can configure for Ext.NET through Web.config can be found in the Ext.NET.README.txt file , which is located in the App_Readme folder .



You can configure most of them on the page itself through the ResourceManager, but they will only apply to this page. For example, you can change the theme on the page like this:

Consider the most commonly used parameters that you may need or will just be interesting:

• scriptAdapter - has the following meanings: "Ext", "jQuery", "Prototype", "YUI". Ext.NET on the client uses Ext JS, which by default is based on the so-called Ext JS Core. It provides basic capabilities for manipulating the DOM model, animation and more, a kind of jQuery from Ext JS. But Ext JS can use other frameworks and he calls them adapters. You can use jQuery, Prototype, YUI. Why is this needed? Well then, let's say you already use jQuery in your project, which is not uncommon for ASP.NET and instead of loading ExtJs Core scripts, you specify jQuery and you save on page loading;
• disableViewState - accepts either "true" or "false". Allows you to disable ViewState. Why it is needed and when it is not needed, you can read habrahabr.ru/blogs/net/119537 and www.aspnet.com.ua/Blog/blog-155.aspx in these articles . In turn, I note that in my practice, I always try to avoid using ViewState;
• scriptMode - has two meanings: "Release", "Debug". Used to indicate loading minified or readable scripts for debugging. You can see the difference in size using FireBug for FireFox. By the way, I highly recommend this plugin if you do not already have it. With it you can catch a large number of errors.

Well, the beginning is laid, for now you can see what the
authors have written about this in Ext.NET.Default.aspx , I also recommend looking at examples.ext.net examples and an almost complete example of all Ext.NET components examples.ext.net/# / Getting_Started / Introduction / Component_Overview .

The following lessons will show you how to create a blank for a typical application like Outlook. In the course of working on it, we will understand most of the nuances of Ext.NET work.

Enjoy reading!