在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。