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。

轉載自：http://blog.csdn.net/sjf0115/article/details/9346727