Ext.js 容器内的容器

2022-05-19 11:34 更新

描述

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

语法

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

   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>

这将产生以下结果:

Ext.js 容器内的容器


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号