EdoJS提供了8种不同外观的容器，如下图所示：

从前面的教程，我们知道，EdoJS的容器可以容纳子组件和子容器（容器也是组件），但是容器本身不具备排布子组件的能力，必须依赖于一个布局器，才能排布子组件。

在布局能力上，8种容器没有不同之处，他们之间的不同，在于容器的外观区别，如基础容器Container是个透明的容器，边框容器Box有边框线和边距，面板容器Panel有标题栏等。

8种容器的功能作用如下：

 

下面我们来一一演示8种容器的示例代码和界面效果

1. Container

Edo.create({
    type: 'ct',
    style: 'background-color:blue;',
    children: [
        {
            type: 'text'
        },
        {
            type: 'button',
            text: '按钮'
        }
    ],
    render: document.body
});

效果图如下:

Container是一个透明的容器,它没有任何的外观效果,这里通过设置它的style=”background-color:blue”代码,来绘制出它的尺寸范围.

说明

容器具备children属性,这是"容器"的基本属性,是子组件的集合对象.

Container提供了如下的方法来操作子组件: setChildren, getChildren, numChildren, addChild,addChildAt,removeChild,removeChildAt,getChildAt,removeAllChild,setChildIndex等,具体请参阅Api文档,查看Container的具体属性/方法和事件.

2. Box

Box是一个边框容器,支持边框border和内边距padding的设置,来看一个例子:

Edo.create({
    type: 'box',        
    border: [1,1,1,1],
    padding: [10,10,10,10],
    children: [
        {
            type: 'text'
        },
        {
            type: 'button',
            text: '按钮'
        }
    ],
    render: document.body
});

效果图如下:

说明

border和padding数组设置的顺序分别是:left, top, right, bottom

不同的值决定不同的边框粗细和内边距大小.

3. Group

Group从Container继承,目的是提供一种带圆角的边框容器。一般我们用Group来作为按钮工具栏：

Edo.create({
    type: 'group',    
    layout: 'horizontal',
    horizontalGap: 0,   //设置按钮之间横向间距为0
    cls: 'e-toolbar',   //设置此样式,消除按钮的边框,鼠标以上才出现按钮边框
    children: [
        {
            type: 'button',
            text: 'new'
        },
        {
            type: 'button',
            text: 'save'
        },
        {
            type: 'button',
            text: 'delete'
        }
    ],
    render: document.body
});

效果图如下：

4. Panel

Panel从Box继承,因此直接就具备了Box的border和padding属性。

与Box不同的是,Panel另外增加了一个表现：标题栏。

标题栏涉及的相关属性是：title，titleCls，toolbar。

来看一段代码:

Edo.create({
    type: 'panel',        
    title: '标题',              //标题
    titleIcon: 'e-tree-folder', //标题图标    
    enableCollapse: true,       //允许折叠面板
    border: 1,                  //边框线
    padding: 10,                //内边距
    titlebar:[                  //标题栏按钮
        {
            cls:'e-titlebar-toggle',
            onclick: function(e){
                this.parent.owner.toggle();
            }
        }
    ],
    children: [
        {
            type: 'text'
        },
        {
            type: 'button',
            text: '按钮'
        }
    ],
    render: document.body
});

效果图如下:

说明

border和padding可以直接设置数值,这样默认所有的方位都是这个值.

5. Dialog

Dialog从Group继承,跟Panel类似,都有标题栏，Dialog的外观是圆角面板。

Edo.create({
    type: 'dialog',        
    title: '标题',              //标题
    titleIcon: 'e-tree-folder', //标题图标        
    children: [
        {
            type: 'box',
            children: [
                {
                    type: 'text'
                },
                {
                    type: 'button',
                    text: '按钮'
                }
            ]
        }        
    ],
    render: document.body
});

效果图如下：

6. FormItem

FormItem是表单项容器,它的设计目标就是为了在表单界面中,简化"label: input”界面模式的开发.

FormItem从Container继承,因此它没有继承到任何外观属性,它自己有一些扩展,都是基于label方面的:

label,labelWidth,labelAlign,labelCls,labelStyle.

示例代码如下：

Edo.create({
    type: 'formitem',
    label: '用户名: ',
    labelAlign: 'right',
    style: 'background:#ccc;',
    children: [
        {
            type: 'text'
        }
    ],
    render: document.body
});

效果图如下:

说明

FormItem就是为了表单制作而设计的,目的是简化"label: input"模式.

它的应用场合,一般是加在某个Box或Panel/Form之内,作为一个表单项.

7. FieldSet

FieldSet是一个可折叠的容器.它一般适用在"更多选项","高级选项"之类的场合,里面的内容不是必填的,不是必须要做的.

FieldSet从Container继承，增加了legend属性。

示例代码如下：

Edo.create({
    type: 'fieldset',
    legend: '高级设置 ',
    enableCollapse: true,
    children: [
        {
            type: 'text'
        },
        {
            type: 'button',
            text: '按钮'
        }
    ],
    render: document.body
});

效果图如下：

当点击"高级设置"时,FieldSet容器的内容将折叠或显示，效果图如下：

说明

FieldSet如果需要折叠效果,请将enableCollapse属性置为true,表明此容器是可折叠的.

enableCollapse是Container的属性,因此,所有的容器都具备此属性,都可以是可折叠的.

8. Application

Application是一个系统容器,从Box继承.它的设计目的,是作为界面的顶级容器,具备自适应浏览器大小而改变自身尺寸的能力.一个EdoJS界面系统,有且只能有一个Application容器,而且必须是顶级容器。

Edo.create({
    type: 'app',
    verticalAlign: 'middle',
    horizontalAlign: 'center',
    children: [
        {
            type: 'button',
            text: 'app必须是顶级容器且只有一个!'
        }
    ],
    render: document.body
});

说明

EdoJS组件是可以嵌入到任何DOM元素内的,作为一个网页部件使用,如cmp.render(DOM);

当您使用Application容器时,EdoJS对界面是独占式的,将覆盖整个页面可视区,并随之浏览器调整而改变大小.