Introduction to the EXTJS framework

Preface

ExtJS is primarily used to create front-end user interfaces and is a front-end Ajax framework unrelated to background technology.

Feature-rich, no one can out of its right

Whether it is the beauty of the interface, or the function of the strong, Ext table controls are top of the list.

Tanxuan, select rows, highlight selected rows, push and drag to change column widths, sort by column, these basic functions we will not mention.

Automatically generate line numbers, support checkbox selection, dynamically select which columns to display, support local and remote paging, you can make the cells in their own ideas to render, which can be thought of the function.

Plus editable grid, add new lines, delete one or more lines, hint dirty data, push and drag to change the grid size, grid push one or more lines between, and even between the tree and grid to drag, ah, these features are really amazing. What's even more amazing is that these features are actually implemented in the Ext table control.

Oh ~ But ext is not omnipotent, and fins ecside comparison, ext can not lock column (Potato said 1.x support lock column, but no 2.0, because the impact of efficiency. , there is no default statistical functionality, and no support for exporting data such as excel,pdf. In addition fins said, through testing ecside efficiency is significantly better than ext. :)

What is ext

1, ExtJS can be used to develop RIA is also the rich client Ajax application, is a JavaScript written, mainly for the creation of front-end user interface, is a background technology-independent front-end AJAX framework. Therefore, ExtJS can be used in a variety of development languages such as. Net, Java, PHP and so on. ExtJS first based on Yui technology, by developers Jackslocum Development, through the reference javaswing mechanism to organize visual components, regardless of the UI interface on the application of CSS, to data resolution on the exception processing, Can be regarded as a rare JavaScript client technology boutique.

2, Ext UI component model and development concept, formed in the Yahoo component library Yui and the Java platform Swing both, and for developers shielding a large number of cross-browser processing. In contrast, ext is easier than developers to develop UI components directly against the DOM, the world-view object model.

EXT History

1, the first "sea" Yui-ext is only the author Jack intends to Yahoo! based on the BSD protocol UI Library to customize the extension, but then once the limelight overshadowed its parents Yui, enough to show that everyone's enthusiasm for it, many people put it into the project people do not know it very well. Analysts have played an analogy: like not yet met, do not know a person's family, education, conduct and other backgrounds, only because he has a delicate and beautiful appearance, he fell into a crazy admiration. As a result, analysts suggest that, at present, you should carefully understand the intrinsic principles of ext and the different places with other Ajax libraries.

2. At the beginning of 2006, Jack Slocum (Jacks Lockem) extended the facility to Yahoo! User Interface (YUI) library and work. These extensions are quickly organized into a separate library code and published in the name of "Yui-ext."

3. In the fall of 2006, Jack released a version of Yui-ext 0.33, which eventually proved to be the final version of the code, under this name (Open source DSB license). Before the end of the year, this library has been greatly popular, the name is simplified to ext, reflecting its maturity and independence as a framework.

The company was founded in early 2007 and Ext is now a dual-license, using LGPL and a commercial license.

4, on April 1, 2007, the release of 1.0 official edition.

5, until today (January 8, 2010) ExtJS has developed the United States, Japan, China, France, Germany and other global users, the current version of the Ext-3.1.0

6, the official in April 2009 14-16th, the first EXT conference released EXT 3.0 RC version.

7, May 4, 2009, ext 3.0 release.

Introduction to ExtJs UI engine

ExtJS early on, it was just Yahoo!. UI dialog box extension, and then gradually have their own characteristics, deeply loved by netizens. Development so far, ext in addition to Yui also support jquery, prototype, such as a variety of JS Bottom library, let everyone choose freely. The framework is entirely based on pure HTML/CSS+JS technology, providing rich Cross-browser UI components, flexible use of json/xml data source development, so that the load of the service-side presentation layer is really reduced, so as to achieve the client MVC application!

ExtJS supports the mainstream browsers under multiple platforms Internet Explorer 6+ FireFox 1.5+ (PC, Mac) safari2+, opera9+. The manufacturers in use include IBM, Adobe, Cisco and more. ExtJS official website www.extjs.com

Ajax mainstream framework and ExtJS

JQuery, prototype and Yui all belong to the very core of the JS library. Although Yui, as well as the recent jquery, have built a series of UI devices (widgets), but there is no real integration of a good and complete program development platform. Even these low-level core libraries have been pretty good, but when it came to the real development environment, developers still needed to do a lot of work to refine the gaps. and ext is to fill these gaps. Only dojo in the mainstream open source framework, like Ext, is trying to provide an integrated development platform. Compared to the excellent toolkit of dojo, we think that ext can provide an application framework with a higher degree of adhesion. The components of Ext are designed to work seamlessly with other Ext component combinations. This fluent interoperability, inseparable from a close cooperation team, but also must always emphasize the design and development of the two goals of unity, and this is a lot of open source projects did not do. Starting with building each component, we have always emphasized the appearance, performance, interoperability, and scalability of components, and we believe that components have met these requirements.

Ext absolutely can be used alone. In fact, in addition to specific requirements, it is recommended to use Ext alone, so that the file occupies a smaller position, support and consolidation is also closer. We also support the integration with jquery, Yui, or prototype, as the role of the lower-level library appears to provide services dealing with a variety of cores, such as Dom and event handling, AJAX connections, and animated effects. One reason to use consolidation is that they already have some specific devices and Ext has no native support-like Yui's history control is a typical example. At this time, ext need to rely on Yui this library to implement the bottom of the history control, so it can also be removed from the bottom of ext library, thereby reducing the entire program's memory footprint. Another reason to use consolidation is that for many programs that already use other underlying libraries, you may want to step into the ext. In summary, if you already have other libraries, ext can already use them. Our aim is to provide users with a variety of possibilities and performance optimization. The fact is that as long as the corresponding underlying library interface is implemented, it is no problem to add an adapter to any of the frameworks-people can easily turn dojo, Moo, Ajax.NET, or other JS libraries into the bottom of ext.

Ext starts charging from 2.x, which brings some problems to his application prospects. But the impact on domestic developers is small, after all, customer payment.

A summary of Ext learning and application experience

I. Understanding HTML DOM, EXT element and component

To learn and apply a good Ext frame, you need to understand the differences between HTML DOM, EXT element and component.

Ext is a rich client framework based on the web, it is based on the standard of the technical construction of the technology, the use of HTML, CSS, Div and other related technologies. Ext Most outstanding is the development of a series of very simple and easy-to-use controls and components, we only need to use these components to achieve a variety of colorful UI development.

No matter how many configuration properties, events, methods, and so on, the component will eventually turn into HTML to be displayed on the browser, and each HTML page has a hierarchical DOM tree model, and all content in the browser has a corresponding DOM object that dynamically changes the content of the page. It is by using the scripting language to manipulate DOM object implementations.

Only Dom is not enough, such as to move one of the nodes in the page to another location, to add a shadow effect to a node, to hide or display a node, etc., we need to pass a few words of JavaScript to complete. Therefore, ext in the DOM based on the creation of the EXT element, you can use Element to wrap any Dom,element object to add a series of fast, simple practical methods.

For end users, only element is not enough, such as a user to display a table, to display a tree, to display a pop-up window, and so on. Therefore, in addition to the element, EXT also set up a series of client interface components component, we are programming, as long as the use of these components componet can achieve relevant data display and interaction, and component is a higher level of abstraction, Each component in the rendering render, in turn through the element, Dom to generate the final page effect.

In the use of EXT development application, component component is the highest level of abstraction, is directly to the user, ext element is ext the underlying API, mainly by ext or custom components called, and DOM is the standard definition of the original API, The element of ext is displayed by manipulating the DOM to achieve the effect of the page.

In ext, component rendering can be achieved by accessing the component's El property to obtain the element corresponding to the component, and the DOM object below it can be obtained by accessing the element's DOM properties. In addition, we can through the Ext class shortcut method getcmp, get, GetDOM and other methods to come to component component, ext element elements and DOM nodes. Like what:

var view=new ext.viewport ();//Create a component component

View.el.setOpacity (. 5);//Call setopacity method of element

View.el.dom.innerhtml= "Hello Ext"; manipulate DOM objects through element's DOM properties

Then 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");/Get component win

var e=ext.get ("Win1");//component win corresponding element based on ID

var dom=ext.getdom ("Win1");//Get DOM node with ID win1

Second, familiar with the Ext component system

Ext2.0 the entire framework, the most outstanding is the introduction of a component class based component system, on the basis of component class, the use of object-oriented methods, the design of a series of components and controls. Therefore, to be able to use Ext, familiar with the Ext component system is the most basic.

In the ExtJS Practical development Guide, there is a diagram of the following components:

Through the component structure diagram we can see the whole Ext component inheritance and composition system, when using a component time, understand his inheritance system, so that we can grasp the various characteristics of components.

Third, master the core control

Controls are also components, such as treepanel for displaying tree information, Gridpanel and editorgridpanel for displaying tables, and Ext.window, which represent application windows, that are part of the Ext control. When using ext, be sure to master some of the core controls, especially those in the base class. For example, several of the controls mentioned above are inherited from panel panels, so we have to focus on the features of the core control of the panel. For example, a panel consists of several parts: a top toolbar (tbar), a bottom toolbar (bbar), a panel header (header), a panel tail (bottom), and a panel main area (body). The Panel class also has features such as panel expansion, shutdown, and a series of reusable tool buttons that allow us to easily implement custom behavior, panels can be placed in any other container, the panel itself is a container, and he can contain a variety of other components. As long as you master the application of the panel, then Learning Treepanel, window and so on will become much simpler.

In the same way, for Ext form fields, whether it is Combobox,numberfield, or Datefield, they are all the other subclasses of the Ext.form.Field class, which defines the various basic operations and characteristics of the form field. When learning to use a form field component, it is important to focus on the field class, master his main methods, events, and so on to help better learn to use other fields.

Iv. Learning and research examples

Because the JavaScript language is very flexible and does not have a fixed code design pattern like static strongly typed languages (such as Java), it is often different for different people to have the same programming style. In the actual application development, only the well-informed, can build a development storehouse in own brain.

Learning from others can be very helpful for our development, examples include the application of basic components, integrated applications, and more. Here, simply recommend a few.

1, ext official example, in the EXT project download package examples directory, including the basic application of each control demo, while there are some more complex combinations of examples, there are simple, very suitable for beginners to study seriously.

2, Vifir launched the example, Vifir introduced a number of examples mainly include two categories, one is the open source of the example application, the other is a practical example for the VIP user. The open source example is mainly refers to the WLR single user blog system, this one sets up the front and rear technology The EXT synthesis example, but for the VIP user's practical example is may as the development skeleton or the extension component example.

3, other examples, in the EXT community there are many more excellent ext application examples, some just an application demo, although no source download, but we can directly download the reference JS file to get these examples of EXT application code, also can take a very good learning effect.

Five, more use

Ext looks like a very simple thing, a little bit of programming knowledge people, according to the "ExtJS Practical Development Guide" in the Guide, half an hour can learn to use ext. However, when you are ready to use EXT to develop a project, but do not know where to start, or in the use of ext, a little problem that they do not know how to solve. Programming is a practical science, only by reading, read others write code is far from enough, therefore, we must do more practice, only through continuous practice, a large number of use, to Ext component characteristics, events, event processing mechanism and interface with the server side of the in-depth grasp, only to do more use, To understand the working principle and mechanism of the components of EXT, we can write the application of the advanced ext.

Liu, read the source code of EXT Project

If you want to apply ext, then read EXT project source code This is an essential link, ext code quality is very high, through reading his code we can more profound understanding of JavaScript object-oriented Programming, ext code contains a lot of advanced JS skills and design patterns. In the use of ext, we often according to the needs of the project Ext components to expand, design their own components or controls, and how to implement a custom ext components, we can from the various components of the EXT source code to find the answer.

Ext Source Directory in ext project. Read EXT source code, and does not necessarily have to start from a certain place, and the component core Code component.js, container Component code container.js, panel panel.js, etc. these are necessary to see; the element.js, ext.js, etc. in the core directory are also required. When you need to extend from a control, it's a good idea to take a quick look at the source code of the control.

Vii. understanding, familiarity, and mastery of JSON

In the project, ext itself's gorgeous appearance is very eye-catching, but this is only its external beauty, but also the core of the inner beauty, namely: Json. JSON (JavaScript Object notation) is a data interchange format, a project that does not implement data interactivity is meaningless, and most AJAX framework data interactions are based on JSON, such as JQuery, ExtJS, and so on. It is therefore important to understand that JSON has a good grasp of JSON and is skilled at using it. Take the current mainstream development language as an example. NET has already encapsulated the JSON into the class, no configuration, direct interaction with the database, easy encapsulation directly use; Java is troublesome, must go to the next JSON package, and then do some configuration before you can use; PHP is similar to Java, and you must download a JSON plugin (like a Class), But no configuration, direct encapsulation use. In actual projects, the trade-offs are based on the project and requirements, not necessarily for each project (for the web). However, if you want to use this kind of AJAX framework in your project, the mastery of JSON is necessary.

Data Source: http://baike.baidu.com/view/1350145.htm