"ExtJS 4.x Learning Tutorial" (3) Layouts and containers (Layouts and Containers)

Zhou Bontao (timen)
Email:[email protected]
Reprint Please specify the Source:http://blog.csdn.net/zhoubangtao/article/details/27366073
1. Introduction

Layout system is one of the strongest parts of Ext JS. It controls the size and positioning of each component in your application. This article focuses on how to get started with layouts.

2. Container (Containers)

An Ext JS application UI consists of a series of components (Component). A container (Container) is a special component that can accommodate other components. A typical ext JS application is composed of multiple nested components.

The most commonly used container is the panel. Let's see how the panel is going to contain other components as a container (Container):

Ext.create (' Ext.panel.Panel ', {    renderTo:Ext.getBody (),    width:400,    height:300,    title: ' Container Panel ',    items: [        {            xtype: ' Panel ',            title: ' Child Panel 1 ',            height:100,            width: ' 75% '        },< c11/>{            xtype: ' Panel ',            title: ' Child Panel 2 ',            height:100,            width: ' 75% '        }    ];

We only created a panel that renders to the document body and then added two sub-panel to our panel container using items.

3. Layout (Layouts)

Each container has a layout to manage the size and position of its subcomponents. In this section we mainly discuss the use of a special layout to configure a container, and how the layout system keeps it all synchronized.

3.1 Using layouts

In the example above, we did not set a special layout for the Panel container. Notice how the Sub-panel is placed one after the other, just like the different block-level elements in the DOM. This is because the default layout for all containers is auto layout. Auto layout does not set a special size and position for child elements. For example, let's say we want the two sub-panel to be positioned over the side, each occupying 50% of the width of the container, so that we can do this with column layout for this container:

Ext.create (' Ext.panel.Panel ', {    renderTo:Ext.getBody (),    width:400,    height:200,    title: ' Container Panel ',    layout: ' column ',    items: [        {            xtype: ' Panel ',            title: ' Child Panel 1 ',            height:100,            width: ' 50% '        },        {            xtype: ' Panel ',            title: ' Child Panel 2 ',            height:100,            width: ' 50% '        }    ];

Ext JS comes with quite a few layouts that are directly available and can be used for almost any type of layout you can imagine. You can look at the layout examples in the EXT JS 4 SDK.

3.2 How the layout system works

The layout of a container is responsible for the initial size and position of all child elements of a container. The internal framework invokes the container's Dolayout method to trigger the layout manager to calculate the correct size and position of all child elements of the container and then update the DOM. The Dolayout method is recursive, so any child element of the container will also invoke their Dolayout method. This is called recursively until the bottom of the component tree. In your application code, you typically never call the Dolayout method, which is automatically called by the framework.

A re-layout is triggered when the container is resized or the items of the subassembly are added or removed, and usually we can rely only on the framework to handle the update of the layout for us, but we want to prevent the framework from automatically laying out so that we can combine multiple operations to do batch processing and manually trigger the layout action when finished. To achieve this, we can use the suspendlayout tag on the container to block the re-layout action that is caused when we perform an operation that triggers the layout, such as adding or removing items. After we have done all the things we need to do, we turn off the suspendlayout mark and then call the container's Dolayout method to trigger the layout manually.

var containerpanel = ext.create (' Ext.panel.Panel ', {    renderTo:Ext.getBody (),    width:400,    height:200,    title: ' Container Panel ',    layout: ' column ',    suspendlayout:true//Suspend automatic layouts while we do Seve Ral different things that could trigger a layout on their own});//ADD A couple of child items.  We could add these both at the same time by passing a array to add ()//But lets pretend we needed to add them separately For some reason.containerPanel.add ({    xtype: ' Panel ',    title: ' Child Panel 1 ',    height:100,    width: ' 50% }); Containerpanel.add ({    xtype: ' Panel ',    title: ' Child Panel 2 ',    height:100,    width: ' 50% '});// Turn the suspendlayout flag off.containerPanel.suspendLayout = false;//Trigger a layout.containerPanel.doLayout ();

4. Component Layout

Just as a container layout defines the size and position of its subcomponents, a component has a layout that manages the size and layout of the child elements inside it. The component layout is configured with the Componentlayout configuration option. In general, you will not use this configuration unless you are writing a custom component, but all of the provided components have their own layout manager that does not meet your needs. Most say components use auto layout, but more complex components require a customized layout (e.g. panel with Header,footer and toolbars)

5. Summary

This article is mainly from the Ext JS 4 SDK layouts and Containers chapter, this article mainly introduces the layout manager's way of working, actually did not describe what layout manager, and their results. There will be some more in-depth articles to introduce. Please look forward to it.

6. References

1. Http://dev.sencha.com/deploy/ext-4.1.0-gpl/docs/index.html#!/guide/layouts_and_containers
   

Zhou Bontao (timen)
Email:[email protected]
Reprint Please specify the Source:http://blog.csdn.net/zhoubangtao/article/details/27366073