在desktopjs目錄中包含了5個(gè)js文件，這5個(gè)js文件如下：

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

在這5個(gè)js文件中封裝了用于模擬桌面的類，這些類如下：

Ext.ux.StartMenu（StartMenu.js） 模擬操作系統(tǒng)桌面左下方的開始菜單
Ext.ux.TaskBar（TaskBar.js） 模擬操作系統(tǒng)桌面右下方的任務(wù)欄

Ext.Desktop（Desktop.js） 模擬操作系統(tǒng)的整個(gè)桌面
Ext.app.Module（Module.js）對(duì)應(yīng)整個(gè)應(yīng)用程序中的各個(gè)功能模塊
Ext.app.App（App.js）對(duì)應(yīng)整個(gè)應(yīng)用程序

由于這些類并不包含在ExtJS的核心組件中，因此，在使用這些類之前，要先引用這些js文件以及相應(yīng)的css文件，代碼如下：

[javascript]view plaincopy

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

其中desktop.css模擬桌面所需的樣式文件，在samples.js文件中利用上面5個(gè)類實(shí)現(xiàn)了如圖所示的桌面。

使用桌面組件的第1步是創(chuàng)建Ext.app.App對(duì)象，代碼如下：

[javascript]view plaincopy

//桌面組件配置
MyDesktop=newExt.app.App({
//初始化
init:function(){
Ext.QuickTips.init();
},
//創(chuàng)建功能模塊
getModules:function(){
return[
newMyDesktop.GridWindow(),
newMyDesktop.TabWindow(),
newMyDesktop.AccordionWindow(),
newMyDesktop.BogusMenuModule(),
newMyDesktop.BogusModule()
];
},
//配置開始菜單
getStartConfig:function(){
return{
title:'我的系統(tǒng)',
iconCls:'user',
toolItems:[{
text:'設(shè)置',
iconCls:'settings',
scope:this
},'-',{
text:'注銷',
iconCls:'logout',
scope:this
}]
};
}
});

與創(chuàng)建大多數(shù)ExtJS組件不同，在創(chuàng)建Ext.app.App對(duì)象時(shí)，并不需要在Ext.onReady方法中指定頁(yè)面加載完后執(zhí)行的初始化桌面的方法，ExtJS會(huì)在頁(yè)面加載完成后,自動(dòng)調(diào)用Ext.app.App的init方法對(duì)模擬的桌面進(jìn)行初始化。
在init方法執(zhí)行后，ExtJS會(huì)自動(dòng)調(diào)用getModules和getStartConfig方法對(duì)整個(gè)應(yīng)用程序進(jìn)行配置。getModules方法返回了一個(gè)包含多個(gè)Ext.app.Module對(duì)象的數(shù)組。每一個(gè)Module對(duì)象代表應(yīng)用中的一個(gè)功能模塊，這些功能模塊都以彈窗的形式出現(xiàn)在桌面上。可以使用模擬桌面的開始菜單的Ext.ux.StartMenu展開這些功能模塊的窗口。
對(duì)于已經(jīng)展開的窗口，也可以通過模擬桌面下方的任務(wù)欄的Ext.ux.TaskBar控制某個(gè)窗口的顯示或隱藏。
Ext.app.App中的startConfig（）函數(shù)主要是用來配置開始菜單的選項(xiàng)。例子中配置了兩個(gè)按鈕，名稱分別為"設(shè)置","注銷"，可以像對(duì)待普通菜單項(xiàng)一樣配置，設(shè)置對(duì)應(yīng)的標(biāo)題，圖標(biāo)等參數(shù)。也可以設(shè)置handler在用戶點(diǎn)擊時(shí)執(zhí)行對(duì)應(yīng)的操作。

[javascript]view plaincopy

/*
*創(chuàng)建一個(gè)名為MyDesktop.GridWindow的功能模塊，并在Ext.app.App的getModules()函數(shù)中對(duì)其執(zhí)行了初始化操作。
*/
MyDesktop.GridWindow=Ext.extend(Ext.app.Module,{
id:'grid-win',
//初始化
init:function(){
this.launcher={
text:'GridWindow',
iconCls:'accordion',
handler:this.createWindow,
scope:this
}
},
createWindow:function(){
vardesktop=this.app.getDesktop();
varwin=desktop.getWindow('grid-win');
if(!win){
win=desktop.createWindow({
id:'grid-win',
title:'GridWindow',
740,
height:480,
iconCls:'icon-grid',
shim:false,
animCollapse:false,
constrainHeader:true
});
}
win.show();
}
});

在為Ext.app.App創(chuàng)建功能模塊時(shí)，都要集成Ext提供的Ext.app.Module,這個(gè)類中只定義一個(gè)init()函數(shù)，需要重寫這個(gè)函數(shù)來實(shí)現(xiàn)我們的功能。
一般只需要在init()函數(shù)中定義一個(gè)launcher對(duì)象，他是一個(gè)JSON對(duì)象，內(nèi)部包含了啟動(dòng)這個(gè)功能模塊所需要的一些配置。當(dāng)在Ext.ux.StartMenu中點(diǎn)擊對(duì)應(yīng)的功能模塊時(shí)，就會(huì)執(zhí)行l(wèi)auncher中定義的handler屬性，彈出這個(gè)功能模塊對(duì)應(yīng)的窗口。
例子中的handler屬性對(duì)應(yīng)著自身的createWindow()函數(shù)。在這個(gè)回調(diào)函數(shù)中，我們先通過this.app.getDesktop()獲得整個(gè)應(yīng)用對(duì)應(yīng)的模擬桌面，然后使用desktop.getWindow('grid-win')判斷功能模塊對(duì)應(yīng)的窗口是否已經(jīng)存在，如果窗口還沒有創(chuàng)建，就調(diào)用desktop.createWindow()創(chuàng)建這個(gè)窗口,，并顯示出來。
除了使用Ext.ux.StartMenu顯示功能窗口之外，我們還可以使用桌面的快捷方式啟動(dòng)對(duì)應(yīng)的功能模塊，點(diǎn)擊模擬桌面上放置的圖標(biāo)或鏈接，就可以讓對(duì)應(yīng)的功能窗口直接顯示出來。

[javascript]view plaincopy

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

Ext.Desktop中將快捷方式稱為shortcut,我們不需要寫任何代碼來配置快捷方式，只需要在為標(biāo)簽和對(duì)象命名時(shí)遵守一定的規(guī)則即可。
在模擬桌面上顯示的快捷方式時(shí)所使用的HTML標(biāo)簽如下：

[javascript]view plaincopy

<dlid="x-shortcuts">
<dtid="grid-win-shortcut">
<ahref="#"><imgsrc="images/s.gif"/>
<div>GridWindow</div></a>
</dt>
</dl>

模擬快捷方式都必須包含在id = 'x-shortcuts'的dl標(biāo)簽中，dl標(biāo)簽中包含每個(gè)dt標(biāo)簽都將成為一個(gè)快捷方式。這些dt標(biāo)簽屬性都以-shortcut結(jié)尾，將id屬性中的-shortcut部分去掉后，得到的就是功能模塊的id。

轉(zhuǎn)載自：http://blog.csdn.net/sjf0115/article/details/9346727

總結(jié)

以上是生活随笔為你收集整理的ExtJs桌面组件（DeskTop）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。