ExtJS framework study notes

2017-6-26
Ext.Message.show() is a function for prompting information, which is very powerful, because it can add other components in the prompt box, such as prompt, button, etc.;
when there is complex content, it can be used show function, when the content is not very complicated, you can select the corresponding prompt function according to the situation; Ext.Message.wait () is an
automatic progress loading function;
TaskManager is a management class; This kind of message window class, Ext.Msg can also be used in the same way. This is an asynchronous message window. Asynchronous: It means that although the window of the message has not been closed when js executes to this step, the program will continue to run and will not be blocked. Therefore, when the program needs to obtain information such as messageBox, it cannot use this class to generate a message window or wear a callback function. There are Ext.ProcessBar progress update components such as alert, confirm, prompt, show, etc. , and support two formats of update bars: automatic update and manual update. When updating manually, the user needs to display, update and clear the update bar for the update design. During automatic update, the user only needs to trigger the update bar time, and after the time expires, the component will automatically stop the refresh process. When using, first create an Ext.ProcessBar object or a new Ext.ProcessBar object through the Ext.create function, and then let the object call the wait function to display the progress bar. Ext.toolbar








This is a component that generates toolbars. When using it, you need to create an Ext.toolbar.Toolbar object. When creating, use renderTo to set the position where the object will be placed. After generating a Toolbar object, call the add function of the object to add buttons, etc.
Ext.menu
This is a component that generates a menu. First of all, the menus are loaded in the toolbar, so generally, the menu will be added to the toolbar after a toolbar is generated. Similarly, when using this component, you need to create a menu object and set the content of the menu through items. Of course, the content of the menu can also be a menu, thus realizing a multi-level menu. Of course, the content of the menu can also be other components.
Ext.form
form component. It is used to generate form components, and also has the functions of restricting the input content, validating the input content, submitting the content of the form, and loading data.
defaults is used to set the default properties of the table, you can set the same properties for all form elements in this place.
items to generate specific content, such as text boxes, radio buttons, etc.
The xtype in each item is to set the style of the form element: input box, radio button, etc.
Ext.QuickTips.init() This is used to enable the HTML tag with the data-qtip attribute to display its content when the mouse is moved up, and the displayed content is the value of the data-qtip attribute. Of course, quickTips is just a There are many kinds of tips, and many other kinds of tips;

2017-6-27
Ext.panel
Ext.panel.Panel extends from Ext.container.Container, which is used for application layout and can also be used as a container for each component, that is, you can This component is added to the panel. The standard panel has 5 components:
title, tbar, bbar, html, tools, buttons
Among them, tools are mainly used to set various buttons in the upper right corner of the panel head. Each button is an Ext.panel.Tool object. Similarly, the use of panel is similar to that of form. Objects are created directly. renderTo to specify the position where the component is displayed on the page.
The panel component can load remote pages through the autoLoad property, and use contentEl to load local resources.
Similar to form, the penal component uses items to import other components, which can be date components or local resources.
The penal component uses the layout attribute to set the window content layout, which can be auto, fit (adaptive), accordion (collapsed layout: only one inner window is expanded), or card (card layout).
Another way to set the layout is to use the ANchor anchor layout, but this method not only needs to set the anchor in the layout attribute, but also needs to set the Anchor attribute in the child component (which can be relative to the size of the parent panel, offset Quantity)
Another layout method is Absolute, which is similar to anchor, except that Absolute sets the x, y properties in the sub-panel.
Column layout is another useful layout method. You can set columnWidth in the child component to determine its width.
The table layout can specify the number of columns (column), spanning rows (rowspan), and spanning columns (colspan) of subcomponents. Rowspan and colspan can only be set in the properties of child components, while column is set in layout.
The border layout is to divide the panel into five parts: east (east), west (west), south (south), north (north), center (center), and specify the position of the subcomponent in the region property of the subcomponent. Note that child components do not necessarily need to be panels. It can also be a datapicker (time selection) component.
There are two types of Box layouts: vbox (vertical) and hbox (horizontal), you can set align in the layout to control the position and size of the child elements, and set flex in the child elements to adjust the size of the entire component. (The size of the sub-panel is determined by comparing the flex of the sub-element with the sum of the flex values ​​of all sub-elements)
Ext.container.Viewport
This component does not need to set renderTo, because the component uses the document body as the rendering object, that is to say The panel generated by this component is inserted directly into the body, and is placed at the end of all child elements of the body when tested. The component's panel is always filled with the entire browser interface (when the browser interface changes, the surface changes). Its layout can refer to the layout of Ext.panel.Panel.
Ext.tab.Panel
This is a tab component. Generally, there are multiple tab colleagues, but only one is active.
The Ext tool function
Ext.get
obtains the Element in HTML and the Element element in the DOM. The parameter is the ID of the Element, it can also be a DOM node, or it can be an existing HTML Element. The return value is an Element object.
Ext.select
obtains the object to which the style sheet is applied based on CSS.
Ext.getCmp is
used to obtain the function of the component. It can only obtain the component, but cannot obtain the HTML elements in the body, such as div. Note that you can only get components by ID.
Ext.getDom
gets the HTMLElement by the specified ID or DOM node or Element element.
Ext.each
This function is to iterate over an array or collection, and call the specified function to process the objects in the collection respectively. The parameters are a data, a handler function and an optional specified range. It should be noted that the form of the processing function must be in the form of fn (item, index, allItems), item is the element in the collection for each iteration, index is the subscript of each iteration, and allItems is the iteration Collection
of events of
ExtJS The event binding processing function of ExtJS can be realized by the attachEvent function of multiple buttons. There are two parameters: the event in the form of a string and the processing function. It can also be an addListener function with the same parameters.
ExtJS supports custom events. If you want to add event support for a custom class, you need to make the class inherit the utility class Ext.util.Observable.