ExtJS 2.0 practical and concise tutorial layout overview_extjs

The layout base class of ExtJS is Ext.layout.ContainerLayout, and other layouts inherit this class. The container component of ExtJS contains a layout and layoutConfig configuration properties. These two properties are used to specify the layout used by the container and the detailed configuration information of the layout. If the layout of the container component is not specified, ContainerLayout will be used as the layout by default. This layout is just a simple Put the elements into the container. Some layouts require layoutConfig configuration, and some do not require layoutConfig configuration. Look at the code:

Copy code The code is as follows:

Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
width:400,
height:200,
layout:"column",
items:[{columnWidth:. 5,
title:"Panel 1"},
{columnWidth:.5,
title:"Panel 2"}]
});
});

In the above code, we create a panel Panel. Panel is a container component. We use layout to specify that the panel uses Column layout. The child elements of this panel are two panels. Both panels contain a configuration parameter attribute columnWidth related to column layout. Their values ​​​​are both 0.5, that is, each panel occupies half the width. Executing the above program generates the result as shown below:

Some container components in Ext have specified the layout used, such as TabPanel using card layout, FormPanel using form layout, and tables in GridPanel Using column layout, etc., when we use these components, we cannot specify another layout for these container components.
ExtJS2.0 contains a total of ten layouts. Commonly used layouts include border, column, fit, form, card, tabel and other layouts. Below we will give a brief introduction to each of these layouts.