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:[ ...
随机推荐
- hdu1698 线段树区间更新
Just a Hook Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Tota ...
- [BZOJ]1031 字符加密Cipher(JSOI2007)
持续划水中…… 感觉BZOJ上AC人数多的基本都是一些模板题,也就是某些算法的裸题.这些题目mark一下到时候回来复习也是不错的选择. Description 喜欢钻研问题的JS同学,最近又迷上了对加 ...
- linux心得
cd .. 返回上一级文件夹cd /xxx/xxxx/xx 进入文件夹cd Desktop 进入桌面sudo vim /etc/vim/vimrc 进入vim配置器:w xxx 保存为名为xxx的文件 ...
- Android自定义模糊匹配搜索控件（二）
在项目中遇到一个需要通过某个字的值筛选匹配带出其他信息的需求,在这里将实现思路整理出来. 源码地址:https://github.com/whieenz/SearchSelect 先看效果图 上图中的 ...
- 【Git】Git工具常用命令
GitHub使用指南 一.把本地代码上传到GitHub 0. 提前配置好上传地址 [git config --global user.name "username"] [git c ...
- 笔记7 AOP练习<有疑问>
场景描述: 核心业务:举行一场古典音乐会. 周边功能:观众入场,关闭手机.落座,觉得音乐好听时鼓掌,觉都不好听则退票.(切面) 1.编写切点(切点用于准确定位应该在什么地方应用切面的通 知)----即 ...
- Object 类
- JVM内存模型及分区
Java虚拟机在程序执行过程会把jvm的内存分为若干个不同的数据区域来管理,这些区域有自己的用途,以及创建和销毁时间. JVM内存模型如下图所示: jvm管理的内存区域包括以下几个区域: 栈区: 栈 ...
- java连接sqlserver2008
java连接sqlserver2008时应有sqljdbc4.jar驱动包.连接的示例代码如下: import java.sql.*; public class ConnectSQL { public ...
- 0428css样式
CSS样式表|-引入的三种方式|--内联样式|----标签内部(空格style)|--内嵌样式|----<head></head>标签内部(<style></ ...