Start extjs Journey: 3. Basic Concepts in extjs

3 basic concepts in extjs

As mentioned in chapter 1st, extjs is very different from traditional web development. Especially in interface development, you do not need to be entangled in HTML and CSS, but it is very similar to Java swing or Delphi. In this way, extjs development involves some concepts that are not available in traditional web development, such as panel, layout, and component. This section describes these concepts to lay a good conceptual foundation for subsequent studies.
PanelThe Panel is an area where programmers can place various components to form a user interface. In terms of image, the panel is a blank canvas. The programmer is a painter. What will appear on the canvas is determined by the painter. Of course, as a panel, the final display is not an ink painting, but a variety of extjs components. The appearance of the Panel solves the problem that Windows (a browser window for Web applications) cannot be directly split. The Panel can be used to split the window into multiple parts, so that for the window, it only needs to manage the display of the panel on the window, you no longer need to care about the presentation of various Panel components, because this part of work is managed by the Panel itself. Obviously, the introduction of panels isolates complex problems, which has a profound impact on the software development interface, in particular, it provides a very good solution for the software interface to adapt to the screen size.
Layout: Layout refers to the placement of components in a container. When talking about the layout, there must be a container, which is used to place the space. At the same time, there are also components to be placed, which are used to operate the entity. When the container specifies a specific layout, the components placed in the container are automatically adjusted according to the specified layout. This process does not require the participation of programmers, this gives you a more standard user interface. The layout of extjs is basically the same as that of javaswing, which guarantees a wide range of user interfaces.
Component component: A component is a code segment and related resources that have previously implemented specific functions and can be reused in programming. In extjs, components can be simply a button or a data table. Components bring powerful functions to common software developers, greatly accelerating software development and ensuring higher quality. In addition to the exquisite and easy-to-use components officially provided, there are also many third-party components with different functions, and you can develop your own special components. It can be said that extjs programming is component programming. The clever accumulation of various components becomes the final application software with exceptionally beautiful interfaces and powerful functions.
Rendering render: Rendering is a process in which pages containing extjs programs are completely displayed in the browser after being downloaded. As a common HTML page, there is also a rendering process, that is, the HTML and CSS code are loaded into the browser to completely display the entire page according to the HTML and CSS rules. However, extjs is totally different from HTML and CSS rendering processes. Although the extjs interface is finally displayed in HTML and CSS, these HTML and CSS are not downloaded from the server, it is generated dynamically by the extjs engine. Therefore, the rendering of extjs is actually a dynamic generation process, rather than a static loading process. Understanding this will be of great guiding significance in the process of learning extjs programming.
Window window: The window in extjs is not a real windows window. In essence, it is only a layer that uses CSS for formatting. In terms of appearance and behavior, it is similar to the display area of a real windows window. When it comes to the display area, we should think of the Panel. In fact, in the inheritance level of extjs, the window component is inherited from the Panel component. If you understand that the essence of the window in extjs is a layer, you must know that it is different from the real windows window, for example, the idea of dragging the extjs window out of the browser window is obviously not feasible. As long as you know this key point, it will bring great help to do Window Programming in extjs.
Dialog Box Dialog: The dialog box is also a common feature in program development. General dialog box, selection dialog box, input dialog box, and some special custom dialog box. Extjs also provides very beautiful And customizable dialogs. Like the windows in extjs, the essence of these dialogs is the result of formatting using CSS. Therefore, when using these dialog boxes, pay attention to the similarities and differences between these dialog boxes and the real Windows dialog box, and use them flexibly.