EXT study Note 1: Structure of the ext SDK package

Extjs is an Ajax framework written in JavaScript and used to create a variety of Web application interfaces on the client. Extjs can be used to develop Ria, that is, rich client Ajax applications. extjs is mainly used to create front-end user interfaces and 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. Extjs was initially based on Yui technology.

Extjs release package directory:

• Adapter: maps the third-party underlying libraries (including the underlying libraries provided by ext) to the underlying libraries supported by Ext.
• Build: All the compressed ext Source Code (which is classified and stored ).
• Docs: API help documentation.
• Exmaples: provides small instances made using extjs technology.
• Resources: ext UI resource file directory, where CSS and image files are stored.
• Source: all source code without compression ext (which is classified for storage) complies with the lesser GNU (lgpl) Open Source protocol.
• Ext-all.js: Compressed ext all source code.
• Ext-all-debug.js: Uncompressed ext all source code (for debugging ).
• Ext-core.js: the core components of the compressed Ext, including all classes under sources/core.
• Ext-core-debug.js: Core Components Without compressing Ext, including all classes under sources/core.

The Application of extjs needs to introduce extjs style and extjs library file in the page, the style file is resources/CSS/ext-all.css, extjs JS library file mainly contains two, adapter/EXT/ext-base.js and ext-all.js, where ext-base.js represents the framework base library, ext-all.js is the core library of extjs. Adapter represents the adapter, that is, there can be a variety of adapters, so you can replace adapter/EXT/ext-base.js with adapter/jquery/ext-jquery-adapter.js, or adapter/prototype/ext-prototype-adapter.js and so on.

Therefore, pages that use the extjs framework generally include the following: HTML code

1. <LinkRel = "stylesheet" type = "text/CSS" href = "extjs/resources/CSS/ext-all.css"/> <ScriptType = "text/JavaScript" src = "extjs/adapter/EXT/ext-base.js"> </SCRIPT> <scriptType = "text/JavaScript" src = "extjs/ext-all.js"> </SCRIPT>

 <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" /> <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script><script type="text/javascript" src="extjs/ext-all.js"></script>

Extjs is composed of a series of class libraries. The extjs class libraries include the following parts:

• Underlying API (CORE): The underlying API provides basic functions such as Dom operations, query encapsulation, event processing, and Dom queryer. Other controls are built on these underlying APIs. The underlying APIs are located in the core subdirectory of the source code directory, including files such as domhelper. js and element. js.
• Widgets: widgets are visual components that can be directly created on pages, such as panels, palette, tables, trees, windows, menus, toolbar, and buttons, in our applications, you can directly use these controls to implement a friendly and Interactive UI of applications. The control is located in the widgets subdirectory of the source code directory.
• Utils: ext provides many practical tools, it is convenient for us to implement functions such as data content formatting, JSON data decoding or anti-decoding, extended functions such as date, array, sending Ajax requests, Cookie management, and CSS management.

The ext component is defined by the component class. Each component has a specified xtype attribute value. You can use this value to obtain the type of a component or define a component of the specified type. Components can be roughly divided into three categories: basic components, toolbar components, forms, and element components.

A widget can be created directly using the new key sub-child. For example, a control window is created using new Ext. window (), and a table is created using new Ext. gridpanel (). Of course, apart from some common components, the constructor generally creates components by passing constructor parameters. A component's constructor can generally contain an object that contains the configuration attributes and values required for creating a component. The component initializes the component based on the parameter attribute values in the constructor. All components are inherited from Ext. component.

You do not need to specify renderto for the viewport, but we also see that the viewport is indeed filled with the display area of the entire browser and will change with the size of the display area of the browser.

Viewport is mainly used for the main interface of an application. Different la s can be used to build the main interface of an application of different styles. Common la s on viewport include fit and border. Of course, other la s are also commonly used when needed.

A normal dialog box generally includes four parameters. For example, the confirm method signature is confirm (String title, string MSG, [function FN], [object scope]), and the parameter title indicates the dialog box title, the msg parameter indicates the prompt information in the dialog box. These two parameters are required. The optional FN parameter indicates the callback function executed after the dialog box is closed, and the scope parameter indicates the execution scope of the callback function. The callback function can contain two parameters: button and text. Button indicates the clicked button, and text indicates the text content entered when the input option is active in the dialog box. In the callback function, we can use the button parameter to determine what options the user has made and use text to read the input content in the dialog box.

Extjs2.0 has a total of 10 la s, including border, column, fit, form, card, and tabel.

Form layout is composed of class Ext. layout. formlayout is defined as form, which is used to manage the layout of input fields in a form. This layout is mainly used to create form fields or form elements in a program. In actual application, ext. form. formpanel uses the form layout by default, and formpanel also creates components related to the <form> label. Therefore, we can directly use formpanel.

The table function in extjs is very powerful, including sorting, caching, dragging, hiding a column, automatically displaying a row number, column summary, cell editing, and other practical functions. The table is defined by Ext. Grid. gridpanel and inherited from panel. Its xtype is grid. In extjs, table grid must contain column definition information and specify the table's data storage store. The column information of a table is composed of Ext. grid. columnmodel is defined, while table data storage is defined by Ext. data. store definition. Data Storage is divided into jsonstore, simplestroe, and groupingstore based on different parsed data.