本篇主要介绍一下ExtJs对JS基本语法的扩展支持,包括动态加载、类的封装等。
一、动态引用加载
ExtJs有庞大的类型库,很多类可能在当前的页面根本不会用到,我们可以引入动态加载的概念来即用即取。这些代码都要写在Ext.onReady外面。
1.动态引用外部Js
[Js]
1
2
3
4
|
Ext.Loader.setConfig({ enabled: true });
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.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) {
}
});
|
分享到:
相关推荐
ExtJS4学习笔记(九)---ExtJS4 EditGrid(可编辑的Grid) ExtJS4学习笔记(二)---HBox的使用 ExtJS4学习笔记(五)---Grid分页 ExtJS4学习笔记(八)---Grid多选 全选 ExtJS4学习笔记(六)---多表头Grid ExtJS4学习笔记(十)--...
2. 对ExtJs的态度 3 3. Ext.form概述 4 4. Ext.TabPanel篇 5 5. Function扩展篇 7 6. Ext.data.Store篇 10 7. Ext.data.JsonReader篇一 12 8. Ext.data.JsonReader篇二 15 9. Ext.data.HttpProxy篇 19 10. Ext.data....
2. 对ExtJs的态度 3 3. Ext.form概述 4 4. Ext.TabPanel篇 5 5. Function扩展篇 7 6. Ext.data.Store篇 10 7. Ext.data.JsonReader篇一 12 8. Ext.data.JsonReader篇二 15 9. Ext.data.HttpProxy篇 19 10. Ext.data....
ExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.doc
Extjs基础语法
xtjs4,创建Ext组件有了新的方式,就是Ext.create(....),而且可以使用动态加载JS的方式来加快组件的渲染,我们再也不必一次加载已经达到1MB的ext-all.js了,本文介绍如何在EXTJS4中创建一个window。 共:10 小节, ...
ExtJS资料笔记(extjs各个属性的详解) ExtJS资料笔记(extjs各个属性的详解) ExtJS资料笔记(extjs各个属性的详解)
从开发大型的web后台或者企业管理系统来看,ExtJs3的缺陷还是比较明显的,从ExtJs4 开始引入了MVC架构,从而能够从容的组织系统的JS文件了。 从ExtJs5开始则引入了MVVC架构。 从网上资料来看,多数都是停留在ExtJs3...
Extjs 5 学习笔记,在网上下载整理好的。
适合ExtJs开发人员extjs技术上手以及深入
ExtJS4中文教程2 开发笔记
包含各种类型的extjs小图标,Extjs4小图标
学习ExtJS时看书的笔记,记录了ExtJS事件机制的原理
Extjs4 MVC开发笔记源码,此源码已经将命名空间修改为Soyi,由于涉及到一些公司信息,将所有数据库中的数据清除,由于时间仓促。只有备案管理的grid是可以使用的,其他的功能,按照备案管理的文件照猫画虎即可实现。 ...
Extjs4开发笔记,自己学习Extjs4的一些心得体会和小技巧
extjs4笔记,对web前端开发有极大的帮助,欢迎大家下载extjs4笔记
extjs学习笔记, 对应的书籍是extjs in action 没有看完...呵呵
EXT JS 4 正式版 发布 Posted 周三, 04/27/2011 - 20:27 by admin 我很自豪能代表Sencha和ExtJS团队和大家成功的分享了ExtJS 4的预览版、3个beta版和今天发布的正式版等5个版本。 ExtJS 4从创建之初,就以最全面...
EXTJS4自学手册——EXT基本方法、属性(onReady、define、create) EXTJS4自学手册——EXT基本方法、属性(apply、applyIf、constructor) EXTJS4自学手册——EXT基本方法、属性(mixins、statics、require) EXTJS...