extjs4 对javascript基本语法扩展支持(转)

exjts4中，对javascript基本语法进行了扩展，这是由于javascript本身就是面向对象语言，但它对类的支持不够完善，exjts4对很多东西都进行了扩展，以实现对类的支持，下面分几部分介绍下exjts4对javascript基本语法的扩展。

一、类的封装

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();
});

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(); 
});

二、动态加载类：

Ext.require('Ext.window.Window');

Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.util.*'
]);

//加载所有类，除了“Ext.data.*”之外
Ext.exclude('Ext.data.*').require('*');

Ext.require('Ext.window.Window'); 
  
Ext.require([ 
    'Ext.grid.*', 
    'Ext.data.*', 
    'Ext.util.*'
]); 
  
//加载所有类，除了“Ext.data.*”之外 
Ext.exclude('Ext.data.*').require('*');

关于动态加载类，请参考本站另外一些文章：

1、ExtJS 4中动态加载的路径设置

2、在Extjs4应用中使用Ext.Loader

三、函数执行控制

这其中包含等待某一段时间后执行和在某个时间段内重复执行

等待某一段时间后执

var func1 = function (name1, name2) {
    Ext.Msg.alert("5秒钟后自动执行", "你好，" + name1 + "、" + name2 + "！");
};

Ext.defer(func1, 5000, this, ["张三", "李四"]);

var func1 = function (name1, name2) { 
    Ext.Msg.alert("5秒钟后自动执行", "你好，" + name1 + "、" + name2 + "！"); 
}; 
 
Ext.defer(func1, 5000, this, ["张三", "李四"]);

某个时间段内重复执行

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);

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);

注：让div1每隔一秒更新一次显示当前时间，10秒又自动停止更新

四：键盘事件侦听

这里分Ext.KeyMap与Ext.KeyNav两种情况

1、Ext.KeyMap

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: "a",
        ctrl: true,
        shift: true,
        alt: true,
        fn: function () { alert('Control + shift +alt+ a组合键被按下.'); },
        stopEvent: true
    }, {
        key: "c",
        ctrl: true,
        fn: function () { alert('Control+C全选事件被阻止，自定义事件执行！'); },
        stopEvent: true
    }
]);

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: "a", 
        ctrl: true, 
        shift: true, 
        alt: true, 
        fn: function () { alert('Control + shift +alt+ a组合键被按下.'); }, 
        stopEvent: true
    }, { 
        key: "c", 
        ctrl: true, 
        fn: function () { alert('Control+C全选事件被阻止，自定义事件执行！'); }, 
        stopEvent: true
    } 
]);

通过Ext.KeyMap可以建立键盘和用户动作（Actions）之间的映射。上面的例子中，

我们看到，在IE中测试，当我们按下ctrl+c键时，粘贴功能被屏蔽，支持了我们自定义的方法。

2、Ext.KeyNav

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) {

    }
});