ExtJS a summary of several types of layout

1.absolute locating the display in the container

Ext.create (' Ext.form.Panel ', {    title: ' Absolute layout ',    width:300,    height:275,    Layout: {        type : ' absolute '        //layout-specific configs go here        //itemcls: ' X-abs-layout-item ',    },    URL: ' Save-form.php ',    defaulttype: ' TextField ',    items: [{        x:10,        y:10,        xtype: ' label ',        text : ' Send to: '    },{        x:80,        y:10,        name: ' To ',        anchor: ' 90% '  //anchor width by percentage    },{        x:10,        y:40,        xtype: ' label ',        text: ' Subject: '    },{        x:80,        y:40,        Name: ' Subject ',        anchor: ' 90% '  //anchor width by percentage    },{        x:0,        y:80,        xtype: ' Textareafield ',        name: ' msg ',        anchor: ' 100% 100% '  //anchor width and height    }],    Renderto: Ext.getbody ()});

　　

2.accordion Accordion Effect

{minheight:250, layout: {type:' Accordion ', animate:true}, TabBar: {border:false}, Title:"Recommendation Letters and accessories", Name:' Refletterandattachment ', items:[{title:"Recommendation Letter", Xtype:' Grid '}, {title:Annex, Xtype:' Grid ', Columnlines:true, Name:' Filegrid ', reference:' Filegrid ', dockeditems:[{xtype:"Toolbar", items:[{text:"Upload Attachment", Iconcls: "Upload", Handler: "Uploadfiles"}]}], S Tore: {type:' Uploadfilesstore '}, Plugins: { PType:' Cellediting ', pluginID:' Attachmentcellediting ', Clickstoedit:1                                    },                                    Store: {type:' Filestore '}, Columns: [{text:"Attachment name", Dataindex:' TZ_XXX_MC ', MinWidth:425},{text: "View Attachments ", Dataindex:' Filelinkname ', MinWidth:200, Flex:1, renderer:function(Value,metadata,record) {varstrfile = Record.get (' strfiledate ')); returnstrfile; }},{menudisabled:true, sortable:false, Width:60, Xtype:' Actioncolumn ', Text:Operation, align:' Center ', items:[{iconcls:' Remove ', tooltip: ' Delete ', handler: ' Deletefiles '}                                        ]                                    }                                    ] }                            ]                        }

3.anchor

The anchor layout allows child elements to be better adapted to the size of the container, and when the container size changes, the elements of the anchor layout change the size size according to the established law.

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.boder divides the container into East,sorth,west,north,center

Ext.create (' Ext.panel.Panel ', {
WIDTH:500,
HEIGHT:300,
Title: ' Border Layout ',
Layout: ' Border ',
Items: [{
Title: ' South region is resizable ',
Region: "South",//position for region
Xtype: ' Panel ',
HEIGHT:100,
Split:true,//enable resizing
Margin: ' 0 5 5 5 '
},{
Xtype: ' panel ' implied by default
Title: ' West region is collapsible ',
Region: ' West ',
Xtype: ' Panel ',
Margin: ' 5 0 0 5 ',
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 ',
Margin: ' 5 5 0 0 '
}],

6.column consider a container as a column and then place the child element in the container

{
Layout: {
Type: ' column '
},
items:[{
Columnwidth:.5,
Xtype: ' TextField ',
Fieldlabel: "Interview evaluation score Model",
Name: ' Msps_cj_modal ',
Editable:false,
Triggers: {
Search: {
CLS: ' X-form-search-trigger ',
Handler: "Choicescoremodal"
},
Clear: {
CLS: ' X-form-clear-trigger ',
Handler:function (field) {
Field.setvalue ();
Field.findparentbytype (' form '). GetForm (). FindField (' Msps_cj_modal_desc '). SetValue ();
}
}
}
},{
Columnwidth:.5,
Xtype: ' Displayfield ',
Hidelabel:true,
Name: ' Msps_cj_modal_desc ',
Style: ' margin-left:8px '
}]
}

7.form is a layout that is designed to manage input fields in a form

8.table layout child elements according to normal table method, using layoutconfig:{column:3}//to divide the parent container into three columns

Layout: {
Type: ' Table ',
Columns:2
},

9.vbox vertical layout, child elements stretched horizontally

Ten Hbox horizontal layout, vertical stretching

Note: Refer to Http://docs.sencha.com/extjs/6.0.2/classic/Ext.enums.Layout.html

ExtJS a summary of several types of layout