ExtJS学习笔记:定义extjs类别
2023-09-14 09:08:09 时间
类的定义
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();
版权声明:本文博客原创文章,博客,未经同意,不得转载。
相关文章
- 区块链学习笔记:D02 区块链的技术发展历史和趋势
- oracle基本笔记整理及案例分析1
- ADO.NET详细学习笔记《一》
- C++学习笔记——常量定义
- ALSA声卡12_从零编写之添加音量控制_学习笔记
- mysql--SQL编程(关于mysql中的日期) 学习笔记2
- 深度学习Bible学习笔记:第六章 深度前馈网络
- 深度学习Bible学习笔记:第二、三章 线性代数 概率与信息论
- JUnit学习笔记
- Mono for Android开发调研笔记
- 机器学习笔记 - Kaggle表格游乐场 Jan 2022 学习一
- 数学建模学习笔记(三十)灰色关联度
- 数学建模学习笔记(二十二)灰色预测(中)GM(1,1)实例:SARS
- Android开发学习笔记(九)主题与样式
- Express engine 学习笔记 - 工作在反向代理背后的 Express 设置
- HTML label标签学习笔记
- Javascript 学习 笔记三
- Android问题笔记 - Studio 编译报错 The minCompileSdk (33) specified in a dependency‘s AAR metadata
- Direct-X学习笔记--纹理映射
- 机器学习第一周笔记
- Node.js学习笔记(二)——Node.js模块化、文件读写、环境变量
- 我的Hook学习笔记
- 一篇笔记带你梳理JVM工作原理
- struts2学习笔记(5)---自己定义拦截器
- C++ Primer 学习笔记_38_STL实践与分析(12)--集成的应用程序容器:文本查询程序
- linux达人养成计划学习笔记(五)—— 关机和重启命令
- CC2540开发板学习笔记(六)——AD控制(自带温度计)
- C#学习笔记(八)——定义类的成员
- cocos2dx游戏开发——微信打飞机学习笔记(十)——碰撞检测的搭建
- GoLang笔记-数组和切片,本质是就是长度不可变的可变的区别
- 随机信号处理笔记之色噪声及白化滤波器
- 论文笔记:基于特征选择与增量学习的非侵入式电动自行车充电辨识方法