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 so 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 Ext.NET version 1.3, it is more stable and almost does not cause complaints, functionally of course weaker, but not essential. Much of what is written here applies to it, although there is no compatibility between them. And if you still decide to use Ext.NET 2.0 beta, then remember that the beta mark just implies that it can still change several times and is unstable in some places. But nevertheless, it is the version of Ext.NET 2.0 beta that is the future and it is necessary to study it. In it, the developers have added a lot of new, the full list of changes you can see here .

Why do I need it?

Let's first look at the most interesting examples provided by the authors, so that you understand how good Ext.NET is. Go to the examples.ext.net page, you will see a large examples tree.
Select Desktop -> Introduction -> Overview. Before you will be a full desktop, like the one that is in MS Windows. Windows, Start button, graphics and more are available to you. Isn't it an interesting opportunity?


')
Next, pay attention to Layout -> BorderLayout -> Complex in CodeBehind. Ext.NET takes all the problems with the display of elements in this window. You can almost forget about the layout and problems with cross-browser compatibility, they are already solved here.



I think on this I will end up with examples, since then you yourself will understand. I want you to pay particular attention to the Chart, DataView, GridPanel, Layout, Miscellaneous sections.
If you think, why do 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, at Ext.NET, there are also pluses and minuses. 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 a rich functionality. Total controls about 100! And you can also expand them, write a plugin or create your own control. In general, there is a whole world of its own;
2. The whole process of rendering. Ext.NET takes care of such a problem as markup, you can forget. You just need to specify what and where to display, by using such a thing as Layout and Container;
3. Ready-made themes that you can expand or create a new one;
4. Easy and simple way to respond to events via DirectEvent and DirectMethod;
5. Huge possibilities for displaying various data arrays;
6. Ready HTML5 graphics based on Raphael;
7. The Ext.NET community is quite lively and rather big, you can always ask a question on the forum and quietly expect 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 that 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 appear on the user's screen. Often the user will spit on a slow channel and move on, but they are fewer and fewer;
   • He is quite picky about client machines. As a solution, we usually put Chrome or FireFox, but they “ate” a lot of memory;
   • It does not work well with mobile browsers, including because there is not enough power of mobile processors. But to solve this problem, Sencha has another Sencha Touch framework, which is similar to ExtJS, like a younger brother. But I haven’t yet heard any plans to implement Sencha Touch on ASP.NET. Although along with ASP.NET MVC, this is pretty easy to do.
   
   
   
3. In order to fully work with Ext.NET, you 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 rather difficult. In defense, I can say that most of the functionality of Ext.NET does not require much knowledge, you just need to understand and delve into the examples provided by the authors.

The main place to look for 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-language group groups.google.com/group/extnet . I think you will always be answered.

Writing Hello World!

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

1. Visual Studio 2010 of any edition, I also recommend putting ServicePack 1 on it.
2. Install an excellent package manager for Visual Studio NuGet. How to do this you can find out here.

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

Install-Package Ext.NET -Pre 

All necessary libraries and a new web page Ext.NET.Default.aspx will be automatically added to your project. For the convenience of adding controls to the page markup, add a few lines to your application's Web.config. This will save you from having 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 the web.config locate the section
configuration -> system.web and add the following lines to it:

 <pages> <controls> <add tagPrefix="ext" namespace="Ext.Net" assembly="Ext.Net"/> </controls> </pages> 

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



Now that all preparations have been completed, we can start our application by clicking on F5.

We will see carefully prepared in advance a simple 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 across the screen, closed (although you can open it, then it will not work), it has a shadow, a title and you can even change its size, and the size of the text field will change too.



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

1. This is a ResourceManager, its presence is mandatory on all pages that use Ext.NET, its capabilities are very broad, but they will be discussed in the following lessons;
2. Window - is the very window that you have already seen. He has a wide choice 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 can contain many buttons;
3. TextArea is a text field that we see inside the window, physically it is an old and familiar HTML text field textarea . And when you click on the Submit button, its value is transmitted to the server where it is being processed;
4. Button is a button that, when clicked, calls the server and, in particular, the method Button1_Click, which is assigned to the click event through the OnDirectClick attribute (In more detail, we will discuss DirectEvent and DirectMethod in a separate lesson). The method in turn displays the message in the lower right corner with the following line: X.Msg.Notify ("Message", this.TextField1.Text) .Show () ;. The X object is auxiliary and simplifies certain actions. In our particular case, we can immediately receive a notification window and display it.

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 Slate topic.



You can view other parameters that you can configure for Ext.NET via Web.config in the Ext.NET.README.txt file, which is located in the App_Readme folder.



Most of them can be configured 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:

 <ext:ResourceManager runat="server" Theme="Access" /> 

Consider the most frequently used parameters that you may need or just be interested in:

• scriptAdapter - has the following values: “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 DOM model manipulation, animation, and so on, a kind of jQuery from Ext JS. But Ext JS can use other frameworks and calls them adapters. You can use jQuery, Prototype, YUI. Why do you need it? Well, then let's say that 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 load;
• disableViewState - accepts either "true" or "false". Allows you to disable the viewstate. Why it is needed and when it is not needed, you can read in these articles habrahabr.ru/blogs/net/119537 and www.aspnet.com.ua/Blog/blog-155.aspx . In turn, I note that in my practice I always try to avoid using ViewState;
• scriptMode - has two meanings: “Release”, “Debug”. Used to specify to load minified or readable debugging scripts. The difference in size you can see using FireBug for FireFox. By the way, I highly recommend this plugin if you don’t have one yet. With it you can catch a large number of errors.

Well, okay, the beginning has been laid, for now you can see what has been written in Ext.NET.Default.aspx
the authors also recommend to see examples of examples.ext.net and an almost complete example of all the components of Ext.NET examples.ext.net/#/Getting_Started/Introduction/Component_Overview .

The following lessons will show 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!