ExtJs对js基本语法扩展支持
2013-05-23 09:34
399 查看
一、动态引用加载
ExtJs有庞大的类型库,很多类可能在当前的页面根本不会用到,我们可以引入动态加载的概念来即用即取。这些代码都要写在Ext.onReady外面。
1.动态引用外部Js
//加载配置可用
Ext.Loader.setConfig({ enabled: true });
//动态引用“../ux/”目录下所有Js文件类,映射到对应命名空间
Ext.Loader.setPath('Ext.ux', '../ux/');
2.动态加载类
//加载单个类
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对此作了一系列的封装,下面看看类的定义、字段、构造函数、方法、静态字段,方法的实现方式,还用类的继承的用法。
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支持数值型、字符串型、日期型、布尔型等基本数据类型,内容比较简单,下面演示基本的声明用法,以及类型转换。
//定义一个日期类型的数据
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秒后弹出提示。
var func1 = function (name1, name2) {
Ext.Msg.alert("3秒钟后自动执行", "你好," + name1 + "、" + name2 + "!");
};
Ext.defer(func1, 3000, this, ["张三", "李四"]);
1.函数按照一定频率反复执行
让div1每隔一秒更新一次显示当前时间,10秒又自动停止更新:
//周期执行
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部分。
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,现在通过它来实现鼠标控制层移动的功能:
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) {
}
});
ExtJs有庞大的类型库,很多类可能在当前的页面根本不会用到,我们可以引入动态加载的概念来即用即取。这些代码都要写在Ext.onReady外面。
1.动态引用外部Js
//加载配置可用
Ext.Loader.setConfig({ enabled: true });
//动态引用“../ux/”目录下所有Js文件类,映射到对应命名空间
Ext.Loader.setPath('Ext.ux', '../ux/');
2.动态加载类
//加载单个类
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对此作了一系列的封装,下面看看类的定义、字段、构造函数、方法、静态字段,方法的实现方式,还用类的继承的用法。
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支持数值型、字符串型、日期型、布尔型等基本数据类型,内容比较简单,下面演示基本的声明用法,以及类型转换。
//定义一个日期类型的数据
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秒后弹出提示。
var func1 = function (name1, name2) {
Ext.Msg.alert("3秒钟后自动执行", "你好," + name1 + "、" + name2 + "!");
};
Ext.defer(func1, 3000, this, ["张三", "李四"]);
1.函数按照一定频率反复执行
让div1每隔一秒更新一次显示当前时间,10秒又自动停止更新:
//周期执行
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部分。
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,现在通过它来实现鼠标控制层移动的功能:
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学习笔记<二> ExtJs对js基本语法扩展支持
- ExtJs对js基本语法扩展支持
- ExtJs4 笔记(2) ExtJs对js基本语法扩展支持
- ExtJs4 笔记(2) ExtJs对js基本语法扩展支持
- [转载]ExtJs4 笔记(2) ExtJs对js基本语法扩展支持
- ExtJs4 笔记 ExtJs对js基本语法扩展支持
- ExtJs4 笔记(2) ExtJs对js基本语法扩展支持
- ExtJs4 笔记(2) ExtJs对js基本语法扩展支持
- ExtJs4 笔记(2) ExtJs对js基本语法扩展支持
- ExtJs4 笔记(2) ExtJs对js基本语法扩展支持
- ExtJs4 笔记(2) ExtJs对js基本语法扩展支持
- extjs4 对javascript基本语法扩展支持(转)
- ExtJs 的 JS基本语法
- js-es6-重温es6基本语法(一)
- 透析Extjs的Ext.js源码(三)扩展
- Js基本数据类型常用方法扩展
- Eclipse Javascript插件,像写Java一样写JS —— Spket,支持ExtJS
- js 扩展Array支持remove方法
- JS高程NO3--基本概念(语法,数据类型,操作符,语句,函数)
- JS 之基本语法 & html结合