ExtJS is one of the most mainstream front-end interface development tools today.

Absrtact: ExtJS is one of the most mainstream front-end interface development tools, powerful, beautiful appearance. Although the development of a lot of documents on the Web, but in the actual application will still encounter a lot of problems, this article combined with Enterprise Informatization, SAP ERP and other practical project development experience, to use EXTJS development to do a comb and summary, especially in the development of the key problems encountered in detail elaborated, I hope to provide some help for you.
Keywords: ExtJS IMS RIA Scope ID conflict style unification
1 Introduction
With the development of Internet technology, the interactivity of the website is more and more strong, the software from C/s to B/s, and to the B/s structure of the C/s interface experience, with a large number of rich Internet framework to complete a spiral of samsara, currently in the project used in the main B-side (browser-side) frame ExtJS, Flex, jquery should be the three most frequently used frameworks.
ExtJS is a background-agnostic Ajax framework written using JavaScript. Used primarily for the development of an attractive RIA (Rich client) Web application. It has successfully become one of the most mainstream front-end development frameworks with its rich functions, beautiful interface, good compatibility and most important platform.
In the Investment Management Informatization Project (IMS), the EXTJS framework is adopted in the front of the project. In actual development, ExtJS rich components, very strong code reusability and brilliant effects have brought a lot of convenience and good experience to our development. But because this is the first time to use ExtJS, everyone lacks experience, and is in the state of learning side development, so encountered many problems. Now IMS is nearing the end, in this I use EXTJS development to do a little summary, hope to be able to provide a little help for the future development.
2. ExtJS Development Essentials
2.1 Overall planning
The so-called overall planning, the individual appears to be mainly interface, basic data, public function planning.
The layout of the interface is mainly to determine the overall page layouts and the main business module display style in advance. Due to the particularity of the ExtJS application system, it is more in favor of Ria, almost all the pages and operations are done in the same browser tab, rarely involved in the phenomenon of jump page. So how to compact, beautiful layout of the page is pre-planning needs to be good. In addition, it is necessary and important to determine the display style of important pages in advance. In IMS, due to various reasons, we did not spend time on the business page display style to discuss and confirm, resulting in late user testing to put forward the page style is not good, so that it costs a great price to modify the page display problems.
Basic data and the planning of common functions are primarily designed to facilitate development. Basic data includes data that needs to be cached after the system starts, global variables, and so on. The planning of common functions is mainly to integrate some commonly used functions and functions, and then extract them so that they can be easily invoked later.
2.2 ID Conflict
2.2.1 Source of the problem
At the beginning of IMS project, because of the lack of experience, the code left a lot of hidden trouble, in the late project, these hidden dangers are exposed. The most serious of these is the component ID conflict issue.
It is believed that programmers familiar with the foreground development know that in the HTML specification, the ID value of any element in the same HTML file should be unique (although the browser can explain it in the case of repetition, but when the getElementById () is called by JS, the page will get an error). For the use of ExtJS development of the application, basically the entire system of the front page is written by the pure JS, these JS all by a JSP (or HTML, ASP, etc.) to carry (such as index.jsp), which means that the page of all elements of the ID value should be unique. And, for ExtJS, when the page is rendered, it takes a lot of action by defining the ID value to get the element, and when there is an ID conflict, there are a lot of unexpected things going on in the page.
2.2.2 The situation in which the conflict arises
In ExtJS, any component has a property ID, and the programmer is free to define the value of the ID, and if not, ExtJS automatically defines a unique ID value for those components. Since ext automatically defines the ID value as unique, there is no problem. But for programmer-defined ID values, this value is not necessarily unique.
On the one hand, a project involves a lot of pages, which are written by multiple programmers, so it is possible to define the same ID value on different pages, even the same programmer may have the same ID value defined in the case.
On the other hand, even if the same ID value does not appear on the page you are writing, there is an issue with ID collisions in the following scenario. As a practical example of an IMS project, we have a list of annual investment plans (), when you click the View button, create a new tab and enter the details page of this record, where we make sure that no duplicate IDs are defined, and that there are no problems in this case. But when we look at a record again, all the IDs in the newly opened page conflict with the ID in the previous page, causing two pages to become blank.

2.2.3 Solutions
For the first case, we can solve it through a simple convention. For example, in an IMS system, we agreed to use the class name prefix to identify each component's ID in a different business interface, such as the annual Investment Plan (Invplan) list page, which we agreed to have an ID of invplanview, and similarly, to create an edit page for it. We agreed that its ID is invplanform, so that through simple conventions, it not only increases the readability of the code, but also resolves the problem of ID collisions.
For the second case, there are two solutions.
Scenario One: Use the window component. In fact, for the second situation, the crux of the problem is that the same component will have a number of different instances, for this, we can control only new one of the same components, the way to do is to use window. Window has the modal property, and when the property is true, window masks everything behind it. This way, the other pages will not work, preventing the possibility of the same new two components at the same time. The effect is as follows:

Disadvantage: There may be some pages in the system more complex, need to complete a lot of functions, the user in the operation of this page, you may need to view other data in the system, when using the window mask does not meet this situation.
Scenario Two: Add a unique identity. For scenarios where the use of window is not sufficient, we propose a solution that adds a unique identity. The implementation is that when new is a component, we pass a unique flag (represented here using uniqid), and then add the uniqid to all custom ID values. This way, all ID values are unique, and the problem of ID collisions is avoided successfully.
Next, two practical examples are presented to illustrate the problem of uniqid selection. (See www.7wangzhanjianshe.com)
Example 1: Also mentioned earlier on the annual Investment Plan page, when clicking on the View button of a record, we add uniqid to all the custom IDs in Invplanform, according to scenario two, there is no ID conflict when viewing other records. But when we click on the same record multiple times, if we pass the unique uniqid, then there will be multiple viewing pages of the same record, which is obviously not what we want. The result we expect is that when you click on the same record multiple times, there is only one view page. This requires that the same record must be the same uniqid, in order to achieve this effect, it is most appropriate to use the ID of this record (that is, a piece of data in the database) as the uniqid.
Example 2: To-do Tasks page, when clicked into an agent task, the page will dynamically load this business (example is the annual investment Plan) data form. In this case, if we go back to the annual Investment Plan page, click to view this data, because UNIQID is using the data ID, in this case, the page ID also conflict (there are several other conflicting situations, not detailed here). So in this case uniqid cannot pick the ID of the data, the best way is to use the absolute unique timestamp directly.

Disadvantage: Through the above two examples can be seen, this method of adding uniqid need to consider a variety of possible situations, and then choose different uniqid for different situations, which requires a higher degree of mastery of the whole system ... (part1)

ExtJS is one of the most mainstream front-end interface development tools today.