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