Ext JS 是一个 JavaScript 框架，它具有面向对象编程的功能。
Ext 是封装 Ext JS 中所有类的命名空间。

1.在 Ext JS 中定义类

Ext 提供了 300 多个类，我们可以用于各种功能。

Ext.define（）用于在 Ext JS 中定义类。

语法如下

Ext.define(class name, class members/properties, callback function);

name: 类名称是根据应用程序结构的类名称。 appName.folderName.ClassName
studentApp.view.StudentView。

members/properties: 类属性/成员 - 定义类的行为。

function: 回调函数是可选的。当类正确加载时，会调用它。

案例

Ext.define(studentApp.view.StudentDeatilsGrid, {
   extend : 'Ext.grid.GridPanel',
   id : 'studentsDetailsGrid',
   store : 'StudentsDetailsGridStore',
   renderTo : 'studentsDetailsRenderDiv',
   layout : 'fit',
   columns : [{
      text : 'Student Name',
      dataIndex : 'studentName'
   },{
      text : 'ID',
      dataIndex : 'studentId'
   },{
      text : 'Department',
      dataIndex : 'department'
   }]
});

2.对象的创建

Ext.create()

Ext.create('Ext.Panel', {
   renderTo : 'helloWorldPanel',
   height : 100,
   width : 100,
   title : 'Hello world',
   html : 	'First Ext JS Hello World Program'		
});

注意：创建的对象必须是EXt本身的类或者是自定类

Ext JS 中的继承

继承是将类 A 中定义的功能用于类 B 的原理。

在 Ext JS 继承可以使用两种方法。

Ext.extend:

Ext.define(studentApp.view.StudentDetailsGrid, {
   extend : 'Ext.grid.GridPanel',
   ...
});

Ext.js 集装箱

类似于 Java的集合中的list 集合

容器

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

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="./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>

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>