ExtJS学习笔记:定义extjs类别
2015-07-11 09:23
573 查看
类的定义
第一个參数是类名。第二个參数是一个对象。包括类中定义的属性和方法。第三个參数是可选的回调函数,在对象被实例化后运行。
定义的类由 Ext.ClassManager转为Ext.Class的实例,在此过程运行一系列前期和兴许的步骤。.前期步骤的顺序例如以下:
Loader: 载入须要的还没有被载入过的类
Extend: 基于已有类扩展
Mixins: 把定义的 Mixins 融合到类中
Config: 在配置选项中的属性将被处理,并创建对应的get/set/apply/reset 方法
Statics: 处理静态属性和方法
兴许步骤的顺序例如以下:
Aliases: 定义别名,以便通过xtype就可以创建实例
Singleton: 假设定义为单一对象,此时创建实例
Legacy: 不太明确,临时没用到
![](http://static.blog.csdn.net/xheditor/xheditor_emot/default/laugh.gif)
![](http://img.blog.csdn.net/20140720124351649?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGl0ZHdn/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
也能够通过registerPreProcessor和registerPostProcessor方法加入自己定义的处理步骤
假设没有指明基类。默认基类是Ext.Base
Mixins 是一些能够把别的类的属性和方法融合进当前类中,相当于一个子集,简化定义,降低代码量。
使用组件查询来訪问组件:
1.通过xtype查询
2.通过css样式级联的方式。如查询某个panel中的全部button
3.通过组件的属性值
4.基于ID
等等。
扩展extjs的组件
1. 定义扩展组件的类:
2. 重载 initComponent 方法并调用父类的同名方法:
3. 应用详细配置项:
i
4. 调用:
Ext.define('Cookbook.Vehicle', { Manufacturer: 'Aston Martin', Model: 'Vanquish', getDetails: function(){ alert('I am an ' + this.Manufacturer + ' ' + this.Model); } }, function(){ Console.log('Cookbook.Vehicle class defined!'); });
第一个參数是类名。第二个參数是一个对象。包括类中定义的属性和方法。第三个參数是可选的回调函数,在对象被实例化后运行。
定义的类由 Ext.ClassManager转为Ext.Class的实例,在此过程运行一系列前期和兴许的步骤。.前期步骤的顺序例如以下:
Loader: 载入须要的还没有被载入过的类
Extend: 基于已有类扩展
Mixins: 把定义的 Mixins 融合到类中
Config: 在配置选项中的属性将被处理,并创建对应的get/set/apply/reset 方法
Statics: 处理静态属性和方法
兴许步骤的顺序例如以下:
Aliases: 定义别名,以便通过xtype就可以创建实例
Singleton: 假设定义为单一对象,此时创建实例
Legacy: 不太明确,临时没用到
![](http://static.blog.csdn.net/xheditor/xheditor_emot/default/laugh.gif)
也能够通过registerPreProcessor和registerPostProcessor方法加入自己定义的处理步骤
假设没有指明基类。默认基类是Ext.Base
Mixins 是一些能够把别的类的属性和方法融合进当前类中,相当于一个子集,简化定义,降低代码量。
1. 定义相机功能类: Ext.define('HasCamera', { takePhoto: function(){ alert('Say Cheese! .... Click!'); } }); 2. 定义智能手机类。要求必须具有相机功能. Ext.define('Cookbook.Smartphone', { mixins: { camera: 'HasCamera' } }); 3. 在智能手机类可调用相机功能类的方法: Ext.define('Cookbook.Smartphone', { mixins: { camera: 'HasCamera' }, useCamera: function(){ this.takePhoto(); } });
使用组件查询来訪问组件:
1.通过xtype查询
var panels = Ext.ComponentQuery.query('panel');
2.通过css样式级联的方式。如查询某个panel中的全部button
var buttons = Ext.ComponentQuery.query('panel button');
3.通过组件的属性值
var saveButton = Ext.ComponentQuery.query('button[action="saveUser"]');
4.基于ID
var usersPanel = Ext.ComponentQuery.query('#usersPanel');
等等。
扩展extjs的组件
1. 定义扩展组件的类:
Ext.define('Cookbook.DisplayPanel', { extend: 'Ext.panel.Panel' });
2. 重载 initComponent 方法并调用父类的同名方法:
Ext.define('Cookbook.DisplayPanel', { extend: 'Ext.panel.Panel', initComponent: function(){ // call the extended class' initComponent method this.callParent(arguments); } });
3. 应用详细配置项:
i
nitComponent: function(){ // apply our configuration to the class Ext.apply(this, { title: 'Display Panel', html: 'Display some information here!', width: 200, height: 200, renderTo: Ext.getBody() }); // call the extended class' initComponent method this.callParent(arguments); }
4. 调用:
var displayPanel = Ext.create('Cookbook.DisplayPanel'); displayPanel.show();
相关文章推荐
- JSP与Servlet相互跳转小结
- js保留小数
- velocity json 转义问题
- 【 D3.js 入门系列 --- 6 】 如何使移动图表
- jsp上传下载+SmartUpload插件上传
- knockout.js实例二~购物车
- three.js javascript 3d 超级引擎 !
- json和jsonp
- JavaScript Lexical Scope
- JS返回上一步
- javascript中JSON对象与JSON字符串相互转换实例
- JavaScript使用RegExp进行正则匹配的方法
- JSON学习总结
- JSON学习总结
- javascript 函数的定义与参数的有无
- 【 D3.js 入门系列 — 2 】 绑定数据和选择元素
- JSONP VS CORS
- JSP深入
- JS DOM编程艺术——最佳实践—— JS学习笔记2015-7-10(第81天)
- JS-商品图片点击轮换