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

首頁 >

Ext JS 3.0 Cookbook

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:

Positioning components in multiple columns

How to do it...

  1. 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'
}
  2. 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.

See also...

  • The following recipe, Using the table layout illustrates how to lay out components in multiple rows or columns
主站蜘蛛池模板： 兖州市| 连江县| 南乐县| 海原县| 宣恩县| 陵水| 木里| 靖边县| 会宁县| 华宁县| 临泽县| 柘荣县| 长丰县| 栾川县| 长治市| 松潘县| 龙南县| 汾西县| 洛浦县| 珲春市| 勐海县| 贵港市| 莲花县| 遵义县| 临泽县| 富阳市| 黄陵县| 都匀市| 互助| 顺昌县| 天峨县| 开远市| 巩留县| 黎城县| 万山特区| 鸡东县| 上饶市| 郴州市| 栾城县| 肥西县| 平山县|