03_容器

在这一章节，我们将把panel组件换成tabpanel组件，并讨论容器的相关功能！容器也是组件，它是被设计用来盛放和管理它的子组件的。

Ext.Viewport.add({
    xtype: 'tabpanel',
    items: [{
        title: 'Employee Directory',
        iconCls: 'x-fa fa-users'                
    },{
        title: 'About Sencha',
        iconCls: 'x-fa fa-info-circle'	
    }]
});

你或许还记得我们上一个例子中的两个配置项，xtype和html。在上面的代码中，我们做了如下改变：

1、通过将xtype的值修改为tabpanel而将组件类型由panel变为tabpanel。

2、将内容为”helloworld!”的html配置项替换为一组叫做items的对象数组。

通过使用items配置项数组，我们可以很容易地将很多子组件（items）添加到容器里。你可以将items看成是你要添加的子组件。在此例中，items数组中包含两个对象。此配置将会创建我们的tabs组件。

提示：通常，你可以为每个子组件设置一个xtype值，但是很多容器（包括tabpanel）都有默认的子组件类型。对于tabpanel来说，默认的子组件类型（xtype）是’panel’。

除了在pabpanel中添加了选项卡组件，我们还为每个子组件添加了一个title和iconCls配置项，每个配置项都影响选项卡的生成，如下所示：

title

显示在tab上面的文字。

iconCls

用这个配置，很可很方便的在tab上设置一个基于字体类的图标。此例中，我们使用Font Awesome图标库来配置，此图标库被打包到主题中了。

提示：查看一下tab类的说明文档（http://docs.sencha.com/extjs/6.2.0/modern/Ext.tab.Tab.html）来浏览所有可以自定义tab组件的配置项。你可能注意到这个类被标记为private。那并不意味着你不能使用类中的成员，而只是说明你不能创建tab。

 

下一步

空的tab面板没有什么用处，因此让我们添加一个表格用来展示数据吧！

深入探究

更多关于容器的信息，请查看我们的组件概览章节（http://docs.sencha.com/extjs/6.2.1/guides/core_concepts/components.html）。