The ExtJS 4 application interface is composed of a number of widgets called "Components ( Component
)", all of which are Ext.Component
subclasses, Ext.Component
providing lifecycle management including initialization, rendering, size and size management, destruction, and so on, which makes all Ext.Component
are automatically shared by the sub-classes. ExtJS provides a wide variety of components, each of which can easily be expanded to create custom components. The Component Hierarchy component level
A container ( Container
) is a special component that can accommodate other components. The usual applications are composed of many nested components that have a tree-like structure, which is the hierarchy of components. The container is responsible for managing the lifecycle of subcomponents including initialization, rendering, size and size management, and destruction. Usually the topmost component of the application is Viewport
then there are other containers or components nested within it:
Subcomponents are added to the container through the container items
, and the following example Ext.create
creates two by means of a method Panel
and adds them as a subassembly to Viewport
the medium:
var childPanel1 = Ext.create(‘Ext.panel.Panel‘, { title: ‘Child Panel 1‘, html: ‘A Panel‘});var childPanel2 = Ext.create(‘Ext.panel.Panel‘, { title: ‘Child Panel 2‘, html: ‘Another Panel‘});Ext.create(‘Ext.container.Viewport‘, { items: [ childPanel1, childPanel2 ]});
The container Layout Manager
manages the dimensions and location of the subcomponents through the Layout manager (). For details on layouts and containers, you can view the ExtJS 4 layouts and containers xtypes and lazy instantiation xtype and deferred loading
Each component has a McCartney called xtype
, for example Ext.panel.Panel
xtype
panel
. All components xtype
are listed in API Docs for Component. The above example shows how to add a component that has already been initialized to a container. In large applications, this approach is not feasible, because this method requires that each component is initialized, but in large applications, because of the way in which some components may not be used at all (for example, a 100-page application, a user logged in only to operate two pages, At this point, it is unreasonable to initialize the components of the other 98 pages, for example, a used TabPanel
application, TabPanel
each tab can be rendered when the user clicks on it. This is the reason for the introduction xtype
of the mechanism, which allows xtype
a container's subcomponents to be defined beforehand, and then initialized when it is really needed.
The following sample code TabPanel
shows the lazy loading and deferred rendering, each tab has a response Function listener tab Rendering render
event, the rendering will pop up a dialog box to tell the current tab has been rendered
Ext.create (' Ext.tab.Panel ', {renderTo:Ext.getBody (), height:100, width:200, items: [{/ /explicitly define the xtype of this Component configuration. This tells the Container (the tab panel in this case)//to instantiate a Ext.panel.Panel when it deems nece Ssary xtype: ' Panel ', Title: ' Tab One ', HTML: ' The first tab ', listeners: { Render:function () {Ext.MessageBox.alert (' Rendered one ', ' Tab one was Rendered. '); }}}, {//This component the configuration does not has an xtype since ' panel ' is the default//Xtype for all Component configurations in a Container title: ' Tab ', HTML: ' The Second tab ', listeners: {render:function () {ext.messagebox.a Lert (' Rendered one ', ' Tab. ' Rendered '); } } } ]});
Running the code, the first tab of the Render dialog pops up immediately, because the first tab is activated by default, so its parent container TabPanel
immediately initializes and renders it
Without clicking on the Second tab, its conversation will never pop up, which means the tab will not be rendered until it is used, and the tab render
event will not be triggered until the tab is activated.
Showing and hiding Show and hide
All components have built-in show
and hide
methods. The default CSS style is applied display: none
, and can be hideMode
changed by changing the
var panel = Ext.create(‘Ext.panel.Panel‘, { renderTo: Ext.getBody(), title: ‘Test‘, html: ‘Test Panel‘, hideMode: ‘visibility‘ // use the CSS visibility property to show and hide this component});panel.hide(); // hide the componentpanel.show(); // show the component
Floating Components Floating Component
Floating components are positioned outside the document flow, using the absolute positioning properties of the CSS, not controlled by the layout of the parent container. Some components, for example Window
, are floating by default, and any component can be floating
configured to float by property.
var panel = Ext.create(‘Ext.panel.Panel‘, { width: 200, height: 100, floating: true, // make this panel an absolutely-positioned floating component title: ‘Test‘, html: ‘Test Panel‘});
The above code instantiates an Panel
object, but does not render it. Typically a component has either a renderTo
property configuration rendering to a location, or a container is responsible for rendering it as a subassembly, but the floating component of this example does not need renderTo
or need to be a subcomponent. The first time a floating component invokes a show
method, it is automatically rendered to the DOM's document.body:
1
panel.show(); // render and show the floating panel
There are several properties that are noteworthy when using floating components:
draggable
-Allows floating components to be dragged and pulled
shadow
-Customize the shadow effect of floating components
alignTo()
-Align floating components to a specific element
center()
-Center The floating component relative to the container
Creating Custom components composition or Extension combination or inheritance
When creating a new UI class, you must decide whether the class refers to an instance of another component or extends the component.
It is recommended to extend the closest component to add the functionality that you need, because you can automatically get the original automatic lifecycle management capabilities of the component using inheritance, including on-demand rendering, dimension location management provided by the layout manager, automatic destruction removed from the container, and so on.
Extending an existing component makes the extended component subordinate to the component hierarchy, which is much easier to refer to and take charge of an instance of the ExtJS component than an external class. Subclassing of sub-class
The ExtJS class system makes it easy to extend an existing component. The following code demonstrates the creation Ext.Component
of a subclass, without adding any functionality:
123
Ext.define(‘My.custom.Component‘, { extend: ‘Ext.Component‘});
Template Methods Templates method
ExtJS uses the template method pattern to delegate special behavior to subclasses.
This means that each class on the inheritance chain can "contribute" a fragment containing a particular logic into the component's life cycle. Each class implements its own special behavior while allowing other classes on the inheritance chain to continue to contribute their own logic.
An example is the render
method. render
is a private method, defined in Component
the parent class AbstractComponent
, that is render
responsible for the initialization of the render phase during the component life cycle. render
cannot be overridden, but render
is called in the process, which onRender
onRender
allows subclasses to be implemented, where subclasses can add logic that belongs exclusively to subclasses, each of which onRender
must call the parent class before its own extra logic onRender
.
Indicates onRender
how the template method works.
render
Method is called first (this is done by the layout manager), the render
method cannot be overwritten, it is implemented by the related base class in ExtJS, it invokes the current subclass this.onRender
(if the current subclass is implemented onRender
), which onRender
causes the parent class to continue calling the onRender
continues to invoke the parent class, and finally the classes on each inheritance chain contribute their own feature fragments and control back to the render
method.
Here is an onRender
example of implementation
Ext.define(‘My.custom.Component‘, { extend: ‘Ext.Component‘, onRender: function() { this.callParent(arguments); // call the superclass onRender method // perform additional rendering tasks here. }});
It is important to note that many template methods have a corresponding event. For example, the render
event is triggered when the component finishes render
. The best way to create subclasses is to use a template method rather than an event, because the template method is bound to be executed and the event can be interrupted (here is my supplement: When to use the event, when to use the template method?). The template method is for all instances of the subclass that you create, and if you need to add a feature fragment that is really required by all instances, then be sure to put it in the template method, if it is a particular feature required by an instance, implement it with an event that can be implemented on an individual object)
The following is a list of the Component
template methods that can be implemented in subclasses:
initComponent
This method is called by the constructor, which is used to initialize the data, set the configuration, add events
beforeShow
This method is called before the component is displayed.
onShow
Allows the component to display additional behavior, after calling the parent class onShow
, the component becomes visible
afterShow
This method is called after the component display is complete
onShowComplete
This method is afterShow
called when execution is complete.
onHide
Allows the component to be hidden when attached behavior, after calling the parent class onHide
, the component becomes invisible
afterHide
This is placed after the component is hidden and is called
onRender
Allow additional behavior during render phase
afterRender
Allows the addition of the behavior at the end of rendering, at which point the component Element
has been given a style, and the added CSS class has been added, and the status of the display and the enabled or not is marked complete
onEnable
Allows attaching behavior when an action is enabled, after calling the parent class onEnable
, the component becomes enabled
onDisable
Allows attaching behavior when operation is disabled, after calling the parent class onDisable
, the component becomes disabled
onAdded
Allows a component to be added to a container when the additional behavior, at this stage, the component is already in the parent container's items, after calling the parent class onAdded
, the OWNERCT reference is set, if configured Ref,refowner is also set
onRemoved
Additional behavior when a component is allowed to be removed from the parent container, at which point the component has been removed from the items in the parent container, but has not been destroyed (if the parent container's Autodestroy is set to true, or if the delete operation is set to True for the second parameter of the Remove function). Component is destroyed), after calling the parent class onRemoved
, OWNERCT and Refowner will be removed
onResize
Allowed to change size when attaching behavior
onPosition
Allow additional behavior when setting a location
onDestroy
Allow additional behavior when destroying, after calling the parent class onDestroy
, the component is destroyed
beforeDestroy
Called before the component is destroyed
afterSetPosition
Called after the component location is set
afterComponentLayout
Called when the component layout is complete
beforeComponentLayout
Component layout before calling
Which class to Extend extend that category
Choosing the most appropriate class inheritance is a problem that affects efficiency, and the functionality that the base class can provide is also a problem. Now there's a tendency to be whatever UI components Ext.Panel
inherit from
The Panel class has many capabilities:
- Border
- Header
- Header Tools
- Footer
- Footer buttons
- Top Toolbar
- Bottom Toolbar
- Containing and managing child components
If these features are not required, inheritance Ext.Panel
is a waste of resources. Component components
If you create a UI component that does not need to contain any other components, such as components that simply encapsulate the HTML fragment to meet the requirements, the recommended extension Ext.Component
, such as the following example encapsulates the HTML image element, allows setting the src of the image, and the completion of the image loading triggers load
Event:
Ext.define(‘Ext.ux.Image‘, { extend: ‘Ext.Component‘, // subclass Ext.Component alias: ‘widget.managedimage‘, // this component will have an xtype of ‘managedimage‘ autoEl: { tag: ‘img‘, src: Ext.BLANK_IMAGE_URL, cls: ‘my-managed-image‘ }, // Add custom processing to the onRender phase. // Add a ‘load’ listener to the element. onRender: function() { this.autoEl = Ext.apply({}, this.initialConfig, this.autoEl); this.callParent(arguments); this.el.on(‘load‘, this.onLoad, this); }, onLoad: function() { this.fireEvent(‘load‘, this); }, setSrc: function(src) { if (this.rendered) { this.el.dom.src = src; } else { this.src = src; } }, getSrc: function(src) { return this.el.dom.src || this.src; }});
Usage:
var image = Ext.create(‘Ext.ux.Image‘);Ext.create(‘Ext.panel.Panel‘, { title: ‘Image Panel‘, height: 200, renderTo: Ext.getBody(), items: [ image ]})image.on(‘load‘, function() { console.log(‘image loaded: ‘, image.getSrc());});image.setSrc(‘http://www.sencha.com/img/sencha-large.png‘);
This example can be used in real-world applications only as an example Ext.Img
. Container container
It is a good choice if the UI component needs the ability to contain other components, but does not need Panel
that versatility Ext.container.Container
. Use it with a little attention, and remember to use Layout
management subcomponents.
Ext.container.Container
The following template methods are available:
onBeforeAdd
This method is called before adding a subcomponent, and the method is passed into the added subassembly, you may make some modifications to the child component, or do some preparation for the container itself, and returning false will break the add operation.
onAdd
This method is called when the new component is added, and the method passes in the newly added component, which can be used to update the internal structure of the dependent subassembly state
onRemove
The child component is called after it is deleted, and is useful for onAdd
similar
beforeLayout
Method that the component is called before its subcomponents are laid out
afterLayout
Method that the component is called after its subcomponents are laid out
Panel panels
If the UI component of the requirement must have Header,footer or toolbar, it is Ext.panel.Panel
more suitable for
Note Panel
is also a container, and you need to Layout
manage sub-components
The Panel
components from the expansion are generally related to specific applications, often aggregating other components, typically providing methods for manipulating internal components, such as buttons that operate internal components on toolbar, etc.
Panel
The following additional template methods are available:
afterCollapse
Called after the component is collapsed.
afterExpand
Called after component expansion, corresponds to Aftercollapse
onDockedAdd
Called after a subassembly has been added to the toolbar
onDockedRemove
Called after a subassembly has been removed from the toolbar
ExtJS 4 Components