ExtJS 4 布局和容器

2012-07-20 14:45

ExtJS 4 布局和容器

要说ExtJS最强大的部分布局系统(layout system)必然是其中之一，它掌控你应用中的每一个组件的大小和位置，这篇文章函盖了怎样开始使用布局，是ExtJS 4布局的初级教程。

Containers 容器
ExtJS应用的UI界面，是由组件(Component)构建起来的，容器(Container)是一个特殊的组件，它可以盛放其他组件，每个典型的ExtJS应用都是数层嵌套的组件组成的。如图所示：

最常用的容器，就是Panel，让我们见识一下，作为一个容器，Panel是如何盛放其他组件的：

Ext.create('Ext.panel.Panel', {
    renderTo: Ext.getBody(),
    width: 400,
    height: 300,
    title: 'Container Panel',
    items: [
        {
            xtype: 'panel',
            title: 'Child Panel 1',
            height: 100,
            width: '75%'
        },
        {
            xtype: 'panel',
            title: 'Child Panel 2',
            height: 100,
            width: '75%'
        }
    ]
});
我们仅仅创建了一个Panel，让它渲染到文档主体body中，然后我们使用了items配置，添加了两个子Panel到容器Panel中。