Shulou(Shulou.com)06/01 Report--

The editor will share with you what Ext.Component is in Ext.js4.2.1. I hope you will get something after reading this article. Let's discuss it together.

One: brief introduction

Ext.Component is the base class for other components and can be said to be the most basic class in the Ext.js framework.

The Component base class supports hide/show and enable/disable basic event operations.

Each component has a unique xtype. You can get the relevant information through getXType or isXType.

All component are constructed by Ext.ComponentManager, so you can get related component through Ext.getCmp (id).

Ext.ComponentQuery is a CSS selector such as: Ext.ComponentQuery.query ('# myform textfield') returns all textfield under component where id is myform.

All subclass components automatically participate in the life cycle of Ext component. This includes creating, rendering and destroying. These are provided by the Ext.Container class.

While Ext.Comtainer is created, components can be added through its items configuration item, and in addition to this method, it can also be dynamically added to the container through Ext.Container 's add method.

II: introduction to Config item

1. AutoEl: create elements within the Component through a tag or Dom definition.

Such as:

Ext.onReady (function () {

Var com=Ext.create ('Ext.Component', {

RenderTo: Ext.getBody ()

AutoEl: {

Tag:'a'

Html: 'click me'

Href:'_javascript:alert (% 22ClickedIn% 22)'

}

});

Alert (com.getEl ())

});

Generated HTML:

Click me

2.autoRender

This property is mainly aimed at non-floating component, which is used instead of renderTo and used in conjunction with autoShow to specify the rendering location according to the constructor. If true, render to body.

Ext.onReady (function () {

Var com=Ext.create ('Ext.Component', {

/ / renderTo: Ext.getBody ()

AutoRender:true

AutoShow:true

AutoEl: {

Tag:'a'

Html: 'click me'

Href:'_javascript:alert (% 22ClickedIn% 22)'

}

});

});

3.autoScroll

Whether to display the scroll bar

4.autoShow

For floating components or components that use autoRender

5.baseCls

Specifies the CSS class for the basis of the component. The default is' xmurayerent.'

6.border

Specifies the border size of the component, which can be a specified number or CSS format such as:'10 5 3 10'(top, right, bottom, left)

7.cls

Customer customized CSS class

8.columnWidth

The width of the column layout, which can be a number or a percentage

9.constrain:

Indicates that it is used to restrict the window from moving beyond the browser boundary

10. ConstrainTo

Restrict floating components to one area

11.contentEl

Take an existing HTML element as the content of the current component, such as:

ContentEl: 'content'

RenderTo: 'content-div'

It means to move the content whose id is content under content-div.

12.defaultAlign

Alignment to align this element with another element through the specified anchor point. The default is "tl-bl?"

Upper left corner of tl (top left corner)

The center of the upper boundary (top edge) of t

Upper right corner of tr (top right)

The center of the left boundary (left edge)

The center of element c (center)

R Center of the right boundary (right edge)

Lower left corner of bl (bottom left)

B the center of the lower boundary (bottom edge)

Lower left corner of br (bottom right)

13.disabled

14.disabledCls

Class class in case of failure

15.draggable

Whether it can be dragged for a floating window.

16.fixed

17.floating

Floating window. Window and Menu default to floating window.

18. FormBind

More form state to bind the state of the current component

For example, me.buttons = [{

Text: 'save'

FormBind: true

Scope: me

Handler: me.onRegister

}, {

Text: 'reset'

Scope: me

Hidden: me.isUpdate

Handler: me.onReset

}, {

Text: 'off'

Scope: me

Handler: me.onCancel

}]

The save button is tied to the validation of the form.

19.height

20.hidden

21.hideMode:String

'display' or 'display:none'

'visibility' or 'visibility:hidden'

'offsets': is visible in the specified area

22.html

HTML fragments, or Dom definitions, are used for layout. HTML content is added after the Component is rendered.

Such as: {

Xtype: 'panel'

Border: false

Html:''

}

23.id

ItemId is used for components under container. This also shows that itemId is only a local component identification name, and there is no need to follow uniqueness globally.

Id: Ext.getCmp (id)

ItemId:Ext.getCmp (id) .getComponent (itemId)

24.lieteners

Add event handlers during initialization.

25.loader

Load external content for the component

Such as Ext.create (

'Ext.Component', {

Loader: {

Url: 'content.html'

AutoLoad: true

}

RenderTo:Ext.getBody ()

}

);

26.margin

27.maxHeight

28.masWidth

29.minHeight

30.minWidth

31.overCls

Sets the CSS class when moving above the element of data

32.overflowX

33.overflowY

34.padding

35.plugins

Add components to component

Such as xtype: 'grid'

Region: 'center'

ViewConfig: {

EnableTextSelection: true

}

Plugins: [Ext.create (

'Ext.grid.plugin.CellEditing', {

ClicksToEdit: 1

/ / set to click cell editing

})]

36.region

When border layout, define different areas, in which there must be a center area

North--top

Sourth--bottor

East--right

West--left

Center--center

37.renderTpl

Rendering template, used for custom components, Ext template class is a very powerful class, can support subtemplates, template expressions and other functions. The template here is to outline the skeleton of the entire component.

Component's renderTpl is only a div because it is a base class, and the specific content needs to be determined by a specific subclass.

If additional elements are needed to create a component, they will now be processed by a XTemplate (tenderTpl). The data for XTemplate is read from the renderData object, and the generated elements are accessible through the renderSelectors property of the component instance.

The scope of renderSelectors is based on base div elements and standard css selectors can be used. These element references are part of the component life cycle and will be automatically removed when the component is destroyed.

When defining a new Component, you can override the original renderTpl:'div' configuration item properties.

Such as: renderTpl:'

'

38.renderData

Provides renderTpl with data that fills in the following properties of the component

Id,ui,uiCls,baseCls,ComponentCls,frame

39.renderSelectors

40.renderTo

41.resizable

Resize

42.shadow

43.shadowOffset

44.style

Custom styles for component elements

45.width

46.xtype

Items: [

Ext.create ('Ext.form.field.Text', {

FieldLabel: 'Foo'

})

Ext.create ('Ext.form.field.Text', {

FieldLabel: 'Bar'

})

Ext.create ('Ext.form.field.Number', {

FieldLabel: 'Num'

})

]

= = >

Items: [

{

Xtype: 'textfield'

FieldLabel: 'Foo'

}

{

Xtype: 'textfield'

FieldLabel: 'Bar'

}

{

Xtype: 'numberfield'

FieldLabel: 'Num'

}

]

After reading this article, I believe you have a certain understanding of "what is Ext.Component in Ext.js4.2.1". If you want to know more about it, you are welcome to follow the industry information channel. Thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.