ExtJS 2.0 practical and concise tutorial Border area layout_extjs

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. Look at the code below:

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"}
]
});
});

Executing the above code will output a panel containing five areas in the page, top, bottom, left, middle, as follows As shown in the picture: