Ext.js 集装箱

最新推荐文章于 2025-12-14 10:32:01 发布

转载最新推荐文章于 2025-12-14 10:32:01 发布 · 235 阅读

文章标签：

#前端 #extjs #容器组件

前端框架同时被 2 个专栏收录

24 篇文章

订阅专栏

extjs

18 篇文章

订阅专栏

容器

Ext JS中的容器是我们可以添加其他容器或子组件的组件。
这些容器可以具有多个布局以将部件布置在容器中。
我们可以从容器和其子元素添加或删除组件。
Ext.container.Container是Ext JS中所有容器的基类。

Ext.js 集装箱

编号	描述
1	Components inside Container 此示例显示如何在容器内定义组件
2	Container inside container 此示例显示如何使用其他组件定义容器内的容器

有各种类型的容器Ext.panel.Panel，Ext.form.Panel，Ext.tab.Panel和Ext.container.Viewport是Ext JS中经常使用的容器。下面是显示如何使用这些容器的示例。

1.Ext.js 容器内的组件

描述

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

语法

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

   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="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/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>

这将产生以下结果：

Ext.js 容器内的组件

2.Ext.js 容器内的容器

描述

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

语法

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

   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="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/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>

这将产生以下结果：

Ext.js 容器内的容器