ExtJS学习(一)Ext自定义类实现
工作中项目需要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");
});测试：
ExtJS学习(一)Ext自定义类实现的更多相关文章
- Ext JS学习第六天 Ext自定义类（一）
此文来记录学习笔记 •我们在之前的学习,已经对ExtJS有了一个初步的认识,那么如果要学好ExtJS,对于javascript是必须的,也就是说,对于理解ExtJS底层基础架构的理解也是必须的.那么我 ...
- Extjs 学习总结-Ext.define自定义类
本教程整理了extjs的一些基本概念及其使用,包括自定义类(Ext.define).数据模型.代理等.本节介绍使用Ext.define自定义类 使用Ext.define自定义类 1. 首先看看js中自 ...
- Java学习笔记day06_自定义类_ArrayList
1.自定义类class 使用类的形式, 对现实中的事物进行描述. 类是引用数据类型. 事物: 方法,变量. 方法:事物具备的功能. 变量:事物的属性. 格式: public class 类名{ //属 ...
- Ext JS学习第七天 Ext自定义类，继承（二）
此文来记录学习笔记 一个简单ext继承的栗子 Ext.onReady(function () { Ext.define('Person',{ config:{ name:'z3' } , constr ...
- ExtJS学习(二)Ext组件模型
Ext中所有的组件都继承自Ext.component,这种单根继承的模型保证所有组件都拥有相同的通用方法与生命周期,这样在后续对这些组件进行维护管理时将更加便捷,同时也保证了在进行布局时的便利. 组件 ...
- lumen框架学习01——引入自定义类和函数
引入自定义的functions.php文件,首先把functions.php文件放在app的目录下,然后通过根目录的composer.json文件引入,具体操作如下图: 引入类文件也是一样,具体可参考 ...
- 20. Extjs学习笔记——Ext.data.JsonStore使用说明
Ext.data.JsonStore继承于Ext.data.Store,使得从远程JSON数据创建stores更为方便的简单辅助类.JsonStore合成了Ext.data.HttpProxy与Ext ...
- Extjs学习笔记——Ext.data.JsonStore使用说明
Ext.data.JsonStore继承于Ext.data.Store.使得从远程JSON数据创建stores更为方便的简单辅助类. JsonStore合成了Ext.data.HttpProxy与Ex ...
- extjs学习之Ext.selection.CheckboxModel
Ext.onReady( function() { var store=Ext.create('Ext.data.Store', { storeId:'simpsonsStore', fields:[ ...
随机推荐
- ●UVA 11796 Dog Distance
题链: https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...
- hdu4729 树链剖分+二分
An Easy Problem for Elfness Time Limit: 5000/2500 MS (Java/Others) Memory Limit: 65535/65535 K (J ...
- URAL 1297 最长回文子串(后缀数组)
1297. Palindrome Time limit: 1.0 secondMemory limit: 64 MB The “U.S. Robots” HQ has just received a ...
- bzoj2237[NCPC2009]Flight Planning 结论题？
2237: [NCPC2009]Flight Planning Time Limit: 10 Sec Memory Limit: 256 MBSubmit: 55 Solved: 27[Submi ...
- Angular中 build的时候遇到的错误--There are multiple modules with names that only differ in casing
今天早上遇到一个Angular的编译的时候的错误 具体信息: There are multiple modules with names that only differ in casing.This ...
- Delphi下DLL编程知识（转）
一. DLL和系统变量 在 System 单元声明的变量中,有几个对DLL编程有特殊影响.IsLibrary 可以检测代码是执行在应用程序中还是执行在DLL中,在应用程序中 IsLibrar ...
- Linux的发行版，不同发行版之间的联系和区别
Linux 主要作为Linux发行版(通常被称为"distro")的一部分而使用.这些发行版由个人,松散组织的团队,以及商业机构和志愿者组织编写.它们通常包括了其他的系统软件和应用 ...
- 110个oracle常用函数总结
. ASCII 返回与指定的字符对应的十进制数; SQL) zero,ascii( ) space from dual; A A ZERO SPACE --------- --------- ---- ...
- 无忧代理免费ip爬取（端口js加密）
起因 为了训练爬虫技能(其实主要还是js技能-),翻了可能有反爬的网站挨个摧残,现在轮到这个网站了:http://www.data5u.com/free/index.shtml 解密过程 打开网站,在 ...
- synchronized与条件同步
在并发编程中,有这样的需求:当满足某个条件时线程执行同步块中的代码,条件不满足时,让线程在此等待,直至条件满足再执行同步代码块. java的Object类即提供了一类这样的方法wait(),notif ...