Learn ExtJS border layout_extjs

1. The Border layout is defined by the class Ext.layout.BorderLayout, and the layout name is border. This layout divides the container into five areas, southeast, northwest, and northwest, represented by east, south, west, north, and cente respectively. When adding sub-elements to the container, we only need to specify the locations of these sub-elements, and the Border layout will Automatically place child elements at the location specified by the layout.
2. Application examples

Copy code The code is as follows:

Ext.onReady(function (){
new Ext.Viewport({
layout:"border",
items:[{region:"north",
height:50,
title:"Top Panel" },
{region:"south",
height:50,
title:"bottom panel"},
{region:"center",
title:"center panel"} ,
{region:"west",
width:100,
title:"left panel"},
{region:"east",
width:100,
title :"right panel"}
]
});
});