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:[ ...
随机推荐
- hihocoder 1391 树状数组
#1391 : Countries 时间限制:1000ms 单点时限:1000ms 内存限制:256MB 描述 There are two antagonistic countries, countr ...
- Codeforces Round #411 (Div. 1) D. Expected diameter of a tree
题目大意:给出一个森林,每次询问给出u,v,问从u所在连通块中随机选出一个点与v所在连通块中随机选出一个点相连,连出的树的直径期望(不是树输出-1).(n,q<=10^5) 解法:预处理出各连通 ...
- python nonloacal
Python 3 添加了 nonlocal 关键字,把 None.True 和 False 提升为关键字,废弃了 print 和 exec.今天细说下 nonlocal 的用法 nonloacal是最 ...
- 基于GCC的openMP学习与测试
(一).openMP简述 Open Multiprocessing (OpenMP) 框架是一种功能极为强大的规范,可以帮助您利用 C.C++ 和 Fortran 应用程序中的多个核心带来的好处,是基 ...
- centos7 支持中文显示
http://www.linuxidc.com/Linux/2017-07/145572.htm这篇文章比较全.我印证了一下,没有问题 centos7的与centos6有少许不同: 1.安装中文包: ...
- IOS WebViewJavascriptBridge 使用以及原理分析
本文转自:https://www.jianshu.com/p/b8d4285395c6 概述 从两个方面来讲: js不能直接调用oc的方法 oc可以通过如下函数调用js代码 - (void)evalu ...
- react 踩的坑
1.如上图所示:没有任何语法错误,可是只要加上</button>闭合标签后就乱套了 解决方案:sublimetext view-syntax-babel-javascript(babel) ...
- Access restriction: The type VerticalTextSpinner is not accessible due to restriction on required library........
查了下竟然是编译器报错,orz了. Access restriction: 访问限制 on required library: 在依赖库(第三方包) 那就简单了,取消限制就好, eclipse的Win ...
- 基于PHP的地址智能解析案例-快宝开放平台
快宝地址智能解析,批量录入收件人.发件人最好的解决方案,广泛应用于快递行业,电商行业,ERP应用等. 一.对接前准备 注册快宝开放平台,获得开发者账号,查看如何注册. 二.对接联调 快宝开放平台支持多 ...
- Ubuntu 16.04+.Net Core+Docker+Uginx安装部署
前言 最近公司的项目打算移植到.Net Core平台,所以调研了一下.Net Core在Linux下的安装部署.本篇文章会一步步的描述从安装到配置到部署的全部过程.在文章的结构和内容里,笔者借鉴了很多 ...