Ext.js：容器内的容器（Container inside container）

容器内部容器：我们可以在其他容器内部的容器作为父容器的组件以及其他组件。

语法

这里是使用容器内容器的简单语法：

   var container = Ext.create('Ext.container.Container', {
      items: [component3, component4]
   });
   Ext.create('Ext.container.Container', {
      renderTo: Ext.getBody(),
      items: [container]
   });

您可以将容器作为其他容器中的项目

例

下面是一个简单的例子，显示容器内的容器：

<!DOCTYPE html>
 <html>
 <head>
    <link href="./ext-6.0.0/build/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet">
    <script src="./ext-6.0.0/build/ext-all.js"></script>
    <script type="text/javascript">
        Ext.onReady(function () {
          var component1 = Ext.create('Ext.Component', {
             html:'First Component'
          });
 
          var component2 = Ext.create('Ext.Component', {
             html: 'Second Component'
          });
 
          var component3 = Ext.create('Ext.Component', {
             html: 'Third Component'
          });
 
          var component4 = Ext.create('Ext.Component', {
             html: 'Fourth Component'
          });
 
          var container = Ext.create('Ext.container.Container', {
             style: {borderStyle: 'solid', borderWidth: '2px' },
             width: '50%',
             items: [component3, component4]
          });
 
          Ext.create('Ext.container.Container', {
             renderTo: Ext.getBody(),
             title: 'Container',
             border: 1,
             width: '50%',
             style: {borderStyle: 'solid', borderWidth: '2px' },
             items: [component1, component2,  container]
          });
       });
    </script>
 </head>
 <body>
 </body>
 </html>

这将产生以下结果：