Ext.container.Container

最新推荐文章于 2024-07-29 17:49:33 发布

转载最新推荐文章于 2024-07-29 17:49:33 发布 · 154 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/liuCy/p/4979662.html

文章标签：

#python

本文介绍了Ext框架中的容器组件Container，该组件可以包含其他Ext.Component组件，并提供了组件的添加、插入和删除等功能。Container还支持布局管理及子组件的自动添加。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

任何可能包含其它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="width: 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="width: 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="width: 1595px; left: 0px; top: 0px; height: 19px;">
                    <div id="panel-1011-outerCt" data-ref="outerCt" class="x-autocontainer-outerCt" role="presentation" style="width: 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>