一、命名空间
//命名空间
Ext.namespace("Ext.dojochina");
Ext.dojochina.HelloWorld = Ext.emptyFn;
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="../EXTJS/resources/css/ext-all.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../../EXTJS/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../EXTJS/ext-all.js"></script>
<script type="text/javascript" src="HelloWorld.js"></script>
<script type="text/javascript">
new Ext.dojochina.HelloWorld();
</script>
</head>
<body>
</body>
</html>
二、类实例属性
//类实例属性
Ext.namespace("Ext.dojochina");
Ext.dojochina.Person = Ext.emptyFn;
Ext.apply(Ext.dojochina.Person.prototype , {
name:"陈治文"
});
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="../EXTJS/resources/css/ext-all.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../../EXTJS/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../EXTJS/ext-all.js"></script>
<script type="text/javascript" src="Person.js"></script>
<script type="text/javascript">
var _person = new Ext.dojochina.Person();
alert(_person.name);
_person.name = "张妍娜"
alert(_person.name);
</script>
</head>
<body>
</body>
</html>
三、类实例方法
//类实例方法
Ext.namespace("Ext.dojochina");
Ext.dojochina.Person = Ext.emptyFn;
Ext.apply(Ext.dojochina.Person.prototype , {
name:"",
sex:"",
print:function(){
alert(String.format("姓名:{0},性别:{1}" , this.name , this.sex))
}
});
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="../EXTJS/resources/css/ext-all.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../../EXTJS/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../EXTJS/ext-all.js"></script>
<script type="text/javascript" src="Person.js"></script>
<script type="text/javascript">
var _person = new Ext.dojochina.Person();
_person.name = "陈冶文";
_person.sex = "男";
_person.print();
_person.name = "张妍娜"
_person.sex = "女";
_person.print();
</script>
</head>
<body>
</body>
</html>
四、静态方法
//静态方法
Ext.namespace("Ext.dojochina");
Ext.dojochina.Person = Ext.emptyFn;
Ext.dojochina.Person.print = function(_name , _sex){
var _person = new Ext.dojochina.Person();
_person.name = _name;
_person.sex = _sex;
_person.print();
}
Ext.apply(Ext.dojochina.Person.prototype , {
name:"",
sex:"",
print:function(){
alert(String.format("姓名:{0},性别:{1}" , this.name , this.sex))
}
});
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="../EXTJS/resources/css/ext-all.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../../EXTJS/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../EXTJS/ext-all.js"></script>
<script type="text/javascript" src="Person.js"></script>
<script type="text/javascript">
Ext.dojochina.Person.print("陈冶文" , "男");
Ext.dojochina.Person.print("张妍娜" , "女");
</script>
</head>
<body>
</body>
</html>
五、构造函数
//构造函数
Ext.namespace("Ext.dojochina");
Ext.dojochina.Person = function(_cfg){
Ext.apply(this , _cfg);
};
Ext.dojochina.Person.print = function(_name , _sex){
var _person = new Ext.dojochina.Person({name:_name , sex:_sex});
_person.print();
}
Ext.apply(Ext.dojochina.Person.prototype , {
print:function(){
alert(String.format("姓名:{0},性别:{1}" , this.name , this.sex))
}
});
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="../EXTJS/resources/css/ext-all.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../../EXTJS/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../EXTJS/ext-all.js"></script>
<script type="text/javascript" src="Person.js"></script>
<script type="text/javascript">
Ext.dojochina.Person.print("陈冶文" , "男");
Ext.dojochina.Person.print("张妍娜" , "女");
</script>
</head>
<body>
</body>
</html>
六、继承
//类继承
Ext.namespace("Ext.dojochina");
Ext.dojochina.Person = function(_cfg){
Ext.apply(this , _cfg);
};
Ext.apply(Ext.dojochina.Person.prototype , {
job:"无",
print:function(){
alert(String.format("姓名:{0},性别:{1},角色:{2}" , this.name , this.sex , this.job));
}
});
Ext.namespace("Ext.dojochina");
Ext.dojochina.Student = function(_cfg){
Ext.apply(this , _cfg);
}
Ext.extend(Ext.dojochina.Student , Ext.dojochina.Person , {
job:"学生"
});
Ext.namespace("Ext.dojochina");
Ext.dojochina.Teacher = function(_cfg){
Ext.apply(this , _cfg);
};
Ext.extend(Ext.dojochina.Teacher , Ext.dojochina.Person , {
job:"教师"
});
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="../EXTJS/resources/css/ext-all.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../../EXTJS/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../EXTJS/ext-all.js"></script>
<script type="text/javascript" src="Person.js"></script>
<script type="text/javascript" src="Student.js"></script>
<script type="text/javascript" src="Teacher.js"></script>
<script type="text/javascript">
var _teacher = new Ext.dojochina.Teacher({name:"陈冶文" , sex:"男"});
_teacher.print();
var _student = new Ext.dojochina.Student({name:"张妍娜" , sex:"女"});
_student.print();
</script>
</head>
<body>
</body>
</html>
这里可以做个修改，使用静态方法，哪么在HTML中JS可以写的更简单
七、方面重写
//方法重写
Ext.namespace("Ext.dojochina");
Ext.dojochina.Person = function(_cfg){
Ext.apply(this , _cfg);
};
Ext.apply(Ext.dojochina.Person.prototype , {
job:"无",
print:function(){
alert(String.format("姓名:{0},性别:{1},角色:{2}" , this.name , this.sex , this.job));
}
});
//方法重写
Ext.namespace("Ext.dojochina");
Ext.dojochina.Student = function(_cfg){
Ext.apply(this , _cfg);
};
Ext.extend(Ext.dojochina.Student , Ext.dojochina.Person , {
print:function(){
alert(String.format("{0}是一个{1}学生!" , this.name , this.sex));
}
});
//方法重写
Ext.namespace("Ext.dojochina");
Ext.dojochina.Student = function(_cfg){
Ext.apply(this , _cfg);
};
Ext.extend(Ext.dojochina.Student , Ext.dojochina.Person , {
print:function(){
alert(String.format("{0}是一个{1}学生!" , this.name , this.sex));
}
});
//方法重写
Ext.namespace("Ext.dojochina");
Ext.dojochina.Teacher = function(_cfg){
Ext.apply(this , _cfg);
};
Ext.extend(Ext.dojochina.Teacher , Ext.dojochina.Person , {
print:function(){
alert(String.format("{0}是一名{1}老师", this.name, this.sex));
}
});
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="../EXTJS/resources/css/ext-all.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../../EXTJS/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../EXTJS/ext-all.js"></script>
<script type="text/javascript" src="Person.js"></script>
<script type="text/javascript" src="Student.js"></script>
<script type="text/javascript" src="Teacher.js"></script>
<script type="text/javascript">
var _teacher = new Ext.dojochina.Teacher({name:"陈冶文" , sex:"男"});
_teacher.print();
var _student = new Ext.dojochina.Student({name:"张妍娜" , sex:"女"});
_student.print();
</script>
</head>
<body>
</body>
</html>
这里写的超级简单，主要是用做备忘
分享到：
相关推荐
标题中的"ext基础"指的是在计算机编程中，EXT（Extension）通常是指文件扩展名或软件扩展，这在很多编程语言和操作系统中都有所涉及。文件扩展名是文件名的一部分，用于标识文件的类型和用途。例如，".txt"用于纯...
完整的ext 3.2的版本，可以在examples文件夹下看到效果！完整的ext 基础教程，可以让ext基础开发者跟快的从事前端页面的开发和设计！
ext 学习资料 ext基础知识，基础教程。
### Ext 开发指南 ext基础教程 #### 极致解析：ExtJS基础知识与实践应用 **一、引言** 随着Web技术的不断进步和发展，越来越多的企业和开发者开始关注如何提升Web应用的用户体验。在这个背景下，ExtJS作为一个...
在这个"Ext基础入门示例"中，我们将探讨如何使用ExtJS中的核心组件——Panel，以及如何进行基本的入门操作，包括生成可编辑表格、数据统计图以及主题变换。 首先，让我们了解ExtJS中的Panel组件。Panel是ExtJS中最...
首先，EXT2.0的教程主要包括两个部分：《EXT2.0简明教程》和《ext基础教程》。这两份教材都是初学者了解EXTjs的重要资源。《EXT2.0简明教程》以CHM（Compiled Help Manual）格式提供，通常包含详尽的API文档和实例...
EasyExt_004_Ext基础架构_基本使用
这个是我学习Ext基础的一个测试文件。版本是Ext3.0希望对大家有用
这个压缩包包含的资源是关于Gwt-Ext的基础、中级和进阶学习资料，适合想要深入理解和应用Gwt-Ext的开发者。 在"基础篇"中，你将学习到以下知识点： 1. **GWT概述**：Google Web Toolkit是一个用于构建高性能、跨...
本资源包含5个ext的基础教程，保证初学者能轻松看懂以及迅速掌握ext的编写方法
富客户端程序RIA使Web表示层的技术向前...Ext JS及与之相关的GXT、Ext SHARP等开发工具的推出，使快速开发、基于可视化快速开发工具又向前迈进一大步。本书以学习Ext JS的开发人员为基本读者，介绍了Ext 2.2的基本使用
EXT简介 Ext 2简述 EXT新手建议 怎么轻松地进入Ext的世界? 从零开始Ext 设置基础页 Javascript中的作用域（scope）是什么?(一) Javascript中的作用域（scope）是什么?(二) Ext源码概述 Ext与RESTful Web Services ...
刚接触ext 自己做的一些布局方面的例子与大家分享 虽然很简单 希望对大家有帮助