ExtJs案頭組件（DeskTop）

在desktop\js目錄中包含了5個js檔案，這5個js檔案如下：

還有css樣式表：desktop.css，圖片素材

在這5個js檔案中封裝了用於類比案頭的類，這些類如下：

Ext.ux.StartMenu（StartMenu.js） 類比作業系統案頭左下方的開始菜單
Ext.ux.TaskBar（TaskBar.js） 類比作業系統案頭右下方的工作列     
   
Ext.Desktop（Desktop.js） 類比作業系統的整個案頭
Ext.app.Module（Module.js）對應整個應用程式中的各個功能模組
Ext.app.App（App.js）對應整個應用程式

由於這些類並不包含在ExtJS的核心組件中，因此，在使用這些類之前，要先引用這些js檔案以及相應的css檔案，代碼如下：

<script type="text/javascript" src="js/StartMenu.js"></script>    <script type="text/javascript" src="js/TaskBar.js"></script>    <script type="text/javascript" src="js/Desktop.js"></script>    <script type="text/javascript" src="js/App.js"></script>    <script type="text/javascript" src="js/Module.js"></script>    <script type="text/javascript" src="sample.js"></script>

其中desktop.css類比案頭所需的樣式檔案，在samples.js檔案中利用上面5個類實現了的案頭。

使用案頭組件的第1步是建立Ext.app.App對象，代碼如下：

//案頭組件配置MyDesktop = new Ext.app.App({//初始化init :function(){Ext.QuickTips.init();},//建立功能模組getModules : function(){return [new MyDesktop.GridWindow(),            new MyDesktop.TabWindow(),            new MyDesktop.AccordionWindow(),            new MyDesktop.BogusMenuModule(),            new MyDesktop.BogusModule()];},//配置開始菜單    getStartConfig : function(){        return {            title: '我的系統',            iconCls: 'user',            toolItems: [{                text:'設定',                iconCls:'settings',                scope:this            },'-',{                text:'登出',                iconCls:'logout',                scope:this            }]        };    }});

與建立大多數ExtJS組件不同，在建立Ext.app.App對象時，並不需要在Ext.onReady方法中指定頁面載入完後執行的初始化案頭的方法，ExtJS會在頁面載入完成後,自動調用Ext.app.App的init方法對類比的案頭進行初始化。
在init方法執行後，ExtJS會自動調用getModules和getStartConfig方法對整個應用程式進行配置。getModules方法返回了一個包含多個Ext.app.Module對象的數組。每一個Module對象代表應用中的一個功能模組，這些功能模組都以彈窗的形式出現在案頭上。可以使用類比案頭的開始菜單的Ext.ux.StartMenu展開這些功能模組的視窗。
對於已經展開的視窗，也可以通過類比案頭下方的工作列的Ext.ux.TaskBar控制某個視窗的顯示或隱藏。
Ext.app.App中的startConfig（）函數主要是用來配置開始菜單的選項。例子中配置了兩個按鈕，名稱分別為"設定","登出"，可以像對待普通功能表項目一樣配置，設定對應的標題，表徵圖等參數。也可以設定handler在使用者點擊時執行對應的操作。

/* * 建立一個名為MyDesktop.GridWindow的功能模組，並在Ext.app.App的getModules()函數中對其執行了初始化操作。 */MyDesktop.GridWindow = Ext.extend(Ext.app.Module, {    id:'grid-win',//初始化    init : function(){        this.launcher = {            text: 'Grid Window',            iconCls:'accordion',            handler : this.createWindow,            scope: this        }    },    createWindow : function(){        var desktop = this.app.getDesktop();        var win = desktop.getWindow('grid-win');        if(!win){            win = desktop.createWindow({                id: 'grid-win',                title:'Grid Window',                width:740,                height:480,                iconCls: 'icon-grid',                shim:false,                animCollapse:false,                constrainHeader:true            });        }        win.show();    }});

在為Ext.app.App建立功能模組時，都要整合Ext提供的Ext.app.Module,這個類中只定義一個init()函數，需要重寫這個函數來實現我們的功能。
一般只需要在init()函數中定義一個launcher對象，他是一個JSON對象，內部包含了啟動這個功能模組所需要的一些配置。當在Ext.ux.StartMenu中點擊對應的功能模組時，就會執行launcher中定義的handler屬性，彈出這個功能模組對應的視窗。
例子中的handler屬性對應著自身的createWindow()函數。在這個回呼函數中，我們先通過this.app.getDesktop()獲得整個應用對應的類比案頭，然後使用desktop.getWindow('grid-win')判斷功能模組對應的視窗是否已經存在，如果視窗還沒有建立，就調用desktop.createWindow()建立這個視窗,，並顯示出來。
除了使用Ext.ux.StartMenu顯示功能視窗之外，我們還可以使用案頭的捷徑啟動對應的功能模組，點擊類比案頭上放置的表徵圖或連結，就可以讓對應的功能視窗直接顯示出來。

MyDesktop.TabWindow = Ext.extend(Ext.app.Module, {    id:'tab-win',    init : function(){        this.launcher = {            text: 'Tab Window',            iconCls:'tabs',            handler : this.createWindow,            scope: this        }    },    createWindow : function(){        var desktop = this.app.getDesktop();        var win = desktop.getWindow('tab-win');        if(!win){            win = desktop.createWindow({                id: 'tab-win',                title:'Tab Window',                width:740,                height:480,html:'Tab Window',                iconCls: 'tabs',                shim:false,                animCollapse:false,                border:false,                constrainHeader:true            });        }        win.show();    }});

Ext.Desktop中將捷徑稱為shortcut,我們不需要寫任何代碼來配置捷徑，只需要在為標籤和對象命名時遵守一定的規則即可。
在類比案頭上顯示的捷徑時所使用的HTML標籤如下：

<dl id="x-shortcuts">        <dt id="grid-win-shortcut">            <a href="#"><img src="images/s.gif" />            <div>Grid Window</div></a>        </dt>    </dl>

類比捷徑都必須包含在id = 'x-shortcuts'的dl標籤中，dl標籤中包含每個dt標籤都將成為一個捷徑。這些dt標籤屬性都以-shortcut結尾，將id屬性中的-shortcut部分去掉後，得到的就是功能模組的id。