在Ext JS的目录下包含了相关的例子,Ext JS_HOME/examples/desktop目录下可以找打相关的示例。
(1)把整个desktop文件夹拷贝到主目录下
(2)在主目录下创建一个文件夹script,把Ext JS目录里的下述文件复制到script文件夹中
a) adapter文件夹
b) resources文件夹
c) ext-all.js
d) ext-base.js
e) 同时,为了页面支持中文,在script下创建一个locale的文件夹,把Ext JS目录下的src/locale/ext-lang-zh_CN.js文件拷贝进去
(3)在script文件夹的下创建一个mydesktop文件夹用来保存自己的桌面管理的js文件
(4)在MydeskTop文件夹下创建example.js用于编写桌面的显示
(5)在主目录下创建一个HTML文件desktop.html(这里随便命名)用于加载自己编写的桌面
(6)编写script.js文件,可以参考Ext JS目录下的examples/desktop/sample.js文件
(7)编写desktop.html文件,可以参考examples/desktop/desktop.html文件
a) 需要引入的一些文件
<!--CSS文件-->
<link rel="stylesheet" type="text/css"
href="http://blog.163.com/qcb_163/blog/script/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css"
href="http://blog.163.com/qcb_163/blog/script/resources/css/ext-patch.css" />
<link rel="stylesheet" type="text/css" href="http://blog.163.com/qcb_163/blog/../css/desktop.css" />
<script type="text/javascript" src="http://blog.163.com/qcb_163/blog/script/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://blog.163.com/qcb_163/blog/script/ext-all.js"></script>
<script type="text/javascript" src="http://blog.163.com/qcb_163/blog/script/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="http://blog.163.com/qcb_163/blog/desktop/js/StartMenu.js"></script>
<script type="text/javascript" src="http://blog.163.com/qcb_163/blog/desktop/js/TaskBar.js"></script>
<script type="text/javascript" src="http://blog.163.com/qcb_163/blog/desktop/js/Desktop.js"></script>
<script type="text/javascript" src="http://blog.163.com/qcb_163/blog/desktop/js/App.js"></script>
<script type="text/javascript" src="http://blog.163.com/qcb_163/blog/desktop/js/Module.js"></script>
<script type="text/javascript" src="http://blog.163.com/qcb_163/blog/script/mydesktop/example.js"></script>
b) 在body中添加js文件需要的html标签
<div id="x-desktop"> <a href="http://extjs.com" target="_blank" style="margin:5px; float:right;"></a>
<!--所有的桌面图标放在id属性值为x-shortcuts的<dl>元素中-->
<dl id="x-shortcuts">
<!--每个<dt>元素表示一个图标,<dt>元素的id属性值必须与相应的Ext.app.Module类的id的属性值对应:grid-win ==> grid-win-shortcut -->
<dt id="grid-win-shortcut"> <a href="http://blog.163.com/qcb_163/blog/#"><img src="http://blog.163.com/qcb_163/blog/desktop/images/s.gif" />
<div>Grid Window</div>
</a> </dt>
<dt id="acc-win-shortcut"> <a href="http://blog.163.com/qcb_163/blog/#"><img src="http://blog.163.com/qcb_163/blog/desktop/images/s.gif" />
<div>Accordion Window</div>
</a> </dt>
</dl>
</div>
<div id="ux-taskbar">
<div id="ux-taskbar-start"></div>
<div id="ux-taskbuttons-panel"></div>
<div class="x-clear"></div>
</div>