ExtJs桌面组件（DeskTop）

本是古典何须时尚 2022-08-13 15:55 209阅读 0赞

在desktop\\js目录中包含了5个js文件，这5个js文件如下：

![Center][]

还有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文件，代码如下：

**\[javascript\]**  [view plain][] [copy][view plain]

1.  <script type="text/javascript" src="js/StartMenu.js"></script>  
2.      <script type="text/javascript" src="js/TaskBar.js"></script>  
3.      <script type="text/javascript" src="js/Desktop.js"></script>  
4.      <script type="text/javascript" src="js/App.js"></script>  
5.      <script type="text/javascript" src="js/Module.js"></script>  
6.      <script type="text/javascript" src="sample.js"></script>

其中desktop.css模拟桌面所需的样式文件，在samples.js文件中利用上面5个类实现了如图所示的桌面。

![Center 1][]

![Center 2][]

使用桌面组件的第1步是创建Ext.app.App对象，代码如下：

**\[javascript\]**  [view plain][] [copy][view plain]

1.  //桌面组件配置  
2.  MyDesktop = **new** Ext.app.App(\{  
3.      //初始化  
4.      init :**function**()\{  
5.          Ext.QuickTips.init();  
6.      \},  
7.      //创建功能模块  
8.      getModules : **function**()\{  
9.          **return** \[  
10.             **new** MyDesktop.GridWindow(),  
11.             **new** MyDesktop.TabWindow(),  
12.             **new** MyDesktop.AccordionWindow(),  
13.             **new** MyDesktop.BogusMenuModule(),  
14.             **new** MyDesktop.BogusModule()  
15.         \];  
16.     \},  
17.     //配置开始菜单  
18.     getStartConfig : **function**()\{  
19.         **return** \{  
20.             title: '我的系统',  
21.             iconCls: 'user',  
22.             toolItems: \[\{  
23.                 text:'设置',  
24.                 iconCls:'settings',  
25.                 scope:**this**  
26.             \},'-',\{  
27.                 text:'注销',  
28.                 iconCls:'logout',  
29.                 scope:**this**  
30.             \}\]  
31.         \};  
32.     \}  
33. \});

与创建大多数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在用户点击时执行对应的操作。

**\[javascript\]**  [view plain][] [copy][view plain]

1.  /\* 
2.   \* 创建一个名为MyDesktop.GridWindow的功能模块，并在Ext.app.App的getModules()函数中对其执行了初始化操作。 
3.   \*/  
4.  MyDesktop.GridWindow = Ext.extend(Ext.app.Module, \{  
5.      id:'grid-win',  
6.      //初始化  
7.      init : **function**()\{  
8.          **this**.launcher = \{  
9.              text: 'Grid Window',  
10.             iconCls:'accordion',  
11.             handler : **this**.createWindow,  
12.             scope: **this**  
13.         \}  
14.     \},  
15.     createWindow : **function**()\{  
16.         **var** desktop = **this**.app.getDesktop();  
17.         **var** win = desktop.getWindow('grid-win');  
18.         **if**(!win)\{  
19.             win = desktop.createWindow(\{  
20.                 id: 'grid-win',  
21.                 title:'Grid Window',  
22.                 width:740,  
23.                 height:480,  
24.                 iconCls: 'icon-grid',  
25.                 shim:**false**,  
26.                 animCollapse:**false**,  
27.                 constrainHeader:**true**  
28.             \});  
29.         \}  
30.         win.show();  
31.     \}  
32. \});

在为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显示功能窗口之外，我们还可以使用桌面的快捷方式启动对应的功能模块，点击模拟桌面上放置的图标或链接，就可以让对应的功能窗口直接显示出来。

**\[javascript\]**  [view plain][] [copy][view plain]

1.  MyDesktop.TabWindow = Ext.extend(Ext.app.Module, \{  
2.      id:'tab-win',  
3.      init : **function**()\{  
4.          **this**.launcher = \{  
5.              text: 'Tab Window',  
6.              iconCls:'tabs',  
7.              handler : **this**.createWindow,  
8.              scope: **this**  
9.          \}  
10.     \},  
11.     createWindow : **function**()\{  
12.         **var** desktop = **this**.app.getDesktop();  
13.         **var** win = desktop.getWindow('tab-win');  
14.         **if**(!win)\{  
15.             win = desktop.createWindow(\{  
16.                 id: 'tab-win',  
17.                 title:'Tab Window',  
18.                 width:740,  
19.                 height:480,  
20.                 html:'Tab Window',  
21.                 iconCls: 'tabs',  
22.                 shim:**false**,  
23.                 animCollapse:**false**,  
24.                 border:**false**,  
25.                 constrainHeader:**true**  
26.             \});  
27.         \}  
28.         win.show();  
29.     \}  
30. \});

Ext.Desktop中将快捷方式称为shortcut,我们不需要写任何代码来配置快捷方式，只需要在为标签和对象命名时遵守一定的规则即可。  
在模拟桌面上显示的快捷方式时所使用的HTML标签如下：

**\[javascript\]**  [view plain][] [copy][view plain]

1.  <dl id="x-shortcuts">  
2.          <dt id="grid-win-shortcut">  
3.              <a href="\#"><img src="images/s.gif" />  
4.              <div>Grid Window</div></a>  
5.          </dt>  
6.      </dl>

模拟快捷方式都必须包含在id = 'x-shortcuts'的dl标签中，dl标签中包含每个dt标签都将成为一个快捷方式。这些dt标签属性都以-shortcut结尾，将id属性中的-shortcut部分去掉后，得到的就是功能模块的id。

[Center]: /images/20220810/1c2402ad30694d34a3a98d70eb4e574e.png
[view plain]: http://blog.csdn.net/sjf0115/article/details/9346727#
[Center 1]: /images/20220810/39bb005693864ce5aa78ab88738f1ef1.png
[Center 2]: /images/20220810/8630ef0c7d4d4f97ae9ca645ee8ffb71.png