声明:
①学习时Extjs版本3.2.0,
②引用ExtJs代码:
<link rel="stylesheet" type="text/css" href="../../ext-3.2.0/resources/css/ext-all.css">
<script type="text/javascript" src="../../ext-3.2.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-3.2.0/ext-all.js"></script>
面向对象设计一般主要有以下一些方面:①属性②方法③构造方法④继承⑤事件.先看个示例:
Person = function(_cfg){
Ext.apply(this,_cfg);
}
以上代码定义一个空的Person类,并实现构造方法。
Ext.apply(Person.prototype,{
name:"",
sex:"",
printf:function(){
alert(String.format("姓名:{0},性别:{1}",this.name,this,sex););
}
});
以上代码是给Person类增加两个属性及一个方法。这种添加属性方法的写法叫做"标量写法",Json格式,代码简练且方便。
Ext.onReady(function(){
//创建一个Person类的实例
var _person = new Person();
_person.name="余雅娜";
_person.sex="女";
_person.printf();
var _person_ = new Person({name:"李志文",sex:"男"});
_person_.printf();
});
以上代码实现了两种方式创建了两个Person对象,并调用printf方法来输出。
Student = function(_cfg){
Ext.apply(this,_cfg);
}
Ext.extend(Student,Person,{
name:"学生",
sex:"",
printf:function(){
alert(String.format("我是一个学生,名字:{0},性别:{1}",this.name,this.sex));
}
});
以上代码创建一个有构造参数的Student类,它继承了Person类,并重写了父类的属性方法。这里的继承,可以扩展属性及方法等。
到目前为止,已经学习了ExtJs的属性、方法、构造方法、继承。下面根据继承,说下事件.
Teacher = function(_cfg){
this.addEvents("namechange","sexchange");
}
Ext.extend(Teacher,Ext.util.Observable,{
name:"",
sex:"",
setName:function(_name){
if(this.name != _name){
//触发namechange事件
this.fireEvent("namechange",this,this.name,_name);
this.name = _name;
}
},
setSex:function(_sex){
if(this.sex != _sex){
this.fireEvent("sexchange",this,this.sex,_sex);
this.sex = _sex;
}
}
});
Ext.onReady(function(){
var _teacher = new Teacher();
_teacher.on("namechange",function(_teacher,_old,_new){
alert(String.format("老师的姓名改变了,由原来的:{0}变为了:{1}",_old,_new));
});
_teacher.on("sexchange",function(_teacher,_old,_new){
alert(String.format("老师的性别改变了,由原来的:{0}变为了:{1}",_old,_new));
})
_teacher.setName(prompt("请输入老师姓名",""));
_teacher.setSex(prompt("请输入老师性别",""));
});
以上代码创建了一个Teacher类,并给它添加了namechange,sexchange两个事件,这两个事件会分别在name/sex改变的时候触发。在实际调用的时候,创建_teacher对象,并添加监听,以及事件触发时的响应函数.
关于命名空间,Ext.namespace("Ext.test");不知道怎么回事,创建类Ext.test.Person时,调用老是报错,请拍砖指教!
分享到:
相关推荐
NULL 博文链接:https://njuptlinjian.iteye.com/blog/1568663
19、ExtJS之组件面向对象编程(一) 20、ExtJS之组件面向对象编程(一) 21、项目实战-需求分析、数据字典、数据库设计) r, `+ J( `$ l# d7 I$ h# W: U' r* a 22、项目实战-底层框架搭建、创建实体对象 23、项目实战...
基于javascript仿window桌面,webQQ 可兼容ie6 具有拖拽 滚动换屏等功能。还有右键菜单。而且有详细的中文注释,通过配置生成桌面 ,更加灵活,一款纯面向对象的webos设计模型,完全仿web.qq.com
例如在C#中,在一个静态类的静态方法中,按照过程式开发调用一系列静态函数,我们很难说这是面向对象的编程,相反,象jquery和extjs这样优秀的javascript库,却处处体现着面向对象的设计思想。本文不打算探讨...
本文介绍ExtJS,概述它背后的面向对象JavaScript设计概念,解释如何使用ExtJS框架开发富因特网应用程序的用户界面元素。当今有许许多多的Web开发框架,开发人员很难判断哪些框架值得花时间去学习。ExtJS是一种...
《Javascript高效图形编程》是一本具有很强实操性的Javascript图书,全书共分10章,涵盖的主要内容有:Javascript的面向对象机制、Javascript性能优化、jQuery和ExtJS库、高级UI设计、Web...
采用纯JS且面向对象的编程方式(事件处理机制swing、extjs思想中毒很深)开发,动态生成div等HTML代码,利用外部样式表以实现多风格支持,根据窗口大小自适应宽高,以使编辑区域最大可视化,仿jBPM designer eclipse...
《快意编程:Ext JS Web开发技术详解》首先对Ext JS进行了概述,然后通过一个简单的示例带领读者快速入门,在读者对Ext JS有了初步印象后,又重点介绍了JavaScript的面向对象技术、Ext JS API文档的使用方法、Ext JS...
软件开发思想从面向过程到OOP面向对象,再到AOP面向方面,每一次新思想的提出都能够降低对程序员的要求,加快软件开发的进度。该框架在实现的过程中提出一个新的概念IOP“面向项目的开发”。在这个思想的指导下,...
《JavaScript高效图形编程》是一本具有很强实操性的JavaScript图书,全书共分10章,涵盖的主要内容有:JavaScript的面向对象机制、JavaScript性能优化、jQuery和ExtJS库、高级UI设计、Web游戏开发、面向移动设备的...
软件开发思想从面向过程到OOP面向对象,再到AOP面向方面,每一次新思想的提出都能够降低对程序员的要求,加快软件开发的进度。该框架在实现的过程中提出一个新的概念IOP“面向项目的开发”。在这个思想的指导下,...
Web应用的开发正随着HTML 5与CSS 3标准的不断成熟而进入一个新的时代,JavaScript框架之间的...JQue ry UI因其轻量级、灵活的特点而受到追捧,Ext JS则以面向对象的模式设计、组件丰富、集成度高等优点而备受企业青睐。
本书是一本具有很强实操性的javascript图书,全书共分10章,涵盖的主要内容有:javascript的面向对象机制、javascript性能优化、jquery和extjs库、高级ui设计、web游戏开发、面向移动设备的开发、图形编程知识等。...
现在几乎只要软件开发项目,越来越多的公司采用富客户端技术,由于extjs过于宠大,及学习成本较高,更多的企业选择采用小巧而易用的jeasyui作为前端展示框架。 Maven是基于项目对象模型(POM),可以通过一小段描述...