第十三天（Floating Components）

原文地址：http://docs-origin.sencha.com/touch/2.2.1/#!/guide/floating_components

Floating Components

浮动组件

Often you need to have floating or centering components in your applications. Generally this happens when you need to ask the user what to do next, or perhaps when you want to show a dropdown style menu.

经常你需要在你的应用中将组件悬浮或者居中显示。通常，这发生在你需要问你的用户下一步要做什么或者你想要展示一个下拉菜单。

Sencha Touch supports the following behaviors of floating components:

st支持浮动组件的下列行为：

• Centering a component on the screen       在屏幕上居中组件
• Positioning a component absolutely on the screen (similar to CSS)    在屏幕上根据绝对位置放置组件（与css类似）

Centering a Component

居中组件

In Sencha Touch you can center any component within its container by using the centered configuration. This always centers the component, even when its parent containers size changes.

在st中，你可以使用centered配置来将任何组件在其父容器中居中显示。该配置总是会让组件居中，即使它的父容器大小改变也会如此。

Code Editor

Live Preview

Select Code

Ext.Viewport.add({

    xtype: 'panel',

    html: 'This is a centered panel',

    centered: true

});

效果如下：

When using centered, the width and the height of the component are automatically set depending on the size of the content. However, if the content of the component is dynamic, such as for example a scroller panel, the width and height must be set manually.

当使用centered配置时，组件的宽度、高度会依据内容的大小来自动计算。然而，如果组件的内容是动态的，例如一个滚动panel，宽、高必须手动设置。

Code Editor

Live Preview

Select Code

Ext.Viewport.add({
    xtype: 'panel',
    scrollable: true,
    html: 'This is a scrollable centered panel with some long content so it will scroll.',
    centered: true,
    width: 100,
    height: 100
});

Centered components are centered within their container. In the previous examples we added a component into a Ext.Viewport, so the component is centered in the center of the screen (as the Viewport is the full size of the screen). However, a component can also be centered within a random sized container.

居中的组件在它们的父容器中是居中的。在前面的例子中，我们向Ext.Viewport中添加了一个组件，因此该组件显示在屏幕中央（因为Viewport占满了整个屏幕）。然后，一个组件也可以在一个随机大小的容器中居中。

Code Editor

Live Preview

Select Code

Ext.Viewport.add({

    xtype: 'container',

    layout: 'hbox',

    items: [

        {

            flex: 1,

            html: 'left item',

            style: 'background:#eee;'

        },

        {

            flex: 2,

            html: 'right, item',

            items: [

                {

                    xtype: 'panel',

                    html: 'This is a centered panel within this container',

                    centered: true

                }

            ]

        }

    ]

});

效果如下：

You can also use the setter for centered to dynamically change the centering of a component at any time.

你也可以使用centered配置的setter方法在任何时候来动态的改变组件的居中显示：

Code Editor

Live Preview

Select Code

var panel = Ext.Viewport.add({

    xtype: 'panel',

    layout: {

        type: 'vbox',

        align: 'center',

        pack: 'center'

    },

    items: [

        {

            xtype: 'button',

            text: 'toggle centered',

            handler: function() {

                if (panel.isCentered()) {

                    panel.setCentered(false);

                    panel.setWidth(null);

                    panel.setHeight(null);

                } else {

                    panel.setCentered(true);

                    panel.setWidth(200);

                    panel.setHeight(100);

                }

            }

        }

    ]

});

Absolutely Positioning a Component

绝对位置放置组件

You can also absolutey position a component in Sencha Touch using the top, right, bottom and left configurations of any component. This works like theposition: absolute CSS code.

在st中，你也可以使用top、right、bottom、left配置来将一个组件放置在绝对位置上。这根css样式中的position：absolute很相像。

For example, the following CSS positioning:

例如下面的css样式：

.element {
    position: absolute;
    left: 50px;
    bottom: 5px;
}

...can be replicated in Sencha Touch with a component as follows:

在st中可以用下面的组件来代替：

Code Editor

Live Preview

Select Code

Ext.Viewport.add({
    xtype: 'panel',
    html: 'A floating component',
    top: 50,
    right: 5
});

效果如下：

Additionally, since these position properties are all configurations, you can use the appropriate setters to change them at any time:

此外，因为这些位置属性全都是配置项，你可以使用正确的setter方法在任何时候来改变它们：

Code Editor

Live Preview

Select Code

var panel = Ext.Viewport.add({

    xtype: 'panel',

    defaultType: 'button',

    layout: {

        type: 'vbox',

        align: 'stretch'

    },

    items: [

        {

            text: 'up',

            handler: function() {

                panel.setTop(panel.getTop() - 5);

            }

        },

        {

            text: 'down',

            handler: function() {

                panel.setTop(panel.getTop() + 5);

            }

        },

        {

            text: 'left',

            handler: function() {

                panel.setLeft(panel.getLeft() - 5);

            }

        },

        {

            text: 'right',

            handler: function() {

                panel.setLeft(panel.getLeft() + 5);

            }

        }

    ],

    top: 50,

    left: 5

});

Modal Components

模态组件

Making a floating or centered container modal masks the rest of its parent container, which results in a layout that is less distracting to users. To accomplish this, you set the modal configuration to true.

使一个悬浮或者居中的组件模态化，会将其父容器的剩下部分有一层遮罩，这会产生一个让用户少分心的布局（即用户不能操作悬浮或居中组件之上的东西）。为了达到这个目的，你可以通过设置modal配置为true。

Code Editor

Live Preview

Select Code

Ext.Viewport.add({

    xtype: 'panel',

    html: 'This is a centered and modal panel',

    modal: true,

    centered: true

});

Ext.Viewport.setHtml('This content is in the viewport and masked because the panel is modal.');

Ext.Viewport.setStyleHtmlContent(true);

You can also use the hideOnMaskTap configuration to make the panel and the mask disappear when a user taps on the mask:

当用户点击遮罩时，你也可以使用hideOnMaskTap配置来让panel及遮罩消失：

Code Editor

Live Preview

Select Code

Ext.Viewport.add({

    xtype: 'panel',

    html: 'This is a centered and modal panel',

    modal: true,

    hideOnMaskTap: true,

    centered: true

});

Ext.Viewport.setHtml('This content is in the viewport and masked because the panel is modal.<br /><br />You can also tap on the mask to hide the panel.');

Ext.Viewport.setStyleHtmlContent(true);

Please note that you can only add modal behavior to a Ext.Container, or a subclass of it (such as Ext.Panel).

注意，你只能为Ext.Conatainer或者其子类（如Ext.Panel）添加modal行为。