ExtJS 4.2 02 ExtJs 基础

2015/06/04 17:27
阅读数 298

动态引用加载

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

 

展开阅读全文
打赏
0
2 收藏
分享
加载中
更多评论
打赏
0 评论
2 收藏
0
分享
返回顶部
顶部