一、命名空间
//命名空间
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>
这里写的超级简单，主要是用做备忘
分享到：
相关推荐
NULL 博文链接：https://piaoyixiaodao.iteye.com/blog/408518
完整的ext 3.2的版本，可以在examples文件夹下看到效果！完整的ext 基础教程，可以让ext基础开发者跟快的从事前端页面的开发和设计！
ext 学习资料 ext基础知识，基础教程。
EasyExt_004_Ext基础架构_基本使用
EXT基础EXT基础EXT基础EXT基础
Ext基础入门实例 适合新手入门 可以生成可编辑表格 数据统计图 随意变换主题 界面简洁大方
EasyExt_005_Ext基础架构_操作DOM（二）
EasyExt_006_Ext基础架构_事件机制
ext是一个强大的js类库,以前是基于YAHOO-UI,现在已经完全独立了。附件内包括了：《EXT2.0简明教程》CHM版本 和 《ext基础教程》DOC版本。
ext开发指南ext开发指南ext开发指南ext开发指南ext开发指南ext开发指南ext开发指南ext开发指南ext开发指南ext开发指南ext开发指南ext开发指南ext开发指南ext开发指南
ext是一个强大的js类库,以前是基于YAHOO-UI,现在已经完全独立了, 主要包括data,widget,form,grid,dd,menu,其中最强大的应该算grid了,编程思想是基于面向对象编程(oop),扩展性相当的好.可以自己写扩展.自己定义命名...
这个是我学习Ext基础的一个测试文件。版本是Ext3.0希望对大家有用
本资源包含5个ext的基础教程，保证初学者能轻松看懂以及迅速掌握ext的编写方法
富客户端程序RIA使Web表示层的技术向前...Ext JS及与之相关的GXT、Ext SHARP等开发工具的推出，使快速开发、基于可视化快速开发工具又向前迈进一大步。本书以学习Ext JS的开发人员为基本读者，介绍了Ext 2.2的基本使用
EXT学习文档，介绍了各种组件使用方式，内有代码和图片
EXT简介 Ext 2简述 EXT新手建议 怎么轻松地进入Ext的世界? 从零开始Ext 设置基础页 Javascript中的作用域（scope）是什么?(一) Javascript中的作用域（scope）是什么?(二) Ext源码概述 Ext与RESTful Web Services ...
ext北风基础班讲义 Ext基础_第二讲信息提示框组件
刚接触ext 自己做的一些布局方面的例子与大家分享 虽然很简单 希望对大家有帮助
ssh-orcale-ext 实现ext的分页，grid的编辑并异步保存...以及viewport等一些ext的基础知识，算是学了两个星期的小结吧。 对新手应该会有帮助。一个完整的工程， 带有.sql文件，导入表和数据，修改数据库连接就能运行。