ExtJs4 笔记(2) ExtJs对js基本语法扩展支持
ExtJs4 笔记(2) ExtJs对js基本语法扩展支持
本篇主要介绍一下ExtJs对JS基本语法的扩展支持,包括动态加载、类的封装等。
一、动态引用加载
ExtJs有庞大的类型库,很多类可能在当前的页面根本不会用到,我们可以引入动态加载的概念来即用即取。这些代码都要写在Ext.onReady外面。
1.动态引用外部Js
[Js]
1
2
3
4
|
//加载配置可用
Ext.Loader.setConfig({ enabled: true });
//动态引用“../ux/”目录下所有Js文件类,映射到对应命名空间
Ext.Loader.setPath( 'Ext.ux' , '../ux/' );
|
2.动态加载类
[Js]
1
2
3
4
5
6
7
8
9
10
11
12
13
|
//加载单个类
Ext.require( 'Ext.window.Window' );
//加载多个
Ext.require([
'Ext.grid.*' ,
'Ext.data.*' ,
'Ext.util.*' ,
'Ext.grid.PagingScroller'
]);
//加载所有类,除了“Ext.data.*”之外
Ext.exclude( 'Ext.data.*' ).require( '*' );
|
二、对类的封装
Js本身是面向对象的语言,但是语法层面上对类的支持不够完善,ExtJs对此作了一系列的封装,下面看看类的定义、字段、构造函数、方法、静态字段,方法的实现方式,还用类的继承的用法。
[Js]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
Ext.onReady( function () {
Ext.define( "My.test.Animal" , {
height: 0,
weight: 0
});
Ext.define( "My.test.Person" , {
//普通子段
name: "" ,
//属性
config: {
age: 0,
father: {
name: "" ,
age: 0
}
},
//构造方法
constructor: function (name, height) {
this .self.count++;
if (name) this .name = name;
if (height) this .height = height;
},
//继承
extend: "My.test.Animal" ,
//实例方法
Say: function () {
alert( "你好,我是:" + this .name + ",我今年" + this .age + "岁,我的身高是:" + this .height
+ "。我的爸爸是:" + this .father.name + ",他" + this .father.age + "岁。" );
},
//静态子段,方法
statics: {
type: "高等动物" ,
count: 0,
getCount: function () {
return "当前共有" + this .count + "人" ;
}
}
});
function test() {
var p = Ext.create( "My.test.Person" , "李四" , 178);
p.setAge(21);
p.setFather({
age: 48,
name: "李五"
});
p.Say();
Ext.create( "My.test.Person" );
alert(My.test.Person.getCount());
}
test();
});
|
三、基本数据类型
ExtJs支持数值型、字符串型、日期型、布尔型等基本数据类型,内容比较简单,下面演示基本的声明用法,以及类型转换。
[Js]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
//定义一个日期类型的数据
var date1 = new Date( "2011-11-12" );
var date = new Date(2011, 11, 12, 12, 1, 12);
//转化为字符串型
alert(date.toLocaleDateString());
//转化为数值型
alert(Number(date));
//布尔型,假
var myFalse = new Boolean( false );
//真
var myBool = new Boolean( true );
//定义数值
var num = new Number(45.6);
alert(num);
|
四、函数执行时间控制
主要用两个方面,1.让某个函数等待一段时间后自动执行。2.然某个函数按照一定频率反复执行。
1.函数等待执行
实现一个功能,页面加载完毕后,等待3秒后弹出提示。
[Js]
1
2
3
4
5
|
var func1 = function (name1, name2) {
Ext.Msg.alert( "3秒钟后自动执行" , "你好," + name1 + "、" + name2 + "!" );
};
Ext.defer(func1, 3000, this , [ "张三" , "李四" ]);
|
1.函数按照一定频率反复执行
让div1每隔一秒更新一次显示当前时间,10秒又自动停止更新:
[Js]
1
2
3
4
5
6
7
8
9
10
11
|
//周期执行
var i = 0;
var task = {
run: function () {
Ext.fly( 'div1' ).update( new Date().toLocaleTimeString());
if (i > 10) Ext.TaskManager.stop(task);
i++;
},
interval: 1000
}
Ext.TaskManager.start(task);
|
五、键盘事件侦听
1..Ext.KeyMap
通过Ext.KeyMap可以建立键盘和用户动作(Actions)之间的映射。下面看看例子,页面html沿用Ext.Updater部分。
[Js]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
var f = function () {
alert( "B被按下" );
}
var map = new Ext.KeyMap(Ext.getDoc(), [
{
key: Ext.EventObject.B,
fn: f
}, {
key: "bc" ,
fn: function () { alert( 'b,c其中一个被按下' ); }
},
{
key: "x" ,
ctrl: true ,
shift: true ,
alt: true ,
fn: function () { alert( 'Control + shift +alt+ x组合键被按下.' ); },
stopEvent: true
}, {
key: "a" ,
ctrl: true ,
fn: function () { alert( 'Control+A全选事件被阻止,自定义事件执行!' ); },
stopEvent: true
}
]);
|
我们看到,在IE中测试,当我们按下ctrl+A键时,全选功能被屏蔽,支持了我们自定义的方法。
2.Ext.KeyNav
Ext.KeyNav主要是用来绑定方向键的,已支持的键:enter, left, right, up, down, tab, esc, pageUp, pageDown, del, home, end,现在通过它来实现鼠标控制层移动的功能:
[Js]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
var div1 = Ext.get( "div1" );
var nav = new Ext.KeyNav(Ext.getDoc(), {
"left" : function (e) {
div1.setXY([div1.getX() - 1, div1.getY()]);
},
"right" : function (e) {
div1.setXY([div1.getX() + 1, div1.getY()]);
},
"up" : function (e) {
div1.move( "up" ,1);
},
"down" : function (e) {
div1.moveTo(div1.getX(), div1.getY() + 1);
},
"enter" : function (e) {
}
});
|
出处:[Lipan] (http://www.cnblogs.com/lipan/)
版权声明:本文的版权归作者与博客园共有。转载时须注明本文的详细链接,否则作者将保留追究其法律责任。
关注 - 4
粉丝 - 562
» 下一篇:ExtJs4 笔记(3) Ext.Ajax 对ajax的支持
@小渺
@zesion
谢谢关注
Huake.test.Student 继承 Huake.test.Person 楼主,
var student = Ext.create('Huake.OO.Student');报上面的错
请问这个怎么解决?谢谢
大哥,你用的是extjs4.0以上的版本吗?
是的,最新的。4.0.7
@廖飞
大哥,你用的是extjs4.0以上的版本吗?
是的,最新的。4.0.7
ExtJs4 笔记(2) ExtJs对js基本语法扩展支持相关推荐
- [转载]ExtJs4 笔记(2) ExtJs对js基本语法扩展支持
作者:李盼(Lipan) 出处:[Lipan] (http://www.cnblogs.com/lipan/) 本篇主要介绍一下ExtJs对JS基本语法的扩展支持,包括动态加载.类的封装等. 一.动态 ...
- Vue.js 基础语法 入门语句 Vue学习笔记 v-model 双向数据绑定
Vue.js 基础语法,入门语句,Vue学习笔记 学习网站:https://www.bilibili.com/video/BV15741177Eh vue 的体验 响应式:数据一旦改变,视图就会响应改 ...
- ExtJs4 笔记(3) Ext.Ajax 对ajax的支持
原文地址为: ExtJs4 笔记(3) Ext.Ajax 对ajax的支持 <回到系列目录 本篇主要介绍一下ExtJs常用的几个对JS语法的扩展支持,包括Ajax封装,函数事件操作封装,还有扩展 ...
- Ajax和JSON-学习笔记01【原生JS方式实现Ajax】
Java后端 学习路线 笔记汇总表[黑马程序员] Ajax和JSON-学习笔记01[原生JS方式实现Ajax] Ajax和JSON-学习笔记02[JQuery方式实现Ajax] Ajax和JSON-学 ...
- ExtJs懒人笔记(2) ExtJs页面布局
ExtJs学习目录 懒人笔记(1) ExtJs初探 ExtJs懒人笔记(2) ExtJs页面布局 ExtJs懒人笔记(3) 动态Grid的实现 页面布局,对于做Web开发者来说是一定不会陌生的,而这些 ...
- Python同Java同Js语言语法区别之四判断字符串列表字典是否相等
字符串列表字典是否相等 前言 Python 字符串or数字 列表 字典 总结 Java 字符串 数组 Map 总结 JS 字符串 数组 对象 总结 前言 作为一枚测开工程师,需要的技能是全栈的,项目中 ...
- [转载]ExtJs4 笔记(3) Ext.Ajax 对ajax的支持
作者:李盼(Lipan) 出处:[Lipan] (http://www.cnblogs.com/lipan/) 本篇主要介绍一下ExtJs常用的几个对JS语法的扩展支持,包括Ajax封装,函数事件操作 ...
- 小汤学编程之JavaScript学习day01——认识JS、JS基础语法
一.认识JS 1.JavaScript的组成 2.浏览器执行js简介 3.JavaScript是什么? 4.扩展内容 二.JS基础语法 1.代码书写位置 2.变量 ...
- 移动端前端笔记 — 遇到的常见JS与CSS问题及解决方法
移动端前端笔记 - 遇到的常见JS与CSS问题及解决方法 参考文章: (1)移动端前端笔记 - 遇到的常见JS与CSS问题及解决方法 (2)https://www.cnblogs.com/zhaoda ...
- 变量的语法扩展(JS)
变量的语法扩展(JS) <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
最新文章
- java 容器_JAVA的容器
- python编程基础_月隐学python第2课
- centos 升级gcc
- Quartus prime16.0 与modelsim ae 联调
- sql服务器文件夹共享,sqlserver2017共享功能目录路径不可改的解决方法
- ECCV2018 论文简析 Oral_1 持续更新
- 阿里“去 IOE”十二年,弹性计算如何二次去 I 和 E?
- 别人改出了新BUG,怎么看?
- 门窗计算机公式,门窗天使软件怎么编辑公式 公式输入方法
- 莫烦python sklearn笔记
- setoolkit制作简单钓鱼网站
- C语言,往排好序的数组中插入元素
- 拼团返利电商系统(拼返系统)v2.6
- 如何把安卓机用出Ipad的自由感 | 安卓党电子手帐
- Windows 下解决 VsCode 使用 SSH 连接报 Bad owner or permissions on C:\\Users\\Administrator/.ssh/config 错误
- Xilinx 的FFT IP核使用方法(配置为FFT 、IFFT两种模式)
- 【大数据存储技术】思考题及参考答案
- oracle 英文转数字,数字转换成英文
- nexus2.5版本升级到nexus2.14(同时升级到nexus3.24版本)版本
- 回顾2018年云计算九大亮点
热门文章
- 360路由器WISP无线万能中继的应用
- SVN clean up报错
- Flutter笔记(9)flutter中baseline基准线布局
- 计算机显卡驱动全部卸载,Win7彻底卸载NVIDIA显卡驱动程序的办法
- JAVA生成随机昵称
- 谷歌账号Gmail邮箱修改密码提示需要手机设备验证码如何处理
- 西门子1200控制V90伺服,西门子1200通过PN通讯控制V90伺服,程序控制采用FB285功能块
- Flutter Convex Bottom 底部导航
- 运维监控之——云原生运维监控报警架构(prometheus+grafana+netdata+Thanos+Alertmanager+Consul)
- 基础知识 | 什么是二进制文件?