Ext.js 集装箱（二）

最新推荐文章于 2024-08-01 20:24:17 发布

转载最新推荐文章于 2024-08-01 20:24:17 发布 · 262 阅读

文章标签：

#前端框架 #extjs #容器

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

24 篇文章

订阅专栏

extjs

18 篇文章

订阅专栏

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

编号	容器类型和说明
1	Ext.panel.Panel 此示例显示一个Ext.panel.Panel容器
2	Ext.form.Panel 此示例显示一个Ext.form.Panel容器
3	Ext.tab.Panel 此示例显示一个Ext.tab.Panel容器
4	Ext.container.Viewport 此示例显示一个Ext.container.Viewport容器

1.Ext.js Ext.panel.Panel容器

描述

Ext.panel.Panel：这是允许在正常面板中添加项目的基本容器。

句法

这里是创建Ext.panel.Panel容器的简单语法：

Ext.create('Ext.panel.Panel', {
   items: [child1, child2] // this way we can add differnt child elements to the container as container items.
});

例

下面是一个简单的例子显示Ext.panel.Panel 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 childPanel1 = Ext.create('Ext.Panel', {
             html: 'First Panel'
         });

         var childPanel2 = Ext.create('Ext.Panel', {
             html: 'Another Panel'
         });

         Ext.create('Ext.panel.Panel', {
         renderTo: Ext.getBody(),
            width: 100,
            height : 100,
            border : true,
            frame : true,
            items: [ childPanel1, childPanel2 ]
         });
      });
   </script>
</head>
<body>
</body>
</html>

这将产生以下结果：

Ext.js Ext.panel.Panel容器

2.Ext.js Ext.form.Panel容器

描述

Ext.form.Panel：Form面板为表单提供了一个标准容器，它本质上是一个标准的Ext.panel.Panel，它自动创建一个用于管理任何Ext.form.field.Field对象的BasicForm。

语法

这里是创建Ext.form.Panel容器的简单语法。

Ext.create('Ext.form.Panel', {
   items: [child1, child2] // 这样我们可以将不同的子元素作为容器项添加到容器中。
});

例子

下面是一个简单的例子显示Ext.form.Panel容器。

<!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 child1 = Ext.create('Ext.Panel',{     
            html: 'Text field' 
         });
        
         var child2 = Ext.create('Ext.Panel',{
            html: 'Text field' 
         });
         Ext.create('Ext.form.Panel', {
            renderTo: Ext.getBody(),
            width: 100,
            height : 100,
            border : true,
            frame : true,
            layout: 'auto',// auto is one of the layout type.
            items: [child1, child2]
         });
      });
   </script>
</head>
<body>
</body>
</html>

3.ext.js Ext.tab.Panel容器

描述

Ext.tab.Panel : 标签面板就像一个普通的面板，但支持卡标签面板布局。

语法

以下是创建Ext.tab.Panel容器的简单语法。

Ext.create('Ext.tab.Panel', {
   items: [child1, child2] // 这样我们可以将不同的子元素作为容器项添加到容器中。
});

例子

以下是一个显示Ext.tab.Panel容器的简单示例。

<!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 () {
         Ext.create('Ext.tab.Panel', {
            renderTo: Ext.getBody(),
            height: 100,
            width: 200,
            items: [{
               xtype: 'panel',
               title: 'Tab One',
               html: 'The first tab',
               listeners: {
                  render: function() {
                     Ext.MessageBox.alert('Tab one', 'Tab One was clicked.');
                  }
               }
               },{
               // xtype for all Component configurations in a Container
               title: 'Tab Two',
               html: 'The second tab',
               listeners: {
                  render: function() {
                     Ext.MessageBox.alert('Tab two', 'Tab Two was clicked.');
                  }
               }
            }]
         });
      });
   </script>
</head>
<body>
</body>
</html>

这将产生以下结果：

TIM图片20180205142327

4.Ext.js Ext.container.Viewport容器

描述

Ext.container.Viewport：Viewport是一个容器，它会自动调整大小到整个浏览器窗口的大小。然后，您可以在其中添加其他ExtJS UI组件和容器。

语法

这里是创建Ext.container.Viewport容器的简单语法。

Ext.create('Ext.container.Viewport', {
   items: [child1, child2] // 这样我们可以将不同的子元素作为容器项添加到容器中。
});

例子

下面是一个简单的例子显示Ext.container.Viewport容器。

<!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 childPanel1 = Ext.create('Ext.panel.Panel', {
             title: 'Child Panel 1',
             html: 'A Panel'
         });

         var childPanel2 = Ext.create('Ext.panel.Panel', {
             title: 'Child Panel 2',
             html: 'Another Panel'
         });

         Ext.create('Ext.container.Viewport', {
         renderTo: Ext.getBody(),
             items: [ childPanel1, childPanel2 ]
         });
      });
   </script>
</head>
<body>
</body>
</html>

这将产生以下结果：

Ext.js Ext.container.Viewport容器