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:[ ...
随机推荐
- 【luoguP4006 清华集训2017】小Y和二叉树
题目描述 小 Y 是一个心灵手巧的 OIer,她有许多二叉树模型. 小 Y 的二叉树模型中,每个结点都具有一个编号,小 Y 把她最喜欢的一个二叉树模型挂在了墙上,树根在最上面,左右子树分别在树根的左下 ...
- hdu 5314 动态树
Happy King Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 262144/262144 K (Java/Others)Tot ...
- [BZOJ]2017省队十连测推广赛1 T2.七彩树
题目大意:给你一棵n个点的树,每个点有颜色,m次询问,每次询问一个点x的子树内深度不超过depth[x]+d的节点的颜色数量,强制在线.(n,m<=100000,多组数据,保证n,m总和不超过5 ...
- 关于快速沃尔什变换(FWT)的一点学习和思考
最近在学FWT,抽点时间出来把这个算法总结一下. 快速沃尔什变换(Fast Walsh-Hadamard Transform),简称FWT.是快速完成集合卷积运算的一种算法. 主要功能是求:,其中为集 ...
- JVM基础
1.基础 JDK 将java文件编译成class文件 JRE 包含JVM JVM可以进行内存管理 利用JDK(调用JAVA API)开发了属于我们自己的JAVA程序后,通过JDK中的编译程序(j ...
- ArrayList add方法的实现之扩容
初探ArrayList的1.5倍扩容 add方法是通过在list的尾部追加元素的方法,添加数据的. 其中,调用了一个叫ensureCapacityInternal方法,实现list的容量换算等: 注意 ...
- 2018春招实习笔试面试总结（PHP）
博主双非渣本计算机软件大三狗一枚,眼看着春招就要结束了,现将自己所经历的的整个春招做一个个人总结. 首先就是关于投递计划,博主自己整理了一份各大公司的春招信息,包括网申地址,开始时间,结束时间,以及自 ...
- junit4.9测试用例 spring测试用例 Assert 注解
junit4.9测试用例 测试基类 import org.junit.runner.RunWith; import org.springframework.test.context.ContextCo ...
- 阿里云部署Node.js项目（CentOS）
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境,用来方便地搭建快速的易于扩展的网络应用.Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又 ...
- VMware在宿主上没有VMnet0、VMnet8，解决方法
一开始,坐着上机实验,一直搞不通为什么虚拟机上的客户机可以ping通自己的ip也可以ping通自己本身的ip,但是主机ping不通虚拟机的客户机,也ping不通虚拟机的网关. 尝试了各种问题,也追出了 ...