Extjs getting started

1. Ext introduction. 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 the Ajax application framework of RIA (rich Internet application system. Extjs is written in JavaScript and is mainly used to create a front-end user interface. It is a front-end Ajax framework unrelated to background technology. Therefore, extjs can be used in. net, Java. PHP and other development languages. 2. EXT library file description. to use extjs, you must first obtain the extjs library file. The framework is open-source and can be downloaded directly from the official website. Decompress the package and you will see the following files: adapter: maps the third-party underlying Library (including the underlying library provided by ext) to the underlying Library Supported by Ext. Build: All the compressed ext Source Code (which is classified and stored). Docs: API help document examples: Provides the small experiment resources: extui resource file directory created using extjs technology, CSS and image files are stored here. Source: all source code without compressed ext (which is classified and stored), which complies with the lesser GNU 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: Compressed ext core components, including all classes under sources/core. Ext-core-debug.js: unzipped ext core components, including all classes under sources/core. 3. The extjs application extjs needs to introduce the extjs style and extjs library file on 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. The ext-base.js represents the framework base library, and the 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. A page that uses the extjs framework generally includes the following statements: <LINK rel = "stylesheet" type = "text/CSS" href = "extjs/resources/CSS/ext-all.css"/> <***** type = "text/JavaScript "src =" extjs/adapter/EXT/ext-base.js "> </SCRIPT> <***** type =" text/JavaScript "src =" extjs/ext-all.js "> </SCRIPT> after the extjs library file and page content are loaded, extjs will execute Ext. the function specified in onready. In general, the user's extjs applications are from ext. from onready, the code for using the extjs application is roughly as follows: 6. extjs core component 1. component is the component, and ext is used in ext. the component class defines components. Other specific components and controls inherit the class implementation. Component defines a standard ext component lifecycle management: creation, rendering, and destruction. It also contains some basic attributes and behaviors of all components, such as display or hide, enable or disable. You can use Ext. getcmp to obtain a component. All components can be placed in Ext. container, and delay rendering is automatically supported. All visualization components in ext that need to be rendered and displayed in a layout must inherit component or its subclass. Each component has an ext component type value, that is, xtype *. You can use the getxtype method to obtain the xtype value of the component. isxtype is used to determine whether a component belongs to the specified type. 2. boxcomponent. The parent class is Ext. component. It is the base class of all box components and the base class of all components with boundary attributes. All container classes inherit Ext. boxcomponent *: autoheight automatic height adaptation. If it is set to true, the style Height: 'auto' is used. Otherwise, the height is fixed. The default value is false. autowidth automatic width adaptation, if it is set to true, the style width: 'auto' is used. Otherwise, the height is fixed. The default value is the false3.container container parent class Ext. boxcomponent. Is the base class of all components with container functions in ext. Container components include some basic actions for processing subitems and are responsible for adding, inserting, and deleting these subitems. The container provides the layout support function to visually render sub-components in the container through the layout. This class is used to inherit from other container classes. Generally, instances of this class are not directly created using the new keyword. 7 using panel is the basis of extjs controls. Many advanced controls are extended based on panels, and most other controls are directly or indirectly related to them. Generally, the application interface is formed by a panel in different ways. Panel components: a top toolbar (tbar), a bottom toolbar (bbar), a panel header (header), a bottom toolbar (bottom), and a panel main area (body. The Panel class is Ext. Panel, and its xtype is panel. For example: panel2.html *: whether autoscroll automatically adds a scroll bar. If the value is true, the style overflow: 'auto' is used in the body element of the Panel to display a scroll bar as needed. If it is set to false, the scroll bar is not displayed, leading to excessive content truncation. The default value is false. When the value of hidecollapsetool in collapsible is true, whether to display the button to close/enable the Panel. The default value is false7.1. The toolbar can contain a toolbar, which can be located at the top and bottom of the Panel, the toolbar in ext is composed of Ext. toolbar class. Is the base class of other toolbar. Buttons, text, and separators can be placed on the toolbar. You can directly add predefined toolbar options to the panel header using the Panel tools configuration options. You can also add various toolbar options on the top or bottom toolbar. (Eg. The items in the toolbar of panel2.html) ext are mainly defined by the following classes: ext. toolbar. button -------- button, xtype is tbbuttonext. toolbar. textitem --------- text, xtype is tbtextext. toolbar. fill ------------ fill area, xtype is tbfillext. toolbar. separator --------- delimiter, xtype is tbseparatorext. toolbar. spacer ----------- a space. The xtype is tbspacerext. toolbar. splitbutton -------- split button, xtype is tbsplit7.2 select panel tabpanel select panel that contains the tab, a panel contains multiple tabs, at the same time the active tab can only be one. The option panel is defined by the Ext. tabpanel class in Ext. This class inherits from the panel directly, so it is actually a panel. EXT does not define a new class for the tab in the option panel. Each tab is actually a normal panel. (Eg. Tabpanel.html) 7.3 view area viewport in the front instance, in order to display a panel, we need to add a <div> on the page and then render the ext control to this Div. Viewport represents the display area of the entire browser. The object is rendered to the body area of the page and will automatically change with the size of the display area of the browser. Only one viewport instance can be displayed on a page. Eg. Ext. onready (function () {New Ext. viewport ({enabletabscroll: True, layout: "fit", items: [{Title: "Panel", HTML: ", bbar: [{text:" button1 "}, {text: "button2"}]};}); viewport does not need to be specified in renderto, and we also see that viewport is indeed filled in the display area of the entire browser, the area size changes with the browser display. Viewport is mainly used on the main page of a program. You can use different la s to build the main interface of different styles of applications. The commonly used la s on viewport include fit and border. (Eg. Viewport.html) 8 window, dialog box and prompt box 8.1 window window8.1.1 window basic application extjs window is composed of Ext. window class definition, which inherits from ext. panel. Therefore, a window is actually a special panel, which contains floating, drag, close, maximize, and minimize features. (Eg1_1_1_html) 8.1.2 window grouping window is managed by group. You can operate on a group of windows. By default, all windows are in the default Ext. windowmgr group. The window group is defined by Ext. windowgroup, which includes bringtofrong, getactive, hideall, sendtoback, and other methods to operate windows in the group. (Eg1_windowgroup.html) 8.2 dialog box messagebox8.2.1 the basic application ext dialog box is encapsulated in ext. messageBox class, which is also abbreviated as Ext. MSG, you can directly use Ext. messageBox or ext. the MSG class directly calls the corresponding dialog box method to display the beautiful ext dialog box. The message box MessageBox is asynchronous, which is different from the normal alert method in JavaScript (which will interrupt the operations of the browser ). When a MessageBox is displayed, other code execution is not affected. Therefore, if you need to execute some code after feedback on the message box, you must use a callback function. 1. ext. messageBox. alert ("Please note", "this is the prompt box of extjs"); 2. ext. messageBox. confirm ("Please confirm", "whether to delete the specified content", function (button, text) {If (Button = "yes ") {alert ("deleted successfully") ;}}); 3. ext. messageBox. prompt ("input prompt box", "Enter your New Year's wishes:", function (button, text) {If (Button = "yes ") {alert ("your New Year's wish is:" + text) ;}else {alert ("you gave up the operation") ;}}); in practical applications, you can directly use the show method of MessageBox to display the custom dialog box. Eg, function save (button) {If (Button = "yes") {// execute the data save operation} else if (Button = "no ") {// do not save data} else {// cancel current operation} Ext. messageBox. show ({Title: 'save data', MSG: 'You have performed some data operations. Do you want to save changes to the current content? ', Buttons: ext. MSG. yesnocancel, FN: Save, icon: ext. messageBox. question}); 8.2.2 The prompt box tip indicates that when we move the mouse over an element on the page, on the page, a prompt area indicating the element and suspending it on the screen appears. When you move the mouse away from the element, the prompt box is automatically hidden. Tip inherits panel, that is, panel is used in extjs to display prompt box information. Eg, ext. onready (function () {var tip = new Ext. tip ({HTML: "this is a simple prompt box"}); var El = ext. get ("hello"); El. on ({"Mouseover": function () {tip. showby (EL) ;}, "mouseout": function () {tip. hide () ;}}) ;}); <Div id = "hello"> prompt box </div> extjs is based on the tip class, provides tooptip for element prompt information and quick tip for prompt on the page. To directly use tooptip, you do not need to manually hide and display the information prompt box in the element's Mouseover and mouseout event response functions. Ext. onready (function () {var El = ext. get ("hello"); var tip = new Ext. tooltip ({HTML: "this is a simple prompt box", target: El });});................ 9 layout9.1 basic applications the so-called layout refers to the distribution and arrangement of neutron elements in container components. All the container components of ext support layout operations, and each container has a corresponding layout. The layout is responsible for managing the sorting, combination, and rendering methods of the sub-elements of the container components. The layout base class of extjs is Ext. layout. containerlayout. Other layout types inherit this class. The extjs container component contains a layout and layoutconfig configuration owner *. These two attributes are used to specify the layout and detailed configuration information of the container. If the layout of the container component is not specified, containerlayout is used as the layout by default. For some layoutconfig, layoutconfig is required, and for others, layoutconfig is not required. Ext. onready (function () {New Ext. panel ({renderto: "Hello", width: 400, height: 200, layout: "column", items: [{columnwidth :. 5, // width: 100 can be used to specify the specific width title: "Panel 1" },{ columnwidth :. 5, Title: "Panel 2"}]}); some container components in ext have already specified the layout used. For example, tabpanel uses the card layout and formpanel uses the form layout, the table in gridpanel uses column layout. When using these components, we cannot specify another layout for these container components. 9.2 border regional layout border layout is defined by the class Ext. layout. borderlayout. The layout name is border. This layout divides containers into five areas: "East", "South", "West", "North", and "Middle", respectively from east, south, west, north, center to indicate that when adding sub-elements to the container, we only need to specify the location of these sub-elements through region configuration options, the border layout automatically places child elements in the specified position of the layout. (Eg1_viewport.html) 9.3 column layout (same as above)