可以赚钱的游戏

書名： Ext JS 3.0 Cookbook
作者名： Jorge Ramon
本章字數： 333字
更新時間： 2021-04-01 13:43:47

Maintaining components' proportions when their containers are resized

Having components that maintain their proportions when their containers are resized is important, especially, when dealing with form elements.

In the following screenshot, there are three panels that resize themselves as their container is resized:

Maintaining components' proportions when their containers are resized

How to do it...

Create the panels that will be displayed:

panel1=new Ext.Panel({
title: 'Panel 1',
html: 'Width=container width\' - 50 px',
// Width=container width' - 50 px.
anchor: '-50'
});
panel2=new Ext.Panel({
title: 'Panel 2',
html: 'Width=75% of container',
// Width=75% of container.
anchor: '75%'
});
panel3=new Ext.Panel({
title: 'Panel 3',
html: 'Width=50% of container<br/>Height=container\'s - 150 px',
// Width=50% of container,
// Height=container's - 150 px.
anchor: '50%, -150'
});

Now, create the container window. When this window is resized, the panels will maintain their proportions:

var container=new Ext.Window({
title: 'Anchor Layout',
width: 600,
height: 350,
defaults: { bodyStyle: 'padding:10px' },
// The anchored items will automatically resize
// to maintain the same relative dimensions.
layout: 'anchor',
items: [panel1, panel2, panel3]
});
container.show();

How it works...

The relative anchoring is achieved by specifying an AnchorLayout for the layout configuration option of the container. If the container is resized, all anchored items are automatically rendered according to their anchor rules.

There's more...

The container using the AnchorLayout can supply an anchoring-specific config property, anchorSize. By default, AnchorLayout will calculate anchor measurements based on the size of the container itself. However, if anchorSize is specified, the layout will use it as a virtual container for the purposes of calculating anchor measurements based on it instead. This will allow the container to be sized independent of the anchoring logic if necessary.

It's also possible to supply the horizontal and vertical anchor values through the anchor config option. They can refer to the percentage an item should take up within its container, the offset from the right and bottom edges, or the container's sides. For example,'-50 75%' would render the width offset from the container's right edge by 50 pixels and 75% of the container's height.

官术网_书友最值得收藏!

Ext JS 3.0 Cookbook

Maintaining components' proportions when their containers are resized

How to do it...

How it works...

There's more...