课程表

Ext.js课程

工具箱
速查手册

Ext.js Class 系统

当前位置:免费教程 » JS/JS库/框架 » Ext.js

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

在Ext JS中定义类

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

Ext.define()用于在Ext JS中定义类。

语法:

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

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

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

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

Ext JS类定义示例

  1. Ext.define(studentApp.view.StudentDeatilsGrid, {
  2. extend : 'Ext.grid.GridPanel',
  3. id : 'studentsDetailsGrid',
  4. store : 'StudentsDetailsGridStore',
  5. renderTo : 'studentsDetailsRenderDiv',
  6. layout : 'fit',
  7. columns : [{
  8. text : 'Student Name',
  9. dataIndex : 'studentName'
  10. },{
  11. text : 'ID',
  12. dataIndex : 'studentId'
  13. },{
  14. text : 'Department',
  15. dataIndex : 'department'
  16. }]
  17. });

创建对象

像其他基于OOPS的语言一样,我们也可以在Ext JS中创建对象。

不同的方式创建对象在Ext JS。

使用new关键字:

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

使用Ext.create():

  1. Ext.create('Ext.Panel', {
  2. renderTo : 'helloWorldPanel',
  3. height : 100,
  4. width : 100,
  5. title : 'Hello world',
  6. html : 'First Ext JS Hello World Program'
  7. });

Ext JS中的继承

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

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

Ext.extend:

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

这里我们的自定义类StudentDetailsGrid使用Ext JS类GridPanel的基本功能。

使用Mixins:

Mixins是在没有扩展的情况下在类B中使用类A的不同方式。

  1. mixins : {
  2. commons : 'DepartmentApp.utils.DepartmentUtils'
  3. },

Mixins我们添加在控制器中,我们声明所有其他类,如存储,视图等。在这种方式,我们可以调用DepartmentUtils类,并在控制器或在这个应用程序中使用其功能。

转载本站内容时,请务必注明来自W3xue,违者必究。
 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号