Sencha-概念-Float Components(浮动组件)（官网文档翻译11）

Sencha-概念-Float Components(浮动组件)（官网文档翻译11）

通常在你需要有漂浮或在您的应用程序中的中心组件。一般来说，发生这种情况时，你需要问的用户下一步要做什么，或者当你想显示一个下拉式菜单。

煎茶触摸可以让你做三件事情，实现这一目标：

• 中心在屏幕上的任何组件
• 绝对位置在屏幕上（就像CSS）
• 或显示由另一个组件

围绕一个组件

您可以煎茶触摸它的容器内，使用该中心的配置中心的任何组件。这将永远中心的组成部分，即使它的父容器大小的变化。

 

 

当使用中心，该组件的宽度和高度的内容的大小取决于被自动设置。然而，如果该成分的含量，是动态的，类似的滚轮面板的宽度和高度，必须手动设置。

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});

中心的组件都集中在其容器。在上面的例子中，我们将一个组件添加到Ext.Viewport，使该组件在屏幕的中心集中在（视口是全尺寸的屏幕）。但是，如果我们想，我们中心的一个组成部分在随机大小的容器中。

 

 

您也可以使用setter方法为中心，以动态地改变，如果一个组件居中或在任何时候。

代

 

 

绝对定位组件

您还可以absolutey位置煎茶触摸使用的任何组件的配置上，右，底部和左侧的一个组成部分。这就像CSS 位置：绝对的。

例如，您可以执行以下操作（CSS）：

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

..带的一个组成部分煎茶触摸这样的：

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

当然，因为这些位置的属性是所有配置，你可以使用适当的制定者改变他们在任何时候：

 

 

模态组件

浮动或中心的容器模式掩盖了它的父容器的休息，所以有较少的用户的干扰。您只需设置模式配置设置为true。

 

 

您也可以使用hideOnMaskTap的的配置，使面板及面罩的面具消失，当用户点击：

 

 

请注意，你只能添加模式到Ext.Container，或者它的子类（如Ext.Panel）。

posted on 2012-12-26 21:30 CW.Liu 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/cheman/archive/2012/12/26/2834778.html