八岭书生
- 浏览: 104681 次
- 性别:
- 来自: 福州
-
最新评论
-
u011703958：
u011703958 写道[color=olive][/col ...
ExtJS实现异步Tree的节点搜索 -
u011703958：
[color=olive][/color]
ExtJS实现异步Tree的节点搜索 -
u011703958：
ExtJS实现异步Tree的节点搜索 -
八岭书生：
winney117 写道您好，我的import org.apa ...
MyBatis简单入门实例 -
winney117：
您好，我的import org.apache.ibatis.i ...
MyBatis简单入门实例
记得要将代码放到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;
}
}
});
分享到：
发表评论
-
oracle中clob属性HTML标签在jsp页面的输出
2012-04-17 11:30 38971、如何在jsp页面显示从数据库里读出来的带有HTML标 ... -
伸缩的菜单
2012-03-19 23:10 1314<style> <!-- body{ ... -
html中的map属性--地图例子
2012-03-19 23:08 2252<body> <img src=&qu ... -
可变颜色标签<a>
2012-03-19 22:54 1229<script type="text/java ... -
JS实现三级联动下拉框
2012-03-19 22:43 8278<script type="text/java ... -
同时兼容IE和FireFox的事件处理event代码--添加文件上传例子
2012-03-18 11:23 2051一、向指定的table中插 ... -
关于Ajax与iframe及target的问题
2012-03-18 10:07 2766需求：在一个页面（iframe.html）中点击“ ... -
a标签点击改变颜色，同时table里面内容颜色改变
2012-03-09 10:35 3998<script type="text/java ... -
测试jquery
2012-01-03 12:25 1272<!DOCTYPE html PUBLIC " ... -
java操作有下拉框选择的excel
2012-01-02 23:24 9206从http://sourceforge.net/project ... -
通过JavaScript实现一个动态时钟
2011-05-21 20:14 2426<!DOCTYPE html PUBLIC " ... -
显示当前在线人数——监听器listener
2011-05-21 18:53 1599显示在线人员列表 <%@ page langua ... -
引入JavaScript脚本代码到HTML文档中
2011-04-17 15:51 1768在学习JavaScript时的一些小结，呵呵... h ... -
简单的AJAX例子详解
2011-04-09 15:20 1056ajax.jsp <%@ page langua ...
相关推荐
根据提供的文件信息，可以看出主题是关于ExtJS框架与面向对象编程的实现方式。然而，由于提供的部分内容似乎并不完整且存在一些非标准字符，这给直接提取有用信息带来了困难。因此，我们将基于标题、描述和标签中的...
"ExtJS培训sample_for面向对象设计"这个主题主要聚焦于如何在ExtJS中应用面向对象的设计原则和模式。 在面向对象设计中，有四个核心概念：封装、继承、多态和抽象。这些概念同样适用于JavaScript，因为JavaScript是...
在JavaScript的世界里，面向对象（Object-Oriented Programming, OOP）是一种常用的设计模式，它允许我们通过类和对象来组织代码，实现代码的复用和模块化。本篇文章将探讨EXTJS框架中的面向对象机制，特别是继承的...
例如，JavaScript库如ExtJS和YUI就是面向对象编程的典型应用，它们通过封装复杂的交互逻辑和组件，提高了开发效率。 总之，JavaScript的面向对象编程并不局限于传统的类和继承，而是通过对象、原型和函数等手段实现...
它强调了JavaScript面向对象编程（OOP）在Extjs框架中的应用，并通过实例演示了如何使用各种组件和布局来创建复杂的用户界面。本教程通过递进式的结构，使读者从基础知识起步，逐步掌握Extjs的高级应用，最终能够...
它的类系统是其核心特性之一，借鉴了面向对象编程的概念，使得在JavaScript中可以实现结构化、可复用的代码。这篇博客文章“ExtJs 类的设计”可能深入探讨了如何在ExtJs中有效地设计和使用类。 1. **类的定义** 在...
EXTJS 面向对象编程教程 EXTJS 是一个基于 JavaScript 的富客户端框架，它提供了强大的组件模型和面向对象的编程方式，使得开发者能够构建复杂的 Web 应用程序。面向对象编程（Object-Oriented Programming, OOP）...
- **面向对象编程**：ExtJS鼓励使用面向对象的编程模式，便于代码的管理和维护。例如： ```javascript Ext.namespace('demo'); demo.User = Ext.extend(Ext.Panel, { getName: function() { // 实现方法 } })...
另一方面，**C#** 是一种强大的面向对象编程语言，常用于构建.NET Framework的应用程序。在本项目中，C#被用来编写后端服务，处理用户请求、数据存储、业务逻辑以及与数据库的交互。可能使用ASP.NET MVC或者ASP.NET ...
19、ExtJS之组件面向对象编程（一） 20、ExtJS之组件面向对象编程（一） 21、项目实战-需求分析、数据字典、数据库设计) r, `+ J( `$ l# d7 I$ h# W: U' r* a 22、项目实战-底层框架搭建、创建实体对象 23、项目实战...
- **JS类系统**：ExtJS使用面向对象的类系统，类与类之间可以通过继承实现代码重用和扩展。 - **事件系统**：事件驱动是ExtJS的核心机制，允许组件间通信和响应用户操作。 - **Ajax通信**：Ext.Ajax模块负责异步...
面向对象编程（OOP）是ExtJS框架的核心设计理念之一。通过采用面向对象的方法，开发者可以更好地组织代码结构，提高代码的复用性和维护性。 - **类与继承**: 在ExtJS中，可以通过定义类来创建组件，并通过继承机制...
- **资源推荐**：《传智播客成都中心JavaScript面向对象及ExtJS基础视频》中的AJAX章节（PPT格式），通过实例讲解了如何使用ExtJS进行AJAX调用。 2. **浏览器对象模型（BOM）**：这部分资料讲解了浏览器对象模型的...
EXTJS 4.0 是一个面向开发 RIA 的 AJAX 应用，是一个用 JavaScript 写的，主要用于创建前端用户界面，是一个与后台技术无关的前端 AJAX 框架。它能够帮助我们在页面上快速而简单构建各种各样的控件，简化我们自己去...
本文旨在针对具有一定 JavaScript 基础（理解面向对象、继承、作用域等概念）并且熟悉 Extjs 框架（了解组件间继承关系）的开发者，提供一些关于如何对 Extjs 的前台架构进行性能优化的方法。 #### 二、缓存 缓存...
.NET，全称Microsoft .NET Framework，是由微软公司开发的一种全面的、面向对象的开发平台，包含了一整套用于构建各种类型的应用程序的工具和服务。它提供了C#、VB.NET等编程语言，以及ASP.NET用于Web开发，使得...
JAVA的强类型和面向对象特性使其在处理复杂业务时表现出色。 MYSQL是广泛使用的开源关系型数据库，对于中小规模的数据存储非常合适。在“图片文章管理项目”中，MYSQL可能包含了多个表，如文章表（包含文章ID、标题...
Hibernate作为对象关系映射框架，提供了一种面向对象的方式来操作数据库，而iBatis则更注重SQL的灵活控制。两者各有优势，可以根据实际需求进行选择和结合，以满足不同的数据访问策略。 Spring框架在系统中扮演着...
2. **Hibernate**：这是一个强大的对象关系映射（ORM）框架，它允许开发者使用面向对象的方式来操作数据库。Hibernate负责将Java对象与数据库表进行映射，使得在处理数据库操作时，开发者可以避免编写大量的SQL语句...
- **继承机制**：ExtJS支持面向对象编程中的继承特性，可以扩展现有的组件类。 - **继承示例**：文档中给出了一些具体的继承示例，帮助理解继承的用法。 #### 22. 补充资料 - **Ext2概述**：介绍了ExtJS 2版本的...