ExtJS characteristics, advantages and disadvantages and precautions

Excerpt from: ExtJS features, advantages and disadvantages and precautions

1. What is ExtJS?
ExtJS can be used to develop the RIA and rich client Ajax applications, is written in JavaScript, mainly for the creation of the front-end user interface, is a background technology-independent front-end AJAX framework. As a result, ExtJS can be used in applications such as. Net, Java, PHP, and many other development languages.
The predecessor of ExtJS from Yui, after continuous development and improvement, has now become the most complete and mature a set of Web applications to build Ria JavaScript base. The RIA Web app built with ExtJS has the same standard user interface and operation as desktop programs, and can span different browser platforms. ExtJS has become the perfect choice for developing Web applications with a complete user experience.
ExtJS was initially based on the Yui technology, its UI component model and development concept, formed in the Yahoo Components library Yui and the Java platform Swing both, and for developers to block a large number of cross-browser aspects of processing. In contrast, ext is easier than developers to develop UI components directly against the DOM and the object model.

Features of 2.ExtJs
(1). Pure Html/css+js Technology, redefine the coupling of the presentation layer;
(2). 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's MVC application;
(3). Integrated with a variety of JS bottom-level library, to meet the different needs of developers;
(4). Ext early only to Yui's dialog box expansion, and then gradually have their own characteristics, deeply loved by netizens. Development so far, ext besides Yui also support jquery prototype such as JS Library, let everyone choose freely;
(5). Multi-browser support, multi-platform support for the mainstream browser.

Advantages and disadvantages of

3.ExtJs
(1). Advantages of ExtJS
<1>. The UI component is rich and looks beautiful. The
Ext JS Library has a rich and beautiful UI component that greatly shortens our development cycle, and the component has a beautiful layout that allows for a good interface layout with simple invocation and configuration. ExtJS offers a variety of components that can be presented in a more standard way to reduce the difficulty of development.
<2>. browser compatibility is good. The
does not require any browser using ExtJS. Can be said to be a green rich client implementation, ExtJS basically can run in the current mainstream browser.
<3> There are a lot of animations that do quite well and improve the user's perception.
<4>. and background code Independent.
No matter what language is developed in the background will not be affected, whether you are in C # or Java or PHP and it does not matter.
<5>. Convert the Web program to the desktop system. The biggest advantage of the
ExtJS is that it transforms the way Web applications operate to traditional desktop applications and even eliminates the difference, radically improving the user experience, which is the main reason for the ExtJS application.
<6>. Relatively rich documentation and examples.
There is no doubt that most of the people who have just come into contact with ExtJS are drawn to it by the examples and development documentation that they have attached, and that the documentation is really good.

(2). Disadvantages of ExtJS
<1>: Large volume, slightly slower speed.
Because a large number of UI components are used, the volume is large, resulting in slower page loading.
<2>: Charges, as if not free.
Because it is too good, so from the Ext JS 2.0 after the version is charged. Perhaps this is not a disadvantage, 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 speed of coding, but for ExtJS, there is always no perfect development tools, can be recommended Aptana Studio, Spket IDE, and Spket provide the prompt files, but all have advantages and disadvantages, are not perfect, You can only read the SDK while writing code.
<4>: No interface design tools.
While someone has provided an online interface design tool, it's really a huge difference, as is the case with Visual Studio's ASP. Therefore, you can only preview, while writing code.
<5>. Document incomplete.
Although ExtJS provides a rich documentation, but still can't keep up with the source code update speed, so often to look at the source code, debugging to really solve the problem.
<6>: Cannot compile.
This can be said to be a disadvantage of javascript (if you can compile, it is not called JavaScript), in the actual development, often knock some wrong code, such as error, such as capitalization, can not be compiled to get feedback, can only be wrong at runtime, resulting in inefficient development.

4.ExtJs precautions
(1). Try to use ExtJS dialect.
ExtJS provides a number of useful methods to solve common client JavaScript development tasks, common query Htmldom, create HTML elements, register event response functions for HTML elements, and so on, which can all use the methods provided by ExtJS, Build your own code on top of the ExtJS, and give a few examples:
The query ID for all checkboxes under container div, can be used: ext.fly (' container '). Select (' Input[type=checkbox] ');
Create a button inside the div with ID container, which can be used: ext.fly (' container '). Createchild ({tag: ' input ', type: ' button '});
Register the handler function for the Click event of the div with ID container, using: ext.fly (' container '). On (' Click ', Handlerfn, scope);
(2). Custom events are better.
ExtJS's custom events are useful, can implement a one-to-many notification, and any custom event can be stopped halfway, as long as there is a handler function that returns FALSE.
(3). The store is merged into one file.
Using ExtJS to display data, you naturally need to use Ext.data.Store and its derived classes, and you can consider all the stores merged into a single file, which is useful for reuse.
(4). script file Management.
As much as possible each module into a class, a Class A file, similar to Java or C # file processing methods, each file annotated its role, dependent on the file, if too many can consider writing a configuration file, read the configuration file to output the script to the client.
(5). Debugging and Deployment note.
Debugging and deploying scripts that load debug and release versions separately ExtJS examples of the complete debug version are not used in the accompanying example, so many people cannot find the full debug version of the reference order, By analyzing the EXT.JSB file under the source folder, you can get the correct loading order, as follows:
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.
There is a lot of JavaScript in the project, it is necessary to compress it, here I recommend the ExtJS forum provided by the JS Builder, you can use the configuration file to compress script and CSS, it is said that ExtJS is compressed with this tool, One drawback, however, is that UTF-8 encoding is not supported.

5.ExtJS Component System diagram

6.EXT JS API Interface Documentation
<1> The following is a string of available button names for all toolbars

View Code

<2> The following is the correspondence of all layout strings and classes, and all layout classes inherit from the Ext.layout.ContainerLayout class

String            class                           Chinese name-------------    ------------------           ------------------Absolute         Ext.layout.absolute           Absolute Positioning accordion        Ext.layout.Accordion          Accordion-style anchor           Ext.layout.AnchorLayout       anchor (new) Auto         Ext.layout.auto               Automatic border           Ext.layout.BorderLayout       boundary type card             Ext.layout.CardLayout         cards-type column           Ext.layout.ColumnLayout-Fit              Ext.layout.FitLayout          Adaptive form             Ext.layout.FormLayout         form ( New) Hbox         Ext.layout.hbox               Level (new) menu         Ext.layout.menu               Menu Table            Ext.layout.TableLayout        table Style (new) toolbar      Ext.layout.toolbar            Tool Strip (new) VBox         Ext.layout.vbox               Vertical

<3> The following is the correspondence of all ' xtype ' and classes

Xtype Class-------------------------------Box Ext.boxcomponentbutton Ext.buttonbutto Ngroup Ext.buttongroupcolorpalette ext.colorpalettecomponent Ext.componentcontainer Ext.Containercy CLE Ext.cyclebuttondataview Ext.dataviewdatepicker Ext.datepickereditor Ext.editoredito         Rgrid 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; using Button) TB Fill Ext. Toolbar.filltbitem Ext.Toolbar.Itemtbseparator Ext.Toolbar.Separatortbspacer Ext.Toolbar.Spacertbsp Lit Ext.Toolbar.SplitButton (obsolete; using SplitButton) Tbtext Ext.Toolbar.TextItemMenu Components----------- ----------------------------Menu Ext.menu.Menucolormenu Ext.menu.ColorMenudatemenu Ext.menu.Dat Emenumenubaseitem Ext.menu.BaseItemmenucheckitem Ext.menu.CheckItemmenuitem Ext.menu.Itemmenuseparator E             Xt.menu.Separatormenutextitem Ext.menu.TextItemForm Components---------------------------------------form Ext.form.FormPanelcheckbox Ext.form.Checkboxcheckboxgroup Ext.form.CheckboxGroupcombo Ext.form.Combo         Boxdatefield Ext.form.DateFielddisplayfield Ext.form.DisplayFieldfield Ext.form.Fieldfieldset Ext.form.FieldSethidden Ext.form.Hiddenhtmleditor Ext.form.HtmlEditorlabel Ext.form.Labelnumb Erfield 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.char T.cartesianchartcolumnchart Ext.chart.ColumnChartlinechart Ext.chart.LineChartpiechart Ext.chart.PieCh Artstore xtypes---------------------------------------arraystore Ext.data.ArrayStoredirectstore Ext.data.Direct      Storegroupingstore Ext.data.GroupingStorejsonstore Ext.data.JsonStoresimplestore Ext.data.SimpleStore (obsolete; use Arraystore) store Ext.data.Storexmlstore Ext.data.XmlStore

Reference Blog:
"ExtJS"
Summary of the development of ExtJS
"Ext JS (1) Ext JS Introduction"

ExtJS characteristics, advantages and disadvantages and precautions