ExtJS教程

Ext.js 类系统

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

在 Ext JS 中定义一个类

Ext 提供了 300 多个类,我们可以将它们用于各种功能。
Ext.define() 用于定义 Ext JS 中的类。

语法

Ext.define(class name, class members/properties, callback function);
类名是根据应用程序结构的类名。例如,appName.folderName.ClassName studentApp.view.StudentView。
类属性/成员定义类的行为。
回调函数是可选的。当类正确加载时调用它。

Ext JS 类定义示例

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'
   }]
});

创建对象

与其他基于 OOPS 的语言一样,我们也可以在 Ext JS 中创建对象。
以下是在 Ext JS 中创建对象的不同方式。

使用新关键字

var studentObject = new student();
studentObject.getStudentName();

使用 Ext.create()

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

Ext JS 中的继承

继承是将A类中定义的功能使用到B类中的原则。
在 Ext JS 中,可以使用两种方法进行继承-

扩展.扩展

Ext.define(studentApp.view.StudentDetailsGrid, {
   extend : 'Ext.grid.GridPanel',
   ...
});
这里,我们的自定义类 StudentDetailsGrid 使用了 Ext JS 类 GridPanel 的基本特性。

使用混合

Mixins 是在类 B 中使用类 A 的一种不同方式,无需扩展。
mixins : {
   commons : 'DepartmentApp.utils.DepartmentUtils'
},
在控制器中添加了Mixins,我们在其中声明了所有其他类,例如存储、视图等。这样,我们可以调用DepartmentUtils 类并在控制器或本应用程序中使用其功能。
昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4