ExtJS 4.2 02 ExtJs 基础

动态引用加载

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('*');

 

组件的别名

使用别名机制，一是可以解决引入名过长的问题，二是可以使用xtype类型。

Ext.define('Customer.support.SupportMessage', {

extend : 'Ext.panel.Panel',

alias : 'widget.supportMessage',

title : 'Customer Support',

html : 'Customer support is online'

});

Ext.application({

name : 'Customer',

launch : function() {

            Ext.create('Ext.container.Viewport', {

layout : 'fit',

items : [{xtype : 'supportMessage'}]

});

}

});

我们可以在类的定义中，加入 alias 关键字，以启动别名机制； 当一个类使用alias进行别名处理之后，我们就可以使用对应的别名进行类的使用了； 使用类的别名时， 必须使用widget.作为别名的前缀 ；使用别名之后，我们就可以使用  xtype:'别名'  来进行类型的引用；

基本数据类型

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, ["张三", "李四"]);

2.函数按照一定频率反复执行

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