码迷,mamicode.com
首页 > Web开发 > 详细

ExtJS学习笔记:定义extjs类别

时间:2015-07-11 10:29:34      阅读:161      评论:0      收藏:0      [点我收藏+]

标签:

类的定义

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: 不太明确,临时没用到技术分享

技术分享

也能够通过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();


版权声明:本文博客原创文章,博客,未经同意,不得转载。

ExtJS学习笔记:定义extjs类别

标签:

原文地址:http://www.cnblogs.com/bhlsheji/p/4638035.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!