ExtJS学习笔记:定义extjs类别

类的定义

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();

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

时间: 2024-10-25 04:09:02

ExtJS学习笔记:定义extjs类别的相关文章

ExtJs学习笔记(1)---ExtJs安装及其使用

从官网下载了ExtJs的3.2版本的SDK,包含了代码依赖的详细说明.文档.范例和其他文件.其中,adapter和resources文件是Ext正常运行所必须的,其他的仅在开发过程中使用到. Adapter:支持把Ext和其他代码库一同使用的文件 build:用于自定义构建ext-all.js的文件 docs:文档中心(仅当运行在服务器上时能够正常访问) examples:大量令人印象深刻富有洞察力的范例 resources:Ext依赖的文件,例如CSS和图片 source:ext的所有代码 在

[ExtJS学习笔记]第六节 Extjs的类系统Class System命名规则及定义和调试

本文地址: http://blog.csdn.net/sushengmiyan/article/details/38479079 本文作者:sushengmiyan -------------------------------------------------------------资源链接----------------------------------------------------------------------- 翻译来源  Sencha Cmd官方网站:    http:

[ExtJS学习笔记]第五节 使用fontawesome给你的web应用增加友好图标

本文地址: 本文作者:sushengmiyan -------------------------------------------------资源链接-------------------------------------------------------- FontAwesome glyph编码:http://fortawesome.github.io/Font-Awesome/cheatsheet/ 使用图标美化按钮: http://blog.csdn.net/jfok/articl

[ExtJS学习笔记]第十节 Extjs5新增特性之ViewModel和DataBinding

本文地址:http://blog.csdn.net/sushengmiyan/article/details/38612721 本文作者:sushengmiyan -------------------------------------------------------------资源链接----------------------------------------------------------------------- 翻译来源:http://docs.sencha.com/ext

[ExtJS学习笔记]第九节 Extjs5的mvc与mvvm框架结构简介

本文地址:http://blog.csdn.net/sushengmiyan/article/details/38537431 本文作者:sushengmiyan -------------------------------------------------------------资源链接----------------------------------------------------------------------- 翻译来源:http://docs.sencha.com/ext

[ExtJS学习笔记]第八节 Extjs的Ext.toolbar.Toolbar工具条组件及其应用

本文地址:http://blog.csdn.net/sushengmiyan/article/details/38515499 本文作者:sushengmiyan -------------------------------------------------------------资源链接----------------------------------------------------------------------- Ext JS API: http://docs.sencha.

[ExtJS学习笔记]第七节 Extjs的组件components及其模板事件方法学习

本文地址:http://blog.csdn.net/sushengmiyan/article/details/38487519 本文作者:sushengmiyan -------------------------------------------------------------资源链接----------------------------------------------------------------------- 翻译来源  Sencha Cmd官方网站: http://ww

EXTJS学习笔记--搭建实验环境

1.目的 在eclipse中搭建EXTJS的基础环境,学习如何按照从官方下载的代码中搭建新的Extjs工程 2.学习过程中遇到的问题 ext-4.2.1-gpl与ext-4.2.1-commercial的区别        ext-4.2.1-gpl:开源版本,使用GPL开源协议        ext-4.2.1-commercial:商业版本,收费,稳定 作为个人研究来讲,可以使用ext-4.2.1-gpl. 下载的Extjs目录中各个文件说明        主要目录说明 builds目录:压

ExtJs学习笔记之学习小结LoginDemo

ExtJs学习小结LoginDemo 1.示例:(登录界面) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="stylesheet" type="text/css" href="../ext-js-4.2.1/res

ZP的EXTJS学习笔记(三)——邮箱功能的开发(按钮事件、下拉框、分页、record小图标、整条数据格式处理、定时刷新、record复选删除、分组)

照例,先贴效果图: 本人比较满意,短时间开发的邮箱功能,这是收件箱,还有配套的发件箱与删除箱. 简单说下思路: 1.配置model.store,用的是MVC模式,可参考第一篇学习笔记. 2.页面简单布局: Ext.define('KitchenSink.view.mail.InBox', { extend: 'Ext.grid.Panel', alias : 'widget.inbox', xtype: 'inbox', autoHeight:true, bodyStyle:'width:100