EXT learning and application experience

1. understand HTML Dom, ext element, and component
To learn and apply the ext framework, you need to understand the differences among HTML Dom, ext element, and component.
EXT is a Web-based rich client framework built entirely based on the standard W3C technology. It uses HTML, CSS, Div, and other related technologies. Ext has developed a series of easy-to-use controls and components. You only need to use these components to develop a variety of UIS.
No matter how many configuration attributes, events, methods, and so on a component, the component is eventually converted to HTML displayed on the browser, and each HTML page has a hierarchical DOM tree model, all the content in the browser has a corresponding DOM object, and the page content is dynamically changed by operating the DOM object using the script language.
Dom alone is not enough. For example, to move a node on the page to another location, to add a shadow effect to a node, to hide or display a node, etc, we all need to use a few JavaScript statements. Therefore, ext creates an ext element based on the Dom, which can be used to wrap any dom. A series of convenient and convenient practical methods are added to the element object.
For end users, it is not enough to only have elements, such as displaying a table, a tree, and a pop-up window. Therefore, in addition to the element, ext also creates a series of client interface components component. When programming, we only need to use these components componet to display and interact with relevant data, component is a high-level abstraction. When rendering a render, each component uses element and Dom to generate the final page effect.
In applications developed using Ext, component is the highest abstraction level and is directly used by users. Ext element is the underlying API of Ext, it is mainly called by ext or custom components, while Dom is the original API defined by W3C standard. Ext element displays the page effect by operating Dom.
In Ext, after component rendering, you can obtain the element corresponding to the component by accessing the El attribute of the component, and obtain the DOM object under the element by accessing the DOM attribute of the element. In addition, we can use the shortcut methods of the ext class, such as getcmp, get, and getdom, to component, ext element, and Dom node. For example:
VaR view = new Ext. viewport (); // a component is created.
View. El. setopacity (. 5); // call the setopacity method of element.
View. El. Dom. innerhtml = "Hello Ext"; // you can use the DOM attribute of the element to operate the DOM object.

Let's look at the following code:
VaR win = new Ext. Window ({ID: "win1", title: "My window", width: 200, height: 200 });
Win. Show ();
VaR c = ext. getcmp ("win1"); // obtain the component win
VaR E = ext. Get ("win1"); // obtain the element of the component win based on the ID.
VaR dom = ext. getdom ("win1"); // obtain the DOM node with the ID of win1.

2. Familiar with ext Component System
Ext2.0 restructured the entire framework. The most outstanding thing is that it launched a component system based on the component class, using the object-oriented method based on the component class, A series of components and controls are designed. Therefore, to be able to use ext with ease, it is the most basic to be familiar with the ext component system.
In extjs practical development guide, there is a diagram of the following components:
 
Through the component structure diagram, we can clearly see the inheritance and Composition System of the entire ext component. When using a component's time, we can understand its inheritance system, so that we can easily master the various features of the component.

3. Master core controls　
Controls are actually components, such as treepanel for displaying tree information, gridpanel for displaying tables, editorgridpanel for displaying tables, and Ext. Window for representing application windows. When using Ext, you must master some core controls, especially those in the base class. For example, the widgets mentioned above are inherited from panel, so we need to master the features of the core panel control. For example, a panel consists of the following parts: a top toolbar (tbar), a bottom toolbar (bbar), a header, a bottom, and a body) components. The Panel class also has built-in functions such as panel expansion and closure, and provides a series of reusable tool buttons so that we can easily implement custom behavior, the Panel can be placed in any other container, the Panel itself is a container that can contain various other components. As long as you have mastered the application of panel, it is much easier to learn treepanel and window.
Similarly, for ext form fields, whether it is ComboBox, numberfield, or datefield, all of them are Ext. form. subclass of the field class, which defines various basic operations and features of form fields. When learning to use the form field component, you must focus on the field class and master its main methods and events to help you better learn how to use other fields.

Iv. learning and research examples
Because JavaScript language is flexible, it does not have a fixed code design pattern like static strong-type languages (such as Java). Different people often have different programming styles. In actual application development, you can build a development library in your own mind only when you are knowledgeable.
Learning Other People's examples will be very helpful for our development. Examples include the application of basic components and integrated applications. Here are a few simple recommendations.
1. Official ext example: In the examples directory of the ext project download package, it includes the basic application demonstration of each control, and some complicated combination examples, which are simple and complex, it is very suitable for beginners to study carefully.
2. Example of vifir. Examples of vifir include two types: open-source example applications and VIP users. The open-source example mainly refers to the WLR single-user Blog system. This is a comprehensive ext example integrating the front and back-end technologies, the practical examples for VIP users are examples of developing skeleton or extended components.
3. For other examples, there are many excellent ext application examples in the ext community, some of which are just an application demonstration. Although the source code download is not provided, however, we can directly download the referenced JS file to obtain the ext application code of these examples, which can also play a very good learning effect.

5. Multiple applications
EXT looks very simple. People with a little programming knowledge can learn to use ext in half an hour according to the Getting Started Guide in extjs practical development guide. However, when you are preparing to use ext to develop a project, you do not know where to start or how to solve a small problem. Programming is a practical science. It is far from enough to read and view the code written by others. Therefore, you must do more practical work. You can only use it through continuous exercises, in order to have an in-depth understanding of ext's component features, events, event processing mechanisms, and interaction interfaces with the server, we must make more use of it to gain an in-depth understanding of the working principles and mechanisms of ext components, to compile advanced ext applications.

6. Familiar with ext project source code
If you want to deeply apply Ext, it is essential to read the source code of the ext project. The quality of ext code is very high, by reading his code, we can have a deeper understanding of JavaScript object-oriented programming. Ext Code contains many advanced JS skills and design patterns. In the process of using Ext, we often expand ext components according to the project's needs and design our own components or controls. How can we implement a custom ext component, we can find the answer from the source code of each ext component.
The ext source code is in the source directory of the ext project. Reading the ext source code does not have to start from a certain place, but the component core code component. JS and container component code container. JS, panel. JS and so on are mandatory; element in the core directory. JS, ext. JS and so on are also mandatory. When you need to expand from a control, it is best to have a simple look at the source code of the control.