Ext JS模拟Windows桌面

在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="script/resources/css/ext-all.css" />

<link rel="stylesheet" type="text/css"

    href="script/resources/css/ext-patch.css" />

<link rel="stylesheet" type="text/css" href="../css/desktop.css" />

 

<script type="text/javascript" src="script/adapter/ext/ext-base.js"></script>

<script type="text/javascript" src="script/ext-all.js"></script>

<script type="text/javascript" src="script/locale/ext-lang-zh_CN.js"></script>

<script type="text/javascript" src="desktop/js/StartMenu.js"></script>

<script type="text/javascript" src="desktop/js/TaskBar.js"></script>

<script type="text/javascript" src="desktop/js/Desktop.js"></script>

<script type="text/javascript" src="desktop/js/App.js"></script>

<script type="text/javascript" src="desktop/js/Module.js"></script>

<script type="text/javascript" src="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="#"><img src="desktop/images/s.gif" />

            <div>Grid Window</div>

      </a> </dt>

      <dt id="acc-win-shortcut"> <a href="#"><img src="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>