`
八岭书生
  • 浏览: 104475 次
  • 性别: Icon_minigender_1
  • 来自: 福州
社区版块
存档分类
最新评论

EXTJS面向对象设计

阅读更多

记得要将代码放到ext-2.3.0(我用的是这个)中,才能运行哦,还有注意js和css的路径问题!!

 

1、支持命名空间(文件夹namespace中)

 

HelloWorld.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 命名空间 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css"/>
<script src="../adapter/ext/ext-base.js"></script>
<script src="../ext-all.js"></script>
<script src="HelloWorld.js"></script>
<script>
    new Ext.test.HelloWorld(); // 创建一个类的实例
</script>
</HEAD>
<BODY>

</BODY>
</HTML>

HelloWorld.js

Ext.namespace("Ext.test");// 定义一个命名空间

Ext.test.HelloWorld = Ext.emptyFn;// 在命名空间上定义一个类HelloWorld

//Ext.test.HelloWorld = function(){};
 

2、支持类实例属性(文件夹property中)

 

Person.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 类实例属性 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css"/>
<script src="../adapter/ext/ext-base.js"></script>
<script src="../ext-all.js"></script>
<script src="Person.js"></script>
<script>
     var _person = new Ext.test.Person();
	 alert(_person.name);

	 _person.name="chen";// 修改name属性
	 alert(_person.name);
</script>
</HEAD>
<BODY>

</BODY>
</HTML>

Person.js

Ext.namespace("Ext.test");
Ext.test.Person = Ext.emptyFn;

//apply方法用来把后面对象的参数拷贝到第一个对象中
Ext.apply(Ext.test.Person.prototype,{
			name:"lian"
	});


以下只写javascript脚本,具体如上!


3、支持类实例方法(文件夹instanceMethod中)

 

Person.html

<script src="Person.js"></script>
<script>
     var _person = new Ext.test.Person();
	 _person.name="lian";
	 _person.sex="男";
	 _person.print();

	 _person.name="chen";
	 _person.sex="女";
	 _person.print();
</script>

Person.js

Ext.namespace("Ext.test");
Ext.test.Person = Ext.emptyFn;

// 类实例方法
Ext.apply(Ext.test.Person.prototype,{
			name:"",
			sex:"",
			print:function(){
				alert(String.format("姓名:{0},性别:{1}",this.name,this.sex));
			}
	});
 

4、支持类静态方法 (文件夹staticMethod中)

 

Person.html

<script src="Person.js"></script>
<script>
	Ext.test.Person.print("lian","男");//调用类静态方法
</script>

Person.js

Ext.namespace("Ext.test");
Ext.test.Person = Ext.emptyFn;

//类静态方法
Ext.test.Person.print = function(_name,_sex){
		var _person = new Ext.test.Person();
 		_person.name = _name;
	    _person.sex=_sex;
        _person.test();//调用类实例方法

}

Ext.apply(Ext.test.Person.prototype,{
			name:"",
			sex:"",
			test:function(){
				alert(String.format("姓名:{0},性别:{1}",this.name,this.sex));
			}
	});

 

5、支持构造器 (文件夹constructor中)

 

Person.html

<script src="Person.js"></script>
<script>
	Ext.test.Person.print("lian","男");// 调用类 静态方法
</script>

 Person.js

Ext.namespace("Ext.test");

// 构造方法
Ext.test.Person = function(_cfg){
	Ext.apply(this,_cfg);
};

// 类静态方法
Ext.test.Person.print = function(_name,_sex){
		var _person = new Ext.test.Person({name:_name,sex:_sex});
        _person.test();// 调用类 实例方法
}

// 类实例方法
Ext.apply(Ext.test.Person.prototype,{
			test:function(){
				alert(String.format("姓名:{0},性别:{1}",this.name,this.sex));
			}
	});
 

6、支持类继承 (文件夹extend中)

 

Person.html

<script src="Person.js"></script>
<script src="Student.js"></script>
<script src="Teacher.js"></script>
<script>
	var _teacher = new Ext.test.Teacher({name:"lian",sex:"男"});
	_teacher.test();

	var _student = new Ext.test.Student({name:"chen",sex:"女"});
	_student.test();
</script>

 Person.js

Ext.namespace("Ext.test");

Ext.test.Person = function(_cfg){
	Ext.apply(this,_cfg);
};

Ext.apply(Ext.test.Person.prototype,{
	        job:"无",
			test:function(){
				alert(String.format("姓名:{0},性别:{1},角色:{2}",this.name,this.sex,this.job));
			}
	});

Student.js

Ext.namespace("Ext.test");

Ext.test.Student = function(_cfg){
	Ext.apply(this,_cfg);
};

Ext.extend(Ext.test.Student,Ext.test.Person,{
		job:"学生"
	});

Teacher.js

Ext.namespace("Ext.test");

Ext.test.Teacher = function(_cfg){
	Ext.apply(this,_cfg);
};

Ext.extend(Ext.test.Teacher,Ext.test.Person,{
		job:"教师"
	});

 

7、支持类方法重写 (文件夹override中)

 

Student.js

Ext.namespace("Ext.test");

Ext.test.Student = function(_cfg){
	Ext.apply(this,_cfg);
};

//重写test()方法
Ext.extend(Ext.test.Student,Ext.test.Person,{
		test:function(){
				alert(String.format("{0}是一位{1}学生",this.name,this.sex));
			}
	});

Teacher.js

Ext.namespace("Ext.test");

Ext.test.Teacher = function(_cfg){
	Ext.apply(this,_cfg);
};

Ext.extend(Ext.test.Teacher,Ext.test.Person,{
			test:function(){
				alert(String.format("{0}是一位{1}老师",this.name,this.sex));
			}
	});

 其余的与类继承一样。

 

8、支持命名空间别名 (文件夹nameShort中)

 

Person.html

<script src="Person.js"></script>
<script>
	Pk.Person.print("lian","男");
</script>

 Person.js

Ext.namespace("Ext.test");

Pk=Ext.test;//命名空间别名

Ext.test.Person = function(_cfg){
	Ext.apply(this,_cfg);
};

Ext.test.Person.print=function(_name,_sex){

	var _person = new Pk.Person({name:_name,sex:_sex});
	_person.test();
}

Ext.apply(Ext.test.Person.prototype,{
			test:function(){
				alert(String.format("姓名:{0},性别:{1}",this.name,this.sex));
			}
	});

 

9、支持类别名 (文件夹nameAlis中)

 

Person.html

<script src="Person.js"></script>
<script>
	PN.print("bcterry","男");
</script>

 Person.js

Ext.namespace("Ext.test");

Ext.test.Person = function(_cfg){
	Ext.apply(this,_cfg);
};

PN=Ext.test.Person;//类别名

Ext.test.Person.print=function(_name,_sex){

	var _person = new PN({name:_name,sex:_sex});
	_person.test();
}

Ext.apply(Ext.test.Person.prototype,{
			test:function(){
				alert(String.format("姓名:{0},性别:{1}",this.name,this.sex));
			}
	}); 

 

10、支持事件队列 (文件夹event中)

 

Person.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 事件(订阅) </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css"/>
<script src="../adapter/ext/ext-base.js"></script>
<script src="../ext-all.js"></script>
<script src="Person.js"></script>
<script>
    var _person = null;
	button_click = function(){
		_person.setName(prompt("请输入姓名:",""));
		_person.setSex(prompt("请输入性别:",""));
	}
	
	//先加载
	Ext.onReady(function(){
		var txt_name = Ext.get("txt_name");//获得dom对象 
		var txt_sex = Ext.get("txt_sex");

		_person = new Ext.test.Person();

		//注册事件
        _person.on("namechange",function(_person,xx,yy){
									alert(1);
									txt_name.dom.value = yy;	
		                        });

		_person.on("sexchange",function(_person,_old,_new){
									txt_sex.dom.value = _new;			
		                        });

        _person.on("namechange",function(_person,_old,_new){
									document.title = _new;	//设置标题		
		                        });

	});

</script>
</HEAD>
<BODY>
姓名:<INPUT TYPE="text" id="txt_name" NAME="" maxlength="10">
性别:<INPUT TYPE="text" id="txt_sex" NAME="" maxlength="10">
<INPUT TYPE="button" value="输入" NAME="" onclick="button_click()">
</BODY>
</HTML>

 Person.js

Ext.namespace("Ext.test");

Ext.test.Person = function(){
	//定义事件
	this.addEvents(
		"namechange",
		"sexchange"
	);
};

Ext.extend(Ext.test.Person,Ext.util.Observable,{
	     name:"",
		 sex:"",
		 setName:function(_name){
            if(this.name!=_name){
				alert(0);
                 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;
            }
		 }
});
 

 

 

分享到:
评论

相关推荐

    ExtJS对几种面向对象体现.txt

    根据提供的文件信息,可以看出主题是关于ExtJS框架与面向对象编程的实现方式。然而,由于提供的部分内容似乎并不完整且存在一些非标准字符,这给直接提取有用信息带来了困难。因此,我们将基于标题、描述和标签中的...

    ExtJs培训sample_for面向对象设计

    "ExtJS培训sample_for面向对象设计"这个主题主要聚焦于如何在ExtJS中应用面向对象的设计原则和模式。 在面向对象设计中,有四个核心概念:封装、继承、多态和抽象。这些概念同样适用于JavaScript,因为JavaScript是...

    ext面向对象和继承

    在JavaScript的世界里,面向对象(Object-Oriented Programming, OOP)是一种常用的设计模式,它允许我们通过类和对象来组织代码,实现代码的复用和模块化。本篇文章将探讨EXTJS框架中的面向对象机制,特别是继承的...

    轻松搞定Extjs 带目录

    它强调了JavaScript面向对象编程(OOP)在Extjs框架中的应用,并通过实例演示了如何使用各种组件和布局来创建复杂的用户界面。本教程通过递进式的结构,使读者从基础知识起步,逐步掌握Extjs的高级应用,最终能够...

    ExtJs 类的设计

    它的类系统是其核心特性之一,借鉴了面向对象编程的概念,使得在JavaScript中可以实现结构化、可复用的代码。这篇博客文章“ExtJs 类的设计”可能深入探讨了如何在ExtJs中有效地设计和使用类。 1. **类的定义** 在...

    ext面向对象编程教程

    EXTJS 面向对象编程教程 EXTJS 是一个基于 JavaScript 的富客户端框架,它提供了强大的组件模型和面向对象的编程方式,使得开发者能够构建复杂的 Web 应用程序。面向对象编程(Object-Oriented Programming, OOP)...

    extjs与系统切分模块设计

    - **面向对象编程**:ExtJS鼓励使用面向对象的编程模式,便于代码的管理和维护。例如: ```javascript Ext.namespace('demo'); demo.User = Ext.extend(Ext.Panel, { getName: function() { // 实现方法 } })...

    ExtJs与C#做的简易毕业设计论文管理系统

    另一方面,**C#** 是一种强大的面向对象编程语言,常用于构建.NET Framework的应用程序。在本项目中,C#被用来编写后端服务,处理用户请求、数据存储、业务逻辑以及与数据库的交互。可能使用ASP.NET MVC或者ASP.NET ...

    深入浅出Extjs4.1.1

    19、ExtJS之组件面向对象编程(一) 20、ExtJS之组件面向对象编程(一) 21、项目实战-需求分析、数据字典、数据库设计) r, `+ J( `$ l# d7 I$ h# W: U' r* a 22、项目实战-底层框架搭建、创建实体对象 23、项目实战...

    ExtJS 3.4 源码包

    - **JS类系统**:ExtJS使用面向对象的类系统,类与类之间可以通过继承实现代码重用和扩展。 - **事件系统**:事件驱动是ExtJS的核心机制,允许组件间通信和响应用户操作。 - **Ajax通信**:Ext.Ajax模块负责异步...

    php+ExtJS 开发实战

    面向对象编程(OOP)是ExtJS框架的核心设计理念之一。通过采用面向对象的方法,开发者可以更好地组织代码结构,提高代码的复用性和维护性。 - **类与继承**: 在ExtJS中,可以通过定义类来创建组件,并通过继承机制...

    传智播客EXTJS视频下载地址

    - **资源推荐**:《传智播客成都中心JavaScript面向对象及ExtJS基础视频》中的AJAX章节(PPT格式),通过实例讲解了如何使用ExtJS进行AJAX调用。 2. **浏览器对象模型(BOM)**:这部分资料讲解了浏览器对象模型的...

    EXTjs4.0学习文档

    EXTJS 4.0 是一个面向开发 RIA 的 AJAX 应用,是一个用 JavaScript 写的,主要用于创建前端用户界面,是一个与后台技术无关的前端 AJAX 框架。它能够帮助我们在页面上快速而简单构建各种各样的控件,简化我们自己去...

    Extjs 性能优化 High Performance ExtJs

    本文旨在针对具有一定 JavaScript 基础(理解面向对象、继承、作用域等概念)并且熟悉 Extjs 框架(了解组件间继承关系)的开发者,提供一些关于如何对 Extjs 的前台架构进行性能优化的方法。 #### 二、缓存 缓存...

    .net+Extjs 实例

    .NET,全称Microsoft .NET Framework,是由微软公司开发的一种全面的、面向对象的开发平台,包含了一整套用于构建各种类型的应用程序的工具和服务。它提供了C#、VB.NET等编程语言,以及ASP.NET用于Web开发,使得...

    EXTJS4开发的图片文章管理项目实例

    JAVA的强类型和面向对象特性使其在处理复杂业务时表现出色。 MYSQL是广泛使用的开源关系型数据库,对于中小规模的数据存储非常合适。在“图片文章管理项目”中,MYSQL可能包含了多个表,如文章表(包含文章ID、标题...

    extjs4_任务调度管理系统

    Hibernate作为对象关系映射框架,提供了一种面向对象的方式来操作数据库,而iBatis则更注重SQL的灵活控制。两者各有优势,可以根据实际需求进行选择和结合,以满足不同的数据访问策略。 Spring框架在系统中扮演着...

    SSH+Extjs框架

    2. **Hibernate**:这是一个强大的对象关系映射(ORM)框架,它允许开发者使用面向对象的方式来操作数据库。Hibernate负责将Java对象与数据库表进行映射,使得在处理数据库操作时,开发者可以避免编写大量的SQL语句...

Global site tag (gtag.js) - Google Analytics