不朽情缘输多少钱才能爆大奖

書名： Ext JS 3.0 Cookbook
作者名： Jorge Ramon
本章字數(shù)： 284字
更新時間： 2021-04-01 13:43:48

Positioning components in multiple columns

Multicolumn layouts are pervasive today. They are a favorite choice when there is a need to display complex data, or to have an organized and easy-to-navigate GUI. This recipe explains how to set up this type of layout with Ext JS, as shown in the following screenshot:

How to do it...

Create the columns of your layout:

var column1={
xtype:'panel',
title: 'Column 1',
columnWidth: .3,
html: 'Width=30%'
}
var column2={
xtype: 'panel',
title: 'Column 2',
columnWidth: .5,
html: 'Width=50%'
}
var column3={
xtype: 'panel',
title: 'Column 3',
width: 200,
html: 'Width=200px'
}

Position the columns in a container that uses the column layout:

var container=new Ext.Viewport({
layout: 'column',
defaults: {
bodyStyle: 'padding:10px'
}, items: [column1, column2, column3]
});

How it works...

Building a column layout requires you to create the panels that will constitute the columns. These columns are then added to a container that uses ColumnLayout. (Note the use of the layout:'column' configuration option.)

There's more...

In a column layout, the width of each column can be specified as a percentage or fixed width, but the height is allowed to vary, based on the content. The percentage width is set via the columnWidth configuration property, which is included in the config object of any panel added to it.

The specific rules about setting column widths can be found in the Ext JS documentation at http://extjs.com/deploy/dev/docs/?class=Ext.layout.ColumnLayout.

Note

Note that the concept of rows is absent in this layout. If you need precise control over the horizontal alignment of components across columns, you need to consider using a table layout.

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

Positioning components in multiple columns

How to do it...

How it works...

There's more...

Note

See also...

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

Ext JS 3.0 Cookbook

Positioning components in multiple columns

How to do it...

How it works...

There's more...

Note

See also...