工作中项目需要extjs，所以学习一下，做个笔记防止遗忘了。以后回忆起来也方便。
首先下载extjs官网地址：http://extjs.org.cn/
下载以后的目录结构：
先写一个入门的程序吧自定义类实现
- 新建web项目。
- 导入js文件。
- 项目中引用。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Hello Extjs4.2</title>
<link href="../ExtJS4.2/resources/css/ext-all.css" rel="stylesheet">
<script src="../ExtJS4.2/ext-all.js"></script>
<script src="d1.js"></script>
</head>
<body>
<h1>ExtJS4.2学习</h1>
<hr />
作者：springok
<h2>ExtJS 中自定义类</h2>
</body>
</html>d1.js:
Ext.define('springok.Demo',{
name:'springok',
hello:function(){
return 'Hello'+this.name;
}
});
Ext.onReady(function(){
alert(new springok.Demo().hello());
});测试：
很简单的主要就是类的实例化和调用。
测试一下类的实例化和调用的过程oo思想的体现：
d1.js修改为：
Ext.define('springok.Demo',{
name:'ThinkDiary',
hello:function(){
return 'Hello'+this.name;
}
});
Ext.define('springok.Window',{
extends:'Ext.Window',
title:'springok',
initComponent:function(){ //初始化 先执行initComponent 再执行自定义初始化构造函数
document.write( "initComponent执行......." );
Ext.apply(this,{//将一批属性复制给当前对象
items:[{
html:'11111'
},{
html:'2222222'
}]
});
this.callParent();//快捷调用父类函数
},
mixins:['springok.Demo'], //多重继承
config:{ //辅助功能属性
title:'demo'
},
statics:{ //定义类静态成员
TYPE_DEFAULT:1
},
constructor:function(){ //自定义初始化构造函数，先执行此再执行initComponet
//do something init
document.write( "constructor执行......." );
} ,
layout : 'fit'
});
new springok.Window();
Ext.onReady(function(){
//new springok.DemoWindow();
});**
接下来看下面向对象如何实现：
**
Ext.define("springok.Person", {
Name: '',
Age: 0,
//普通的方法
Say: function (msg) {
Ext.Msg.alert(this.Name + " Says:", msg);
},
//构造器
constructor: function (name, age) {
this.Name = name;
this.Age = age;
}
});
Ext.onReady(function(){
//实例化类调用方法
new springok.Person('springok.Person',18).Say("springok");
});测试：