Extjs features, advantages and disadvantages, and precautions

1. What is extjs?
Extjs can be used to develop Ajax applications in RIA, that is, rich clients. It is written in JavaScript and is mainly used to create front-end user interfaces. It is a front-end Ajax framework unrelated to background technology. Therefore, extjs can be used in applications developed in. net, Java, PHP, and other development languages.
The predecessor of extjs is Yui. After continuous development and improvement, extjs has become the most complete and mature JavaScript base library for building Ria web applications. Ria Web applications built using extjs haveProgramThe same standard user interface and operation method, and can span different browser platforms. Extjs has become the perfect choice for developing Web applications with excellent user experience.
Extjs was initially based on the Yui technology. Its UI component model and development concept were originated and formed on the Yahoo Component Library Yui and the Java platform swing, shielding developers with a lot of cross-browser processing. Relatively speaking, ext is easier than developing UI components for Dom and W3C object models.

2. extjs features
(1). Purely html/CSS + JS technology, redefining the coupling of the presentation layer;
(2 ). based on the pure HTML/CSS + JS technology, it provides a wide range of cross-browser UI components and flexibly uses JSON/XML data sources for development. This reduces the load on the presentation layer of the server and achieves MVC applications on the client;
(3) integrate various underlying JS libraries to meet different developers' needs;
(4). In the early stage, ext only expanded the Yui dialog box. Later, it gradually became a special feature and popular among netizens. Up to now, ext supports JS libraries such as jquery prototype in addition to Yui, allowing everyone to choose freely;
(5). Support for mainstream browsers on multiple platforms.

3. advantages and disadvantages of extjs
(1 ). advantages of extjs
<1>. rich UI components and beautiful appearance.
the ext JS library has rich and beautiful UI components, which greatly shortens our development cycle and provides a beautiful layout, after simple calls and configuration, you can achieve a good interface layout. The various components provided by extjs can display data in a more standard manner, reducing the development difficulty.
<2> good browser compatibility.
extjs is not required for browsers. It can be said that it is a green rich client implementation method, and extjs can basically run in mainstream browsers.
<3> There are many excellent animation effects, improving the user's perception.
<4>. it is irrelevant to the Code in the background. .
development in any background language will not be affected. Whether you use C #, Java, or PHP, it does not matter.
<5>. convert a web program to a desktop system.
the biggest advantage of extjs is that it converts the Web Application Operation Method to the traditional desktop application operation method and even eliminates this difference, it fundamentally improves the user experience, which is the main reason for the broad prospect of extjs applications.
<6>. rich documentation and examples.
there is no doubt that most people who have just reached extjs are attracted by the examples and development documents attached to it. Its documents are indeed doing well.

(2) Disadvantages of. extjs
<1>. Large Volume, slow speed.
Because a large number of UI components are used, the page loading speed is slow due to the large size.
<2>. The fee does not seem to be free.
Because it is too good, it is charged for Versions later than ext JS 2.0. Maybe this cannot be regarded as its shortcoming, but it does hinder its promotion and application.
<3> there is no suitable development tool.
There is no doubt that a good development tool can greatly improve the encoding speed, but extjs does not have a perfect development tool. We recommend Aptana Studio, spket IDE, and the prompt files provided by spket, but they both have their own advantages and disadvantages and are not perfect. They can only read the SDK while writing code.
<4> there is no interface design tool.
Although some people provide an online interface design tool, it is really quite different from the ASP. NET design tool provided by Visual Studio. Therefore, you can only preview and write code.
<5>. incomplete documentation.
Although extjs provides rich documentation, it still cannot keep upSource codeSo it is often necessary to look at the source code and debug to truly solve the problem.
<6>. cannot be compiled.
This can be said to be a disadvantage of JavaScript (if it can be compiled, it will not be called JavaScript). In actual development, some code, such as case-sensitivity errors, is often knocked out, feedback cannot be obtained through compilation, but errors can only be generated during runtime, resulting in low development efficiency.

4. extjs considerations
(1) try to use the extjs dialect.
Extjs provides many useful methods to solve common Javascript development tasks on the client. Common methods include querying htmldom, creating HTML elements, and registering event response functions for HTML elements, you can use all the methods provided by extjs to build your own code on top of extjs. For example:
Query all the checkboxes under the DIV whose ID is iner. You can use: Ext. Fly ('Container'). Select ('input [type = checkbox] ');
Create a button in the DIV whose ID is container. You can use: Ext. Fly ('Container'). createchild ({Tag: 'input', type: 'bucket '});
Register the handler for the Click Event of the DIV whose ID is Container Using: Ext. Fly ('Container'). On ('click', handlerfn, scope );
(2). Better custom events.
Extjs custom events are easy to use and can implement one-to-many notifications. In addition, any custom events can be stopped midway through, as long as one processing function returns false.
(3). Store is merged into a file.
To use extjs to display data, you naturally need to use Ext. Data. Store and Its Derived classes. You can consider merging all the stores into a file, which is helpful for reuse.
(4). script file management.
Make every module A class, a class, and a file as much as possible, similar to the File Processing Method of Java or C #. Each file indicates its function and dependent files, if there are too many configuration files, you can write a configuration file and read the configuration file to output the script to the client.
(5) debugging and deployment notes.
The complete debug version is not used in the examples attached to extjs, where the debug and release versions are loaded separately. Therefore, many people cannot find the reference sequence of the complete debug version, through the ext. analyze the JSB file to obtain the correct loading sequence, as shown below:
Debug
/EXT-path/source/CORE/EXT. js
/EXT-path/source/adapter/ext-base.js
/Ext- path/ext-all-debug.js
Release
/EXT-path/adapter/EXT/ext-base.js
/Ext- path/ext-all.js
(6). compress the script.
If there is a large amount of Javascript in the project, it is necessary to compress it. Here I recommend the JS builder provided by the extjs forum, the script and CSS can be compressed through the configuration file, it is said that extjs is compressed with this tool, but there is a disadvantage, that is, does not support UTF-8 encoding.

5. extjs component system diagram

6. Ext js api documentation
<1>. The following is the name string of all available buttons in the toolbar.

 
String Chinese name ------------- ------------------ toggle shrink/expand close minimize maximize restore reset gear adaptive pin fixed unpin unfixed right left up down refresh minus zoom in plus zoom in help help search save print Print
 

View code

<2>. The following lists the mappings between all layout strings and classes. All layout classes are inherited from the Ext. layout. containerlayout class.

 
Chinese name of the string class ------------- ---------------- ------------------ absolute Ext. layout. absolute absolutely locates accordion Ext. layout. accordion accordion-type Anchor Ext. layout. anchorlayout (new) Auto Ext. layout. auto auto border Ext. layout. borderlayout boundary card Ext. layout. cardlayout card column Ext. layout. columnlayout column-type fit Ext. layout. fitlayout adaptive form Ext. layout. formlayout form (new) hbox Ext. layout. hbox horizontal (new) menu Ext. layout. menu-style table Ext. layout. tablelayout table (new) toolbar Ext. layout. toolbar tool bar (new) vbox Ext. layout. vbox vertical
 

<3>. The following lists the mappings between all 'xtype' and classes.

Xtype class ------------- ------------------ box Ext. boxcomponentbutton Ext. buttonbuttongroup Ext. buttongroupcolorpalette Ext. colorpalettecomponent Ext. componentcontainer Ext. containercycle Ext. cyclebuttondataview Ext. dataviewdatepicker Ext. datepickereditor Ext. editoreditorgrid Ext. grid. editorgridpanelflash Ext. flashcomponentgrid Ext. grid. gridpanellistview Ext. listviewpanel Ext. panelprogress Ext. progressbarpropertygrid Ext. grid. propertygridslider Ext. sliderspacer Ext. spacersplitbutton Ext. splitbuttontabpanel Ext. tabpaneltreepanel Ext. tree. treepanelviewport Ext. viewportwindow Ext. windowtoolbar components ----------------------------------------- paging Ext. pagingtoolbartoolbar Ext. toolbartbbutton Ext. toolbar. button (obsolete; Use button) tbfill Ext. toolbar. filltbitem Ext. toolbar. itemtbseparator Ext. toolbar. separatortbspacer Ext. toolbar. spacertbsplit Ext. toolbar. splitbutton (obsolete; Use splitbutton) tbtext Ext. toolbar. textitemmenu components ----------------------------------------- menu Ext. menu. menucolormenu Ext. menu. colormenudatemenu Ext. menu. datemenumenubaseitem Ext. menu. baseitemmenucheckitem Ext. menu. checkitemmenuitem Ext. menu. itemmenuseparator Ext. menu. separatormenutextitem Ext. menu. textitemform components ----------------------------------------- form Ext. form. formpanelcheckbox Ext. form. checkboxcheckboxgroup Ext. form. checkboxgroupcombo Ext. form. comboboxdatefield Ext. form. datefielddisplayfield Ext. form. displayfieldfield Ext. form. fieldfieldset Ext. form. fieldsethidden Ext. form. hiddenhtmleditor Ext. form. htmleditorlabel Ext. form. labelnumberfield Ext. form. numberfieldradio Ext. form. radioradiogroup Ext. form. radiogrouptextarea Ext. form. textareatextfield Ext. form. textfieldtimefield Ext. form. timefieldtrigger Ext. form. triggerfieldchart components ----------------------------------------- chart Ext. chart. chartbarchart Ext. chart. barchartcartesianchart Ext. chart. cartesianchartcolumnchart Ext. chart. columnchartlinechart Ext. chart. linechartpiechart Ext. chart. piechartstore xtypes ----------------------------------------- arraystore Ext. data. arraystoredirectstore Ext. data. directstoregroupingstore Ext. data. groupingstorejsonstore Ext. data. jsonstoresimplestore Ext. data. simplestore (outdated; Use arraystore) store Ext. data. storexmlstore Ext. data. xmlstore

refer to blog:
extjs Development Summary
ext JS (1) ext JS introduction