这些年来,我们越来越重视基于浏览器到web应用。而大多数浏览器都内置了javascript,所以它成了事实上的页面客户端脚本标准。
自IE6以后,Microsoft发展自己的标准,更倾向于支持Jscript而不是javascript。然而IE占有市场的绝大份额,这就产生了一些问题。W3C创建了DOM的一些标准,像Mozilla,Opera都支持,只有IE迟迟没有向这些标准靠拢。这就给客户端开发者造成很多困扰,不得不创建跨浏览器的应用。Netscape和IE的浏览器大战已经持续了好几个版本了,都慢慢倾向于发展自己的标准,这对跨浏览器开发是很大的挑战。这导致了开发者更愿意用基本的表单校验和图片来处理而不愿花时间和力气去做麻烦的跨浏览器客户端。
当进入了Web2.0时代,ajax成了个热门词。Ajax 其实也不是什么新技术,熟知的javascript的开发者希望利用它来创建更加动态的,交互性更强的富客户端应用。
当对前台页面脚本编程的兴趣卷土重来时,依然存在着跨浏览器的问题。因此出现一些跨浏览器的javascript包,像Dojo,Prototype,Yahoo UI等等,他们充满了活力,期望解决先前跨浏览器令人头疼的问题。这些包的开发者,与javascript一起共同前进,javascript也发展成了可以面向对象编程。这使得我们可以创建对象,可以扩展代码,可以重复利用代码。当然我们所谓的面向对象,是借助了javascript的prototype编程模式的。
利用Extjs来面向对象编程
Extjs是javascript面向编程的一个很好的例子。Ext js的包是很容易扩展的。我们可以根据自己的需要,在已有对象的基础上继承和扩展对象,不需要从头写起。
继承
为了能更好的知道我们可以做什么,我们要先知道面向对象编程的一个重要概念:继承。
当我们要创建自己的控件时,我们可以继承Extjs已有的控件,然后扩展我们需要的属性,复写已有的函数。
这样说可能有点混乱,因为有点复杂。不过我们可以来看一个简单的例子。假设我们在为某个公司做一个客户管理应用,该公司有销售人员,他们有着客户和联系方式。公司有卖主,也有联系方式。我们的这个例子里需要3个简单的类,其实都是人。
Salesperson
ClientContact
VendorContact
这些人的对象可以共用一些基本的属性和方法,因为每个人都有姓名,email地址,电话号码和通信地址。我们可以用一张图更清晰的分析这个类。
人这个对象有4个属性:name,emailAddress,phoneNumber和address.同时address 这个属性本身也是个对象。有简单的方法如get和set来设置和获取属性值。
每个对象有区分的id,如salesPersonID,clientContactID或vendorContactID.
注意到我们的SalesPerson 类中并无关于人的任何属性和方法。因为SalePerson继承了Person对象。Person 里的所有属性和方法也成了SalesPerson的一部分。现在我们可以创建SalesPerson.
var sp = new SalesPerson();
你可以给sp一个名字
sp.setName(“guoyiqi”);
你不必通过对象(SalesPerson)的父类(Person)去调用方法和属性,因为通过继承,SalesPerson就是一个Person.。
接下来我们看下覆写。
通过继承,父类的属性和方法子类都可以拥有。但有时子类的方法和父类的方法有所不同。比如:Person类有个validate()方法,用来校验属性值并返回错误信息。在SalesPerson对象里,还有其他属性要校验,这时你就要覆写已有的方法。
validate: function() {
// Some validation code here
}
在这个例子里,所有的属性都要校验,所以我们可以这样写:
validate: function() {
var errorArr = ourObjects.salesperson.superclass.validate.
call(this);
// The salesperson specific validate stuff, appending the errorArr
return errorArr;
}
这就是基本的面向对象编程了,如果懂了我们就可以用Extjs来创建我们自己的类了。
当然我们还要了解一下其他面向对象的词:
Package,包,一些相关的类我们可以放在一个包里。例如,Ext.data包就是用来处理不同种类的data Stores,readers和records。Ext.grid包包括了不同的表格控件和选择方法。Ext.form包包括了form的不同表单项属性。
Class,类,定义了对象的属性和方法,我们先前的例子,Person和SalesPerson就都是类对象,而且应该放到一个包里。
Namespaces,命名空间,类是包的一部分,包也有自己的命名空间。Namespaces 包含了逻辑上成组的包和类。例如,extjs 包含在Ext这个命名空间里。命名空间已.隔开,如Ext.grid,Ext.form,Ext.data都是命名空间。
我们了解了这些基本概念后,就可以把它们应用到我们自定义的Extjs控件中了。
分享到:
相关推荐
Learning ExtJs 第四版 随书源代码。采用的Ext 5。
根据提供的文件信息,可以看出主题是关于ExtJS框架与面向对象编程的实现方式。然而,由于提供的部分内容似乎并不完整且存在一些非标准字符,这给直接提取有用信息带来了困难。因此,我们将基于标题、描述和标签中的...
ExtJS是一种强大的JavaScript库,用于构建现代化的数据驱动型Web应用程序。它提供了丰富的用户界面组件集合,并支持多种数据交互方式,使得开发人员能够轻松地创建出类似桌面应用的网页体验。 #### 二、图书基本...
learning extJS 随书源码,非常流行的富客户端脚本框架。
Learning ExtJS 3.2.pdf绝对的高清,不过是英文的,下载之前考虑好,不想骗你们的分,呵呵
在EXTJS这个强大的JavaScript框架中,下拉列表(ComboBox)是一种常见的UI组件,它用于创建交互式的下拉选择框。EXTJS的下拉列表不仅提供了基本的选项选择功能,还支持自定义渲染、远程数据加载等多种高级特性。本文...
Learning ExtJS.pdf 当今社会,这个你得会。
本篇文章将深入探讨EXTJS中文版中的表单提交相关知识点。 一、EXTJS表单基础 EXTJS的表单(Form)组件是用于收集用户输入数据的容器,它由多个字段(Field)组成,如文本框、选择框、复选框等。每个字段都有自己的...
### 关于《Learning ExtJS》 #### 书籍概述 《Learning ExtJS》是一本专注于ExtJS框架学习的专业书籍。此书由Shea Frederick、Colin Ramsay和Steve 'Cutter' Blades共同撰写,并由Packt Publishing出版。该书旨在...
《TextArea_HTMLEditor 编辑器学习指南——探索EXTJS中文版的奥秘》 在Web开发领域,富文本编辑器是不可或缺的一部分,它允许用户以类似Word的方式编辑网页内容。EXTJS作为一款强大的JavaScript框架,提供了丰富的...
**EXTJS**是一款功能强大的JavaScript库,用于构建交互式、数据驱动的Web应用程序。它最初由Jack Slocum在2006年创建,并随后被Sencha公司收购。本书《Learning ExtJS》旨在帮助开发者掌握使用EXTJS构建桌面风格用户...
ExtJs学习资料14-OOP[JavaScript面向对象编程]
ExtJS是一种基于JavaScript的开源富客户端框架,用于构建桌面级的Web应用程序。它提供了一整套组件化的用户界面元素和强大的数据绑定机制,使得开发者能够创建功能丰富的、交互性强的Web应用。本文档集合包括了...
例如,JavaScript库如ExtJS和YUI就是面向对象编程的典型应用,它们通过封装复杂的交互逻辑和组件,提高了开发效率。 总之,JavaScript的面向对象编程并不局限于传统的类和继承,而是通过对象、原型和函数等手段实现...
Extjs 4.0中文版API
ExtJs2.0学习系列(1)--Ext.MessageBox
如果你读过extjs的原代码,一定知道它是基于面向对象思想代码。该代码不同于extjs,更加合理且容易理解。
learning extjs(中英文打包下载) 中文的来自www.17ext.com,不齐,将就用。