- 浏览: 14425 次
最新评论
Extending Ext
2011年07月01日
from: -------------------------------------------------- -- http://www.extjs.com/learn/Tutorial:Extending_Ext_ for_Newbies_%28Chinese%29 -------------------------------------------------- -- 一般你会希望使用类(class)来诠释面何对象的思想。本教程的所述几点理点亦体现了这种思想。
复用的类
有时候你打算生成一个带有若干配置项(config options)的组件(component),这些配置项你会想是让它可复的。就好像一种情况,有一部分的面板是已经固定好高、宽的,其中只有标题是不同的,我们可以把它做成预配置类(preconfigured class)。
使用构造器函数
构造器函数是完成该任务的方法之一,如下例:
// 构造器函数
var MyPanel = function(config) {
Ext.apply(this, {
// 在这里设定预配置的参数项
width: 300,
height: 300
});
MyPanel.superclass.constructor.apply(this, arguments);
};
// My Panel继承了Ext.Panel
Ext.extend(MyPanel, Ext.Panel, {});
var myfirstpanel = new MyPanel({
title: 'My First Panel'
});
var mysecondpanel = new MyPanel({
title: 'My Second Panel'
});
工厂模式
生成“预配置对象”的一种途径是使用工厂模式(Factong Design Pattern)。透过工厂函数返回一个全新的实例(该函数包含了预先配置好的参数项),工厂模式的方法不需要类的继承。如果纯粹为了制定固定的配置项参数来讲工厂模式是一个不错的方法,其内部原理比继承、覆盖某个类来得简单。
function createMyPanel(config) {
return new Ext.Panel(Ext.apply({//在这里设定预配置的参数项
width: 300,
height: 300
}, config));
};
var myfirstpanel = createMyPanel({
title: 'My First Panel'
});
var mysecondpanel = createMyPanel({
title: 'My Second Panel'
});
扩展功能
使用OO的类的其中一个原因是你打算从另外一个类的基础上扩展新的功能,假设现在有一面板类,我们在此基础上增加一个新的方法并重写(override)父类的一个方法,过程如下:
// Constructor
var MyPanel = function(config) {
//这里复用配置项
Ext.apply(this,
width: 300,
height: 300
});
// 调用父类的构造函数,提取父类的功能
MyPanel.superclass.constructor.apply(this, arguments);
// 在这里你可以为当前对象新添加功能
// 如事件:
this.on('click', function() {alert("You Clicked " + this.title);}, this);
};
// My Panel继承了Ext.Panel
Ext.extend(MyPanel, Ext.Panel, {
// 在这里你可以为当前的类加入静态的变量,所有这个类生成的实例都是使用这里声明的变量
// 如果你不确定请在构造器内设定。不要在这里放置由'new'或'xtype'操作而成的对象。在构造器内设定配置项对象会更安全。
// 新添加的函数
myNewFunction: function() {
},
// 重写原有函数
onRender: function() {
MyPanel.superclass.onRender.apply(this, arguments);
this.myNewFunction();
}
});
var myfirstpanel = new MyPanel({
title: 'My First Panel'
});
var mysecondpanel = new MyPanel({
title: 'My Second Panel'
});
另一种方法是用构造器的方式写出代码:
var MyPanel = function(config) {
// 调用父类的构造函数,提取父类的功能
MyPanel.superclass.constructor.call(this, Ext.apply({
//这里复用配置项
width: 300,
height: 300
}, config));
// 位于构造器之后,在这里你可以为当前对象新添加功能(如处理如事件)
this.on('click', function() {alert("你已点击" + this.title);}, this);
};
以上的方法是重写构造器的方式实现继承的,另外我们还可以重写initComponents方法写出相同的功能,但需要指出是initComponent方法是属于 Ext.Components的方法,只能在组件上使用,不是一个通用的方法。这里是一个示例:
var MyPanel = Ext.extend(Ext.Panel, {
// 在这里你可以为当前的类加入静态的变量,所有这个类生成的实例都是使用这里声明的变量
// 如果你不确定请在构造器内设定。不要在这里放置由'new'或'xtype'操作而成的对象。在构造器内设定配置项对象会更安全。
initComponent: function() {
//Reusable config options here
Ext.apply(this,
width: 300,
height: 300
});
// 调用父类的构造函数,提取父类的功能
MyPanel.superclass.initComponent.apply(this, arguments);
// 位于构造器之后,在这里你可以为当前对象新添加功能(如处理如事件)
this.on(
'click',
function() {
alert("你已点击" + this.title);
},
this
);
},
// 新添加的函数
myNewFunction: function() {
},
// 重写原有函数
onRender: function() {
MyPanel.superclass.onRender.apply(this, arguments);
this.myNewFunction();
}
});
你首先可能会观察到的是这儿没有构造函数。Ext会为你创建构造函数。这个构造函数有点不同,叫initComponent。
这在高级教程和例子常见的使用方法。只要简单记住它做的事情与构造函数是差不多的。
推荐在调用父类的构造器或initComponent方法之后,为当前对象新添加事件。
MyPanel.superclass.constructor.apply(this, arguments);
// 位于构造器之后,在这里你可以为当前对象新添加功能(如处理如事件)
this.on(
'click',
function() {
alert("你已点击" + this.title);
},
this
);
工厂模式的案例中你可以在工厂方法以外的地方登记事件的处理函数。
myFirstPanel.on(
'click',
function() {
alert("你已点击" + this.title);
},
myFirstPanel //作用域
);
另外,除了添加listeners配置项还有其他处理监听器的方法,不过我推荐高级用户使用。
完成同一件事在Ext中有不同的方式。挑选一种你较倾向的方法。
发表评论
-
TCP长连接服务的Java实现
2012-01-20 00:49 1503TCP长连接服务的Java实现 ... -
Java 开发员AJAX 常见问题
2012-01-20 00:49 600Java 开发员AJAX 常见问题 ... -
Android IPC进程间通讯机制
2012-01-20 00:49 747Android IPC进程间通讯机制 2011年06月17日 ... -
说说IO - IO的分层
2012-01-20 00:49 672说说IO - IO的分层 2011年 ... -
使用 libevent 和 libev 提高网络应用性能
2012-01-20 00:49 1449使用 libevent 和 libev 提 ... -
i9001
2012-01-17 01:07 753i9001 2011年12月13日 一、外观检查,外壳、 ... -
从零开始- Android刷机指南<一>
2012-01-17 01:07 749从零开始- Android刷机指南 2011年07月27日 ... -
接上一篇
2012-01-17 01:07 653接上一篇 2011年04月25日 第 2 章 路由器基 ... -
ARM经典100问
2012-01-17 01:07 807ARM经典100问 2011年03月13日 第1章 体系 ... -
libevent源码深度剖析四
2012-01-15 19:48 630libevent源码深度剖析四 ... -
valgrind结果查看
2012-01-15 19:48 520valgrind结果查看 2011年12月30日 程序示 ... -
给大学生学习ARM和FPGA的建议(转)
2012-01-15 19:48 614给大学生学习ARM和FPGA的 ... -
教大家S40/java所有玩机技巧,喜欢请转载 加QQ657752021学习更多技术
2012-01-15 19:48 856教大家S40/java所有玩机 ... -
【下一页】linux(部分)
2012-01-15 19:48 714【下一页】linux(部分) 2012年01月09日 一 ... -
第2章 saas 成熟度模型-悟空悟道-iteye技术网站
2012-01-11 12:02 535第2章 saas 成熟度模型-悟空悟道-iteye技术网站 ... -
使用 JavaScript 获取 table 行号和列号
2012-01-11 12:02 797使用 JavaScript 获取 table 行号和列号 2 ... -
ReflectionUtils
2012-01-11 12:02 677ReflectionUtils 2011年07月01日 ... -
JPA中复合主键的映射
2012-01-11 12:01 548JPA中复合主键的映射 2011年07月01日 在航空系 ...
相关推荐
php extending and embedding
Extending the Linear Model with R: Generalized Linear, Mixed Effects and Nonparametric Regression Models, Second Edition
Sams Extending and Embedding PHP
Chapter 1, Introduction to Extending Docker, discusses Docker and some of the problems that it solves. We will also discuss some of the ways in which the core Docker engine can be extended to gain ...
Embedded Android Porting, Extending, and Customizing 2013最新版
flash cs5 extending 中文版,不用说了吧。非常的实用。呵呵
深入PHP内核及扩展开发英文chm Extending.and.Embedding.PHP
Extending Unity with Editor Scripting 英文无水印pdf pdf所有页面使用FoxitReader和PDF-XChangeViewer测试都可以打开 本资源转载自网络,如有侵权,请联系上传者或csdn删除 本资源转载自网络,如有侵权,请...
php extending and embedding<中文翻译版>
Teach user how to extend for PHP scripts
生存分析中重要的模型,cox model。广泛运用于生物,医学,商科。是重要的统计分支
Extending and Embedding PHP-english chm格式 有需要php扩展开发的,可以下载
Extending Docker-P2P English | ISBN: 1786463148 | 2016 | PDF+EPUB Get the first book on the market that shows you how to extend the capabilities of Docker using plugins and third-party tools. Master ...
ComboBox Extending the ComboBox Class and Its Items.检查
Embedded Android Porting Extending and Customizing Yaghmour 安卓底层平台移植指南,Karim Yaghmour 大神作品,O'REILLY 出版 很好的安卓底层移植,开发,和定制指南的英文书籍, ps:全英文版书籍,简略版,非...
编写Python脚本,来快速的进行ArcGIS工作。
讲述如何扩展kubernetes的, 讲的非常好!!!
通往php之路的web高手必看之书,本人在研究... ...《extending and embedding php》 这本书是分析php源码,教你写扩展的,比较低层。 两本都是sams出版的极品,已转成PDF方便打印, 是英文版的,看清楚,原计原味噢 - -!
fiddler extending
Embedded Android - Porting