任何可能包含其它Ext.Component组件的基类。 容器对于所包含的组件的基本处理包括添加,插入和删除项目。
包含Ext.Component,又是其他容器的基类
Ext.container.Container
Ext.create('Ext.container.Container', {
renderTo: Ext.getBody(),
});
<div class="x-container x-container-default x-border-box" id="container-1009">
<div id="container-1009-outerCt" data-ref="outerCt" class="x-autocontainer-outerCt" role="presentation" style=" 100%; table-layout: fixed;">
<div id="container-1009-innerCt" data-ref="innerCt" style="" class="x-autocontainer-innerCt" role="presentation">
</div>
</div>
</div>
items:单个组件,或者是以数组形式定义的子组件集合 将会自动添加到容器中去,是组建容器管理其他组建的属性
Ext.create('Ext.container.Container', {
renderTo: Ext.getBody(),
items:[{
xtype:'box',
html:'a'
},{
html:'b'
}]
});
<div class="x-container x-container-default x-border-box" id="container-1009"> <div id="container-1009-outerCt" data-ref="outerCt" class="x-autocontainer-outerCt" role="presentation" style=" 100%; table-layout: fixed;"> <div id="container-1009-innerCt" data-ref="innerCt" style="" class="x-autocontainer-innerCt" role="presentation"> <div class="x-component x-component-default" id="box-1010">a</div> <div class="x-panel x-panel-default" id="panel-1011" style="height: 19px;"> <div id="panel-1011-body" data-ref="body" class="x-panel-body x-panel-body-default x-panel-body-default" role="presentation" style=" 1595px; left: 0px; top: 0px; height: 19px;"> <div id="panel-1011-outerCt" data-ref="outerCt" class="x-autocontainer-outerCt" role="presentation" style=" 100%; table-layout: fixed;"> <div id="panel-1011-innerCt" data-ref="innerCt" style="" class="x-autocontainer-innerCt" role="presentation">b</div> </div> </div> </div> </div> </div> </div>
可以看到items是innerCt下的其他组建的几何,且默认类型为panel
layout:布局,