Ext.js：容器内的组件（Components inside Container）

容器中的组件：我们可以在容器内部有多个组件。

语法

这里是使用容器内部组件的简单语法。

   var component1 = Ext.create('Ext.Component', {
      html:'First Component'
   });
   Ext.create('Ext.container.Container', {
      renderTo: Ext.getBody(),
      items: [component1]
   });

您可以将组件作为容器中的项目

例

以下是显示容器内部组件的简单示例：

<!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",
        });

        Ext.create("Ext.container.Container", {
          renderTo: Ext.getBody(),
          title: "Container",
          border: 1,
          width: "50%",
          style: { borderStyle: "solid", borderWidth: "2px" },
          items: [component1, component2, component3],
        });
      });
    </script>
  </head>
  <body></body>
</html>

这将产生以下结果：