Community Learn Tools Library Leisure

English

Home > Web Front-end > JS Tutorial > ExtJS 2.0 practical and concise tutorial Border area layout_extjs

ExtJS 2.0 practical and concise tutorial Border area layout_extjs

WBOY

Release： 2016-05-16 18:53:29

Original

1130 people have browsed it

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:

Related labels：

border extjs

source：php.cn

Previous article：ExtJS 2.0 Practical and Concise Tutorial: Introduction to Ext Class Library_extjs Next article：JavaScript implements modal dialog box source code collection_javascript skills

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn