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。 使用 new 关键字: 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.extend: Ext.define(studentApp.view.StudentDetailsGrid, {
extend : 'Ext.grid.GridPanel',
...
});
这里我们的自定义类 StudentDetailsGrid 使用 Ext JS 类 GridPanel 的基本功能。 使用 Mixins: Mixins 是在没有扩展的情况下在类 B 中使用类 A 的不同方式。 mixins : {
commons : 'DepartmentApp.utils.DepartmentUtils'
},
Mixins 我们添加在控制器中,我们声明所有其他类,如存储,视图等。在这种方式,我们可以调用 DepartmentUtils 类,并在控制器或在这个应用程序中使用其功能。
|
请发表评论