# 容器篇

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

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

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

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

Container：容器基类。透明。具备容纳子元素组件的能力。基本属性children，有一套子组件操作方法。

Box：边框容器，从Container继承。具备边框border和边距padding。

Group：圆角容器，从Container继承。具备圆角边框和边距padding。

Panel ：面板容器，从Box继承。具备标题title、标题图标titleIcon、标题工具栏toolbar。

Dialog：圆角面板容器，从Group继承。具备标题title、标题图标titleIcon、标题工具栏toolbar。

FormItem：表单项容器，从Box继承。具备label,labelAlign,labelWidth,labelCls,labelStyle等属性。

Application：系统容器。撑满页面，自适应浏览器大小而改变。一个页面有且只能有一个Application容器。

下面我们来一一演示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对界面是独占式的,将覆盖整个页面可视区,并随之浏览器调整而改变大小.