EXTJS 5 Study Notes 2, extjs Study Notes 2

EXTJS 5 Study Notes 2, extjs Study Notes 2

1. The Components Hierachy Component System

  2. XTypes and Lazy Instantiation xtype and delay Initialization1) Each component has a symbolic name xtype 2) initialize now: Ext. create () Delayed initialization: xtype 3. Show and hide Showing and Hiding1) All components have built-in show () and hide () methods. 2) the hidden css is display: none by default. You can modify it through hideMode configuration. 4. Floating Components1) floating components are independent of the absolutely positioned Document Stream and do not participate in the Container layout. 2) All components can be changed to floating components through floating configuration. 3) floating components when show () the method is automatically rendered to document when it is called. 4) configurations and methods related to floating components: draggable, shadow, alignTo (), center () 5. Creating Custom Components1) Composition or Extension aggregation or Extension 2) Subclassing subclass. ext. base is the cornerstone of all EXTJS classes. 3) Template Methods. EXTJS uses the Template Method mode to delegate subclass-specific methods to subclass instances. B. in a specific stage of the component lifecycle, classes in each inheritance chain are responsible for part of their responsibilities. c. componenet. render () initializes the rendering stage of the component and cannot be overwritten. render () calls onRender (), and subclasses can override the onRender () method to implement the unique display style Ext. define ('My. own. component ', {extend: 'ext. component ', onRender: function () {this. callParent (arguments); // perform additional re Ndering tasks here...}); d. Note that you must use template methods to perform business operations in important stages of the lifecycle, rather than in events. Because the event can be suspended or blocked by the program. e. The following template method can be overwritten during subclass construction.

• initComponent Called by constructor; used for initial data, Configuration Creation, Event Response binding, etc.
• beforeShow Called before the component is displayed
• onShow Additional operations can be added during the display process. Once the onShow () method of the parent class is returned, the component is visible.
• afterShowCalled after the component is displayed
• onShowCompleteCall after the afterShow () method of the component is complete.
• onHide Additional operations can be added during the hiding process. Once the onHIde () method of the parent class is returned, the component is hidden.
• afterHide Called after the component is hidden
• onRender Allows additional operations during component Rendering
• afterRender Allows additional operations after component rendering. The style, visibility, and status of components have taken effect at this stage.
• onEnable You can add additional operations when the component is enabled. OnceonDisable() Method return, and the component is enabled.
• onDisable You can add additional operations when the component is disabled. OnceonDisable() If the method is returned, the component is disabled.
• onAdded You can add additional operations when a component is added to a container. In this phase, the component is already in the items set of the container. OnceonAdded() If the method returns, the ownerCt reference already exists.
• onRemoved Allows additional operations to be performed when a component is removed from the container. In this phase, the component has been removed from the items set of the container but has not been destroyed. OnceonRemoved() If the method returns, the ownerCt reference disappears.
• onResize Additional operations can be added during component resize.
• onPosition Allows additional operations to be added during component positioning.
• onDestroy Additional operations can be added during component destruction. OnceonDestroy() The component is destroyed when the method is returned.
• beforeDestroy You can add additional operations before the component is destroyed.
• afterSetPosition Additional operations can be added after the component location is set.
• afterComponentLayout You can add additional operations after the widget layout is complete.
• beforeComponentLayoutYou can add additional operations before the widget layout is complete.