Extjs Development Summary

Unconsciously, 2008 has come to an end. Over the past year, we have been constantly trying to use extjs for projects. from 1.1 to 2.2, we have suffered a lot of hardships and gained a lot, to sum up, share it together!

1.Extjs is positioned as Ria, which is different from prototype, jquery, and other class libraries.. Using extjs for development means that client-based development is the main function, otherwise it will not be called the RIA framework. prototype, jquery, and so on are only auxiliary client frameworks, and extjs are not at the same start. If it is necessary to compare it with other frameworks, it should be compared with frameworks such as isomorphic smartclient and backbase enterprise Ajax. Of course, extjs has great advantages over them.

2.How to Implement server-side communication when using extjs. Because extjs is only a client framework, it has nothing to do with the server technology, so there is no corresponding server adaptation layer. Therefore, if the client uses extjs, it must provide the required data structure. Extjs communicates with the server through these methods:

• Ext. Ajax. RequestFor normal asynchronous requests, the server can return JSON data or HTML fragments based on actual conditions;
• Ext. Tree. treeloaderWhen loading the tree structure, the server must return JSON data and comply with the Ext. Tree. treenode Configuration Requirements. Otherwise, convert the data by yourself;
• Ext. Data. Store and Its Derived classesWhen loading table data, the server can return JSON or XML data based on the actual situation. If there are no special requirements, it is recommended to return JSON data;
• Ext. element. UpdatePartial update. This method always calls Ext. ajax. the reason for listing the Request Method separately is that this method is easy to ignore, but in some cases it is quite useful, such as calling ext. panel. body. update () for a certain Ext. panel content is partially updated. If this method is used, the server can only return HTML fragments accordingly;

3.Notes for using extjs. Compared with other auxiliary class libraries (such as prototype and jquery), extjs is very large, and many beginners are discouraged. After nearly one year of learning and using extjs, I have summarized several precautions:

• Use extjs dialect whenever possible. 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 extjsCodeFor example:
  • Query all the checkboxes under the DIV whose ID is container. 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 );
• Extjs custom events are easy to use.Can implement one-to-multiple notifications, and any custom event can be stopped midway through, as long as a processing function returns false.
• Store into a fileTo 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.
• Script File ManagementMake 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.
• Debug and deploy the debug and release versions respectively.The complete debug version is not used in the examples attached to extjs, so many people cannot find the reference sequence of the complete debug version. analyze the JSB file to obtain the correct loading sequence, as shown below:
  • Debug
    1. /EXT-path/source/CORE/EXT. js
    2. /EXT-path/source/adapter/ext-base.js
    3. /Ext- path/ext-all-debug.js
  • Release
    1. /EXT-path/adapter/EXT/ext-base.js
    2. /Ext- path/ext-all.js
• Compress scriptsIf 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.

 

4.Summary of advantages and disadvantages of extjs. After nearly one year's attempt, the advantages and disadvantages of extjs are summarized as follows:

• advantages
  • consistent class library This is not perfect in version 1.1. However, after version 2.0, extjs has undergone earth-shaking changes, especially the UI components, there is a unified base class, which makes people feel like a runtime framework running on a browser. This can be realized only after extjs is proficient.
  • hosted page rendering after extjs grew to 2.0, not only the UI class library was consistent, but also the rendering method was unified. In official words, it is managed rendering, which makes the UI extension more consistent and is conducive to future maintenance and development.
  • relatively rich documents and examples undoubtedly, most people who have just come to extjs are attracted by the examples and development documents attached to it, its documentation is indeed good.
  • gorgeous and mature interface extjs's interface after 2.0 is really not only gorgeous, but also relatively mature.
• Disadvantages
  • No suitable development toolsThere 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.
  • No interface design toolsAlthough 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.
  • Incomplete documentationAlthough 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.
  • Cannot compileThis 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.

5.Some Suggestions on using extjs for application. Most people think that extjs scripts are large in size and are not suitable for storing them on the Internet. For this, we have the following suggestions:

1. For Web applications deployed on the internet, you must load the extjs version of release.
2. You can consider loading only required components. The script files in the build directory are compressed. If there are not many extjs components used in the project, you can only load the required components.
3. Consider using the IIS File compression function
4. Use Google's gears to cache all static files on the client
5. Use Adobe AIR to package the script to the client for running.

 

In general, extjs is a good framework. It will accompany me through the wonderful 2008. Maybe in the future 2009, I will switch to other RIA technologies, but at least I will continue to pay attention to extjs, at the same time, we also hope that this framework will survive tensorily.

PS: Share some learning materials:

• Extjs 2.0 introduction (read more and learn more)
• Extjs user extension collection (recommended)
• How to Use extjs to build large-scale applications (it can be said that it is the guiding ideology for extjs Development)
• Brain map of the extjs 2.0 class library (which can deepen understanding of the inheritance relationship of the extjs Class Library)