在Sencha Touch2中使用布局

最新推荐文章于 2024-07-17 13:25:47 发布

load_life

最新推荐文章于 2024-07-17 13:25:47 发布

阅读量370

点赞数

分类专栏： Sencha Touch 文章标签： flex html layout components list 文档

Sencha Touch 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

导言及Hbox布局（水平布局）

在你的应用程序中，布局用来描述组件的大小和空间位置信息。例如，就一个电子邮件的客户端举例来说，它有一个固定在屏幕左侧的邮件列表，占屏幕宽度的1/3；在屏幕剩余的右侧空间，有一个查看邮件具体内容的浏览面板。

我们可以用hbox布局来实现这两个组件的伸缩Flex，伸缩Flex意味着我们能够把可用的空间按照每一个子组件的Flex系数进行分割。为了实现刚才我们说的邮件客户端的例子，我们可以像这样来设置伸缩：

这个例子的代码非常简单，我们仅需要为任意一个容器指定“hbox”布局，然后，为每一个处于其中的组件分配一个Flex系数即可（在这个例子中，组件用的是面板-Panels）。

Ext.create('Ext.Container', {
    fullscreen: true,
    layout: 'hbox',
    items: [
        {
            xtype: 'panel',
            html: 'message list',
            flex: 1
        },
        {
            xtype: 'panel',
            html: 'message preview',
            flex: 2
        }
    ]
});

在这个例子中，我们创建了一个填满整个屏幕的容器，并在其内部创建了一个邮件列表面板和一个内容浏览面板。它们的Flex系数分别为1和2（左侧的面板Flex系数为1，右侧面板Flex系数为2），这意味着左侧面板将占去1/3的宽度，右侧面板将占用其余2/3的宽度。如果我们的容器宽度为300像素，那么左侧的面板的宽度为100像素，右侧面板的宽度为200像素。

hbox是最有用的布局之一，它可以在水平方向组合排列组件。更多的例子，请参阅的HBox文档。

VBox布局（垂直布局）

VBox布局与HBox布局基本类似，只是它的排列方向为垂直而不是水平。同样，我们可以简单的把它想像为如下两个盒子：

这段代码几乎与上一个例子的代码相同，我们仅仅是把容器的布局属性设置为"vbox"：

Ext.create('Ext.Container', {
    fullscreen: true,
    layout: 'vbox',
    items: [
        {
            xtype: 'panel',
            html: 'message list',
            flex: 1
        },
        {
            xtype: 'panel',
            html: 'message preview',
            flex: 2
        }
    ]
});

在这个例子中，如果容器的高度为300像素，那么第一个面板（FLEX：1）的高度为100像素，第二个面板（FLEX：2）高度为200像素。可以参见VBox的文档以获取更多的例子。

Card布局（卡片布局）

有时你想将展现多个充满信息的屏幕，但现实是，你只有一个小屏幕可用。TabPanels和Carousels都能够让你在同一时间看到你想展示的诸多屏幕中的一个，它们都是使用Card布局来实现的。

卡片布局在其应用的容器中占满整个空间，并使得当前活动的项目完全填满该容器，并隐藏的其余的项目。Card布局允许你选择任何一个项目作为当前可见的项目，但在同一时间只能显示一个：

在这个例子中，灰色方块是我们的容器，它里面的蓝色方块是当前活跃的项目。其他三个项目在视图中是隐藏的，但这三个隐藏项目可以替换成为当前显示的项目。通常并不直接创建Card布局，你可以这样来实现：

var panel = Ext.create('Ext.Panel', {
    layout: 'card',
    items: [
        {
            html: "First Item"
        },
        {
            html: "Second Item"
        },
        {
            html: "Third Item"
        },
        {
            html: "Fourth Item"
        }
    ]
});

panel.getLayout().setActiveItem(1);

在这里，我们创建一个具有卡片布局的面板，在最后一句代码中设置第二个项目为该面板的显示项（数组的下标是从0开始的，所以1代表第二项）。通常情况下，你最好使用一个Tab Panel或Carousel。

Fit布局（填充布局）

填充布局（Fit Layout）可能是最简单的布局了。它的作用就是使一个子组件撑满它所在的父容器。

例如，如果你有一个200像素*200像素的容器，并为它建立一个独立的子组件并将该容器的布局设置为“Fit布局”，那么子组件也将是200像素*200像素：

var panel = Ext.create('Ext.Panel', {
    width: 200,
    height: 200,
    layout: 'fit',

    items: {
        xtype: 'panel',
        html: 'Also 200px by 200px'
    }
});

Ext.Viewport.add(panel);

Docking（停靠）

每一种布局均具备在其中“停靠”组件的功能。“停靠”功能能够使你将新增的组件放置在父容器的顶部、右侧、底部和左侧，并会自动重新分配其余组件所占的空间大小。

例如，回到前面我们第一个布局：hbox布局，让我们想象一下，我们要停靠在顶部的一个新增组件，如下图的蓝色部分：

这种停靠经常用来实现toolbar和banner等，并很容易就通过这样的语句 Dock:'top' 来实现：

Ext.create('Ext.Container', {
    fullscreen: true,
    layout: 'hbox',
    items: [
        {
            dock: 'top',
            xtype: 'panel',
            height: 20,
            html: 'This is docked to the top'
        },
        {
            xtype: 'panel',
            html: 'message list',
            flex: 1
        },
        {
            xtype: 'panel',
            html: 'message preview',
            flex: 2
        }
    ]
});

你可以在容器中增加多个停靠在其中的组件，只需要在你想停靠的组件上简单的设置Dock属性就可以了。你可以将组件停靠在父容器的任意一边。

例如，我们可以在之前的vbox布局中将一个新的组件停靠在父容器的左侧：

我们可以指定新增的组件的dock属性为"left",即可实现此例。

Ext.create('Ext.Container', {
    fullscreen: true,
    layout: 'vbox',
    items: [
        {
            dock: 'left',
            xtype: 'panel',
            width: 100,
            html: 'This is docked to the left'
        },
        {
            xtype: 'panel',
            html: 'message list',
            flex: 1
        },
        {
            xtype: 'panel',
            html: 'message preview',
            flex: 2
        }
    ]
});