The ExtJS layout base class is Ext.layout.ContainerLayout, and other layouts inherit the class. The ExtJS container component contains a layout and Layoutconfig configuration property that specifies detailed configuration information for the layout and layout used by the container, and containerlayout is used as the layout by default if the layout of the container component is not specified. The layout is simply to put the elements in the container, some layout needs layoutconfig configuration, others do not need layoutconfig configuration. Look at the code:
Copy Code code 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"}]
});
});
The above code we created a panel Panel,panle is a container component, we use layout to specify that the Panel uses column layout. The child elements of the panel are two panels that contain a configuration parameter property that is related to the column layout columnwidth, and their values are 0.5, which is half the width of each panel. Execute the above program to produce the results shown in the following figure:
Some of the container components in Ext have already specified the layout used, such as TabPanel using the card layout, formpanel using the form layout, the table in Gridpanel using the column layout, and so on, when we use these components, You cannot specify additional layouts for these container components.
ExtJS2.0 altogether contains 10 kinds of layout, commonly used layout has border, column, fit, form, card, tabel and so on layout, below we separately to these several layouts makes the brief introduction.
