ExtJs对js基本语法扩展支持
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) { } }); |
原文链接:https://www.cnblogs.com/lipan/archive/2011/12/08/2278507.html
ExtJs对js基本语法扩展支持的更多相关文章
- ExtJs4 笔记(2) ExtJs对js基本语法扩展支持
本篇主要介绍一下ExtJs对JS基本语法的扩展支持,包括动态加载.类的封装等. 一.动态引用加载 ExtJs有庞大的类型库,很多类可能在当前的页面根本不会用到,我们可以引入动态加载的概念来即用即取.这 ...
- [转载]ExtJs4 笔记(2) ExtJs对js基本语法扩展支持
作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/) 本篇主要介绍一下ExtJs对JS基本语法的扩展支持,包括动态加载.类的封装等. 一.动态引 ...
- js基本语法汇总
1.分类 ECMAScript js基本语法与标准 DOM Document Object Model文档对象模型 BOM Browser Object Model浏览器对象模型 tips:DOM和B ...
- JS对表格排序(支持对序号,数字,字母,日期)
JS对表格排序(支持对序号,数字,字母,日期) 前不久看到淘宝组件有"对表格排序的插件" 如想要看 可以看这个地址 http://gallery.kissyui.com/KSort ...
- JS高级语法与JS选择器
元素(element)和节点(node) childNode属性和children属性的区别 <!DOCTYPE html> <html lang="en"> ...
- Vue.js 数据绑定语法详解
Vue.js 数据绑定语法详解 一.总结 一句话总结:Vue.js 的模板是基于 DOM 实现的.这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强.Vue ...
- 嵌入式C语言自我修养 01:Linux 内核中的GNU C语言语法扩展
1.1 Linux 内核驱动中的奇怪语法 大家在看一些 GNU 开源软件,或者阅读 Linux 内核.驱动源码时会发现,在 Linux 内核源码中,有大量的 C 程序看起来“怪怪的”.说它是C语言吧, ...
- 关于GNU规范的语法扩展
GNU 是一款能用于构建类 Unix 操作系统的计算机软件合集,由自由软件之父 Richard Stallman 开创,于 1983 年 9 月 27 日对外发布.GNU 完全由自由软件(free s ...
- EasyRTMP推送扩展支持HEVC(H265) RTMP推送之Metadata结构填写详解
我们在<EasyNVR摄像机网页直播中,推流组件EasyRTMP推送RTMP扩展支持HEVC(H.265)的方案>中描述了关于EasyRTMP进行RTMP HEVC(H.265)推流的概括 ...
随机推荐
- RRDtool绘制lvs连接数图形
需求:用RRDtool绘制lvs的连接数图形 RRDtool是一个强大的绘图工具,作者是Tobias Oetiker. RRD全称Round Robin Database,轮转数据库,也是一个时间序列 ...
- 编译安装haproxy开启支持SSL
1.下载程序包 # wget http://www.haproxy.org/download/1.7/src/haproxy-1.7.5.tar.gz # tar xvf haproxy-1.7.5. ...
- POJ 1966 Cable TV Network 【经典最小割问题】
Description n个点的无向图,问最少删掉几个点,使得图不连通 n<=50 m也许可以到完全图? Solution 最少,割点,不连通,可以想到最小割. 发现,图不连通,必然存在两个点不 ...
- tar 命令显示进度条
实现该功能需要安装 pv,然后把需要处理的数据通过管道传给 pv,最后再进行操作. 传给 pv 的目的是为了知道已经处理的数据量大小,同时需要通过 -s 指定总共需要处理的数据量大小. pv 的安装一 ...
- Android Studio 安装在Windows10中的陷阱
操作系统:Windows 10 Pro CPU:AMD IDE:Android Studio 2.0 JDK:8.0 安装完AS(Android Studio)之后,运行AS发现无法启动模拟器,提示“ ...
- mysql 设置默认编码为 utf8
vi /etc/mysql/mysql.conf.d/mysqld.cnf [client] default-character-set=utf8 [mysql] default-character- ...
- bzoj千题计划115:bzoj1024: [SCOI2009]生日快乐
http://www.lydsy.com/JudgeOnline/problem.php?id=1024 枚举横着切还是竖着切,一边儿分多少块 #include<cstdio> #incl ...
- 24点扑克牌游戏——(含java源码)(GUI实现)
给出四个数字,要求,在其间添加运算符和括号,使得计算结果等于24. 括号的放置即为决定哪几个数先进行计算.所以,我们先确定首先进行计算的两个相邻的数,计算完成后,就相当于剩下三个数字,仍需要在它们之间 ...
- 悲催的IE6 七宗罪大吐槽(带解决方法)第一部分
一.奇数宽高 悲剧的IE6啊,为何有如此多bug,但用户市场又那么大,真让我们搞网站的纠结.今天就遇到了一个非常奇怪但又很细节的一个bug,一个外部的相对定位div,内部一个绝对定位的div(righ ...
- Presto通过RESTful接口新增Connector
在实际使用Presto的过程中,经常会有以下的一些需求. 添加一个新的Catalog 对不再使用的Catalog希望把它删除 修改某个Catalog的参数 但在Presto中如果进行上述的修改,需要重 ...