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

Editor to share with you how to use Ext.container.Container in Ext.js4.2.1, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

One: brief introduction

The base class of any component that contains other components, the most basic operation of the container includes adding, inserting and deleting its internal components.

The most commonly used container classes include Ext.panel.Panel,Ext.window.Window, and Ext.tab.Panel.

You can simply create a container:

/ / explicitly create a container

Ext.create ('Ext.container.Container', {

Layout: {

Type: 'hbox'

}

Width: 400

RenderTo: Ext.getBody ()

Border: 1

Style: {borderColor:'#000000', borderStyle:'solid', borderWidth:'1px'}

Defaults: {

LabelWidth: 80

/ / implicitly create a container through the specified xtype

Xtype: 'datefield'

Flex: 1

Style: {

Padding: '10px'

}

}

Items: [{

Xtype: 'datefield'

Name: 'startDate'

FieldLabel: 'Start date'

}, {

Xtype: 'datefield'

Name: 'endDate'

FieldLabel: 'End date'

}]

});

Two: Layout

The container class assigns the rendering task of the subcomponent to a layout management class, which must be configured into the container through a layout configuration property.

When adding sub-item to containers or dynamically adding components, you need to consider how to organize their layout and size. By default, containers are laid out in order.

Some containers allow the dynamic addition of subcomponents, but the following containers do not: Ext.layout.container.Card,Ext.layout.container.Anchor,Ext.layout.container.VBox, Ext.layout.container.HBox

And Ext.layout.container.Table.

Layout enumerated values:

1.absolute: layout by coordinate location

Click (here) to collapse or open

Ext.create ('Ext.panel.Panel', {

Layout:'absolute'

Title:'Ext.layout.container.Absolute layout example'

Frame:false

Height:150

Width:300

RenderTo:Ext.getBody ()

Defaults: {

Frame:true

Height:70

Width:100

BodyStyle:'background-color:#FFFFFF;padding:15px'// sets the background color of the panel body

}

Items: [{

The position of XRX 10pint / Abscissa is 10 pixels from the left edge of the parent container.

The position of YRU 10pint / ordinate is 10 pixels from the upper edge of the parent container.

Html:' subpanel 1'

Title:' subpanel 1'

}, {

XRV 130 ~ (th) / Abscissa is 130 pixels from the left edge of the parent container.

The position of YRV 40pint / ordinate is 40 pixels from the upper edge of the parent container.

Html:' sub-panel two'

Title:' sub-panel two'

}]

})

2.accorion: foldable layout with only one deployment at a time

Click (here) to collapse or open

Ext.create ("Ext.panel.Panel", {

Title: "Ext.layout.container.Accordion example"

Frame: true

Width: 300

Height: 200

RenderTo: Ext.getBody ()

BodyPadding: 5

Layout: "accordion"

Defaults: {

BodyStyle: "background-color:#FFFFFF"

}

Items: [{

Title: "nested Panel one"

Html: "Panel one"

}, {

Title: "nested Panel 2"

Html: panel 2

}, {

Title: "nested Panel 3"

Html: panel 3

}]

});

3.anchor: layout based on the relative position of the container

Click (here) to collapse or open

Ext.create ('Ext.Panel', {

Width: 500

Height: 400

Title: "AnchorLayout Panel"

Layout: 'anchor'

RenderTo: Ext.getBody ()

Items: [

{

Xtype: 'panel'

Title:'75% Width and 20% Height'

Anchor:'75% 20%'

}

{

Xtype: 'panel'

Title: 'Offset-300 Width &-200 Height'

Anchor:'- 300-200'

}

{

Xtype: 'panel'

Title: 'Mixed Offset and Percent'

Anchor:'- 250 20%'

}

]

});

4.auto: default layout of containers with no layout attribute specified

Click (here) to collapse or open

Ext.create ('Ext.Panel', {

Width: 500

Height: 280

Title: "AutoLayout Panel"

Layout: 'auto'

RenderTo: document.body

Items: [{

Xtype: 'panel'

Title: 'Top Inner Panel'

Width:'75%'

Height: 90

}

{

Xtype: 'panel'

Title: 'Bottom Inner Panel'

Width:'75%'

Height: 90

}]

});

5.border: this is a built-in expansion and collapse area that supports multi-layer nested panels, automatic formation of multiple panes between areas, and application-oriented UI layout style. The layout divides the interface into five areas, up and down, left and right, which are represented by north, south, west, east and center respectively, and each of its children uses region to specify the location of the element.

Click (here) to collapse or open

Ext.create ('Ext.panel.Panel', {

Width: 500

Height: 300

Title: 'Border Layout'

Layout: 'border'

Defaults: {

Style: {borderStyle:'solid'}

}

Items: [{

Title: 'South Region is resizable'

Region: 'south', / / position for region

Xtype: 'panel'

Height: 100

Split: true, / / enable resizing

Margins: '0555'

}, {

/ / xtype: 'panel' implied by default

Title: 'West Region is collapsible'

Region:'west'

Xtype: 'panel'

Margins: '5005'

Width: 200

Collapsible: true, / / make collapsible

Id: 'west-region-container'

Layout: 'fit'

}, {

Title: 'Center Region'

Region: 'center', / / center region is required, no width/height specified

Xtype: 'panel'

Layout: 'fit'

Margins: '5500'

}]

RenderTo: Ext.getBody ()

})

6.box: the basic class of HBox,VBox

7.card: this layout manages multiple subcomponents, each loaded into a container, of which only one subcomponent can be visible at any given time. The style of this layout is the most commonly used wizard, label implementation, etc.

Click (here) to collapse or open

Var p = Ext.create ('Ext.panel.Panel', {

Layout: 'card'

Items: [

{html: 'Card 1'}

{html: 'Card 2'}

]

RenderTo: Ext.getBody ()

});

P.getLayout () .setActiveItem (0)

8.checkboxgroup: the implementation classes for this layout are Ext.form.CheckboxGroup and Ext.form.RadioGroup

Click (here) to collapse or open

Ext.create ('Ext.form.CheckboxGroup', {

Id: 'myGroup'

Xtype: 'checkboxgroup'

RenderTo: Ext.getBody ()

FieldLabel: 'Single Column'

ItemCls: 'XMIT, check, group, RT'.

Columns: 3

Items: [{

BoxLabel: 'sing'

Name:'1'

}, {

BoxLabel: 'swimming'

Name:'2'

Checked: true

}, {

BoxLabel: 'reading'

Name:'3'

}, {

BoxLabel: 'travel'

Name:'4'

}, {

BoxLabel: 'games'

Name:'5'

}, {

BoxLabel: 'sleep'

Name:'6'

}]

})

9. Treat the entire container as a column, and then put child elements into the container

Click (here) to collapse or open

Ext.create ('Ext.panel.Panel', {

Title: 'Column Layout-Percentage Only'

Width: 350

Height: 250

Layout:'column'

Items: [{

Title: 'Column 1'

ColumnWidth: 0.25

}, {

Title: 'Column 2'

ColumnWidth: 0.55

}, {

Title: 'Column 3'

ColumnWidth: 0.20

}]

RenderTo: Ext.getBody ()

});

10.container: the basic class for customizing the layout

11.fit:Fit Layout is a common layout in which child elements automatically fill the entire parent container in an Fit layout.

If multiple components are placed in the Fit layout, only the first child element is displayed. A typical case is that when a customer asks for a GRID component in a window or panel, the size of the grid component changes with the size of the parent container.

Click (here) to collapse or open

Ext.create ('Ext.panel.Panel', {

Title: 'Fit Layout'

Width: 300

Height: 150

Layout:'fit'

Items: {

Title: 'Inner Panel'

Html: 'This is the inner panel content'

BodyPadding: 20

Border: false

}

RenderTo: Ext.getBody ()

});

12.form: form layout

Click (here) to collapse or open

Ext.create ('Ext.Panel', {

Width: 500

Height: 300

Title: "FormLayout Panel"

Layout: 'form'

RenderTo: Ext.getBody ()

BodyPadding: 5

DefaultType: 'textfield'

Items: [{

FieldLabel: 'First Name'

Name: 'first'

AllowBlank: false

}, {

FieldLabel: 'Last Name'

Name: 'last'

}, {

FieldLabel: 'Company'

Name: 'company'

}, {

FieldLabel: 'Email'

Name: 'email'

Vtype: 'email'

}, {

FieldLabel: 'DOB'

Name: 'dob'

Xtype: 'datefield'

}, {

FieldLabel: 'Age'

Name: 'age'

Xtype: 'numberfield'

MinValue: 0

MaxValue: 100

}, {

Xtype: 'timefield'

FieldLabel: 'Time'

Name: 'time'

MinValue: '8PUR 00am'

MaxValue: '6VR 00pm'

}]

RenderTo: Ext.getBody ()

});

13.hbox: horizontally arranges layouts that span container projects. This layout partition optionally contains available horizontal space between subitems of a digital flexible configuration

Click (here) to collapse or open

Ext.create ('Ext.Panel', {

Width: 500

Height: 300

Title: "HBoxLayout Panel"

Layout: {

Type: 'hbox'

Align: 'stretch'

}

RenderTo: document.body

Items: [{

Xtype: 'panel'

Title: 'Inner Panel One'

Flex: 2

}, {

Xtype: 'panel'

Title: 'Inner Panel Two'

Flex: 1

}, {

Xtype: 'panel'

Title: 'Inner Panel Three'

Flex: 1

}]

RenderTo: btn10

});

14.table:Table Layout draws content in table tags, the number of columns in table can be specified, and complex layouts can be created by setting rowSpan and colSpan

Click (here) to collapse or open

Ext.create ('Ext.panel.Panel', {

Title: 'Table Layout'

Width: 300

Height: 150

Layout: {

Type: 'table'

Columns: 3

}

Defaults: {

BodyStyle: 'padding:20px;'

BorderStyle:'solid'

}

Items: [{

Html: 'Cell A content'

Rowspan: 2

}, {

Html: 'Cell B content'

Colspan: 2

}, {

Html: 'Cell C content'

CellCls: 'highlight'

}, {

Html: 'Cell D content'

}]

RenderTo: Ext.getBody ()

});

15.vbox: organize all child elements vertically. Its child elements can be aligned through the align attribute, and the alignment of vbox is as follows:

Left: align to the left and align it by default

Center: middle alignment

Right: align to right

Stretch: stretch to align with the width of the parent container

Stretchmax: stretch alignment at the maximum width of all child elements

Click (here) to collapse or open

Ext.create ('Ext.Panel', {

Width: 500

Height: 400

Title: "VBoxLayout Panel"

Layout: {

Type: 'vbox'

Align: 'center'

}

RenderTo: document.body

Items: [{

Xtype: 'panel'

Title: 'Inner Panel One'

Width: 250

Flex: 2

}

{

Xtype: 'panel'

Title: 'Inner Panel Two'

Width: 250

Flex: 4

}

{

Xtype: 'panel'

Title: 'Inner Panel Three'

Width:'50%'

Flex: 4

}]

RenderTo: btn9

});

Three: Config

1.activeItem:String/Number (subcomponent id or index of the container in which the subcomponent resides)

The purpose of setting this property is to set that subcomponent to render on the layout of the container that was originally displayed. For example, activeItem: 'itemId-1' or activeItem: 0 (the first subcomponent in the container).

Suitable for layout styles that can display only one item at a time, such as Ext.layout.container.Card or Ext.layout.container.Fit

2.anchorSize

The size of the anchor

3.autoDestory:Boolean

The default is true, which means that all sub-components in the container are automatically destroyed

4.defaults

Set uniform properties for all item added through add or insert.

The default properties will be applied to all subcomponents, but will not override the properties already in the subcomponents themselves.

Such as:

Usage:

Defaults: {/ / defaults will be applied to all child components, not the parent container

AutoScroll: true

}

Items: [

/ / panel1 already exists autoScroll: false, so defaults will not be applied

{

Xtype: 'panel'

Id: 'panel1'

AutoScroll: false

}

/ / panel2 will autoScroll: true

New Ext.panel.Panel ({

Id: 'panel2'

})

]

5.items

A single component, or a collection of subcomponents defined in an array, will be automatically added to the container

If the developer does not configure the layout attribute, the default is to render the subcomponents sequentially to the container

The size and positioning of subcomponents are not considered.

If the subcomponent is specified, its actual component type is instantiated according to the xtype option. Each component has its own xtype.

If xtype is not specified, then defaultType will be used, and the default is panel.

Do not define contentEl or html as a subcomponent

The above is all the contents of the article "how to use Ext.container.Container in Ext.js4.2.1". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.