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基本语法扩展支持的更多相关文章

  1. ExtJs4 笔记(2) ExtJs对js基本语法扩展支持

    本篇主要介绍一下ExtJs对JS基本语法的扩展支持,包括动态加载.类的封装等. 一.动态引用加载 ExtJs有庞大的类型库,很多类可能在当前的页面根本不会用到,我们可以引入动态加载的概念来即用即取.这 ...

  2. [转载]ExtJs4 笔记(2) ExtJs对js基本语法扩展支持

    作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/) 本篇主要介绍一下ExtJs对JS基本语法的扩展支持,包括动态加载.类的封装等. 一.动态引 ...

  3. js基本语法汇总

    1.分类 ECMAScript js基本语法与标准 DOM Document Object Model文档对象模型 BOM Browser Object Model浏览器对象模型 tips:DOM和B ...

  4. JS对表格排序(支持对序号,数字,字母,日期)

    JS对表格排序(支持对序号,数字,字母,日期) 前不久看到淘宝组件有"对表格排序的插件" 如想要看 可以看这个地址 http://gallery.kissyui.com/KSort ...

  5. JS高级语法与JS选择器

    元素(element)和节点(node) childNode属性和children属性的区别 <!DOCTYPE html> <html lang="en"> ...

  6. Vue.js 数据绑定语法详解

    Vue.js 数据绑定语法详解 一.总结 一句话总结:Vue.js 的模板是基于 DOM 实现的.这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强.Vue ...

  7. 嵌入式C语言自我修养 01:Linux 内核中的GNU C语言语法扩展

    1.1 Linux 内核驱动中的奇怪语法 大家在看一些 GNU 开源软件,或者阅读 Linux 内核.驱动源码时会发现,在 Linux 内核源码中,有大量的 C 程序看起来“怪怪的”.说它是C语言吧, ...

  8. 关于GNU规范的语法扩展

    GNU 是一款能用于构建类 Unix 操作系统的计算机软件合集,由自由软件之父 Richard Stallman 开创,于 1983 年 9 月 27 日对外发布.GNU 完全由自由软件(free s ...

  9. EasyRTMP推送扩展支持HEVC(H265) RTMP推送之Metadata结构填写详解

    我们在<EasyNVR摄像机网页直播中,推流组件EasyRTMP推送RTMP扩展支持HEVC(H.265)的方案>中描述了关于EasyRTMP进行RTMP HEVC(H.265)推流的概括 ...

随机推荐

  1. digitalworld.local: MERCY靶机入侵

    0x01 前言 MERCY是一个致力于PWK课程安全的靶机系统.MERCY是一款游戏名称,与易受攻击的靶机名称无关.本次实验是攻击目标靶机获取root权限并读系统目录中的proof.txt信息 靶机的 ...

  2. Sentence-seven basic patterns 英语句子结构

    Meaning of some words subject 主语 verb  动词 object 宾语 adverbial 状语 complement 补语 imperative sentence 祈 ...

  3. Python【yagmail】模块发邮件

    #步骤一:import yagmail #步骤二:实例化一个发邮件的对象username = '553637138@qq.com' #邮箱账号pwd='sa2008' #授权码mail = yagma ...

  4. python 导入自定义模块

    1. 2.

  5. python基础-异常(exception)处理

    python基础-异常(exception)处理 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 程序中难免出现错误,而错误分成两种,即语法错误和逻辑错误.语法错误根本过不了pyth ...

  6. webpack 多页面|入口支持和公共组件单独打包--转载

    转载自:http://www.jb51.net/article/117490.htm 本篇主要介绍:如何自动构建入口文件,并生成对应的output:公共js库如何单独打包. 多入口文件,自动扫描入口. ...

  7. 多页面应用 VS 单页面应用

    多页面应用 每一次页面跳转,后端都会返回一个新的HTML文件, 优点:首屏时间快(只经历了一个HTTP请求),SEO效果好 缺点:页面切换慢 单页面应用 进行页面之间跳转时,并不去加载HTML文件,而 ...

  8. axios post 踩坑之 post传参

    今天在项目(vue2.0)使用axios进行post请求的时候,使用官方文档的格式传递给后台的数据是一整个json对象,参数已经传递出去了,但是后台获取不到,() 解决方法 利用aixos结合qs来解 ...

  9. SQL Server 2008 R2 企业版安装教程

    1 安装包解压 2 解压后,打开setup.exe文件,选择安装,显示如图: 3 选择全新安装或向现有安装添加功能 4 点确定 5 输入 企业版序列号:R88PF-GMCFT-KM2KR-4R7GB- ...

  10. soj1022. Poor contestant Prob

    1022. Poor contestant Prob Constraints Time Limit: 1 secs, Memory Limit: 32 MB Description As everyb ...