extjs4.0中文API整理02——Container

extjs4.0中文API整理02——Container
材料来自于extjs官网，翻译参考脚本娃娃的中文版


一、Ext.container.Container
1.任何可能包含其它Ext.Component组件的基类。 
容器对于所包含的组件的基本处理包括添加，插入和删除项目。


最常用的的容器类Ext.panel.Panel，Ext.window.Window和 Ext.tab.Panel。
如果开发者并不需要由上述类提供的功能，可以创建一个 轻量级容器

下面的代码演示了如何显式地创建一个容器:

// 显式创建一个容器
Ext.create('Ext.container.Container', {
    layout: {
        type: 'hbox'
    },
    width: 400,
    renderTo: Ext.getBody(),
    border: 1,
    style: {borderColor:'#000000', borderStyle:'solid', borderWidth:'1px'},
    defaults: {
        labelWidth: 80,
        // 隐式创建容器通过指定的xtype
        xtype: 'datefield',
        flex: 1,
        style: {
            padding: '10px'
        }
    },
    items: [{
        xtype: 'datefield',
        name: 'startDate',
        fieldLabel: 'Start date'
    },{
        xtype: 'datefield',
        name: 'endDate',
        fieldLabel: 'End date'
    }]
});

2.引申  defaults : Object/Function
此选项提供了为所有添加的组件上应用默认设置的途径, 这些属性要么是通过 items 配置项添加的， 
或者是通过 add 或者是通过 insert 方法添加的


默认属性将会应用到所有的子组件上，但是不会覆盖子组件本身已经有的属性 (可以参见 Ext.applyIf).


如果默认选项被指定为一个函数， 那么将使用当前容器作为作用域来调用这个函数( this 引用)， 
并且传递被添加的项目作为第一个参数。 调用产生的所有结果都将被作为默认参数应用到项目上。


例如，如需自动在 Ext.panel.Panel 所包含的每个子组件上应用padding属性， 
你可以设置: defaults: {bodyStyle: 'padding:15px'} 。