ExtJs桌面组件
在 desktop/js 目录中包含了5个js文件，这5个js文件如下图所示：
这5个js文件中封装了用于模拟桌面的类，它们的功能简单说明如下。
Ext.ux.StartMenu（StartMenu.js）： 模拟操作系统桌面左下方的开始菜单；
Ext.Desktop（Desktop.js）： 模拟操作系统的整个桌面；
Ext.app.Module（Module.js）：对应整个应用程序中的各个功能模块；
Ext.ux.StartMenu（StartMenu.js）： 模拟操作系统桌面左下方的开始菜单；
Ext.ux.TaskBar（TaskBar.js） 模拟操作系统桌面右下方的任务栏 。
这5个js文件中封装了用于模拟桌面的类，它们的功能简单说明如下。
Ext.ux.StartMenu（StartMenu.js）： 模拟操作系统桌面左下方的开始菜单；
Ext.Desktop（Desktop.js）： 模拟操作系统的整个桌面；
Ext.app.Module（Module.js）：对应整个应用程序中的各个功能模块；
Ext.ux.StartMenu（StartMenu.js）： 模拟操作系统桌面左下方的开始菜单；
Ext.ux.TaskBar（TaskBar.js） 模拟操作系统桌面右下方的任务栏 。
实现显示桌面的资源还包括/css目录下的desktop.css样式和/images下的图片素材等。
这些js中并不包含在ExtJS的核心组件中，因此，在引入这些js组件和css样式之前，必须先引入核心js组件和css样式文件。代码如下：
<span style="font-size:12px;"><link rel="StyleSheet" type="text/css" href="${pageContext.request.contextPath }/ext/resources/css/ext-all.css"/>
<link rel="StyleSheet" type="text/css" href="${pageContext.request.contextPath }/inc/desktop/css/desktop.css"/><!-- libs -->
<script type="text/javascript" src="${pageContext.request.contextPath }/ext/adapter/ext/ext-base.js"></script>
<!-- endlibs -->
<script type="text/javascript" src="${pageContext.request.contextPath }/ext/ext-all-debug.js"></script><!-- desktop -->
<script type="text/javascript" src="${pageContext.request.contextPath }/inc/desktop/js/StartMenu.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/inc/desktop/js/TaskBar.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/inc/desktop/js/Desktop.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/inc/desktop/js/App.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/inc/desktop/js/Module.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/sample.js"></script> </span>其中desktop.css为模拟桌面所需的样式文件。sample.js为实现桌面配置，代码如下：
//模块组件加载
document.write("<script type='text/javascript' src='js/modules/layout.js'></script>");
document.write("<script type='text/javascript' src='js/modules/cascode-tree.js'></script>");//桌面组件配置
MyDesktop = new Ext.app.App({//初始化init : function(){Ext.QuickTips.init();},//创建功能模块 getModules : function(){return [new MyDesktop.LayoutWindow(),<span style="white-space:pre"> </span> new MyDesktop.CascodeTreeWindow()];},//配置开始菜单 getStartConfig : function(){return {title:'我的系统',iconCls:'user',toolItems:[{text:'设置',iconCls:'settings',scope:this,handler:function(){Ext.Msg.alert("消息","设置");}},'-',{text:'注销',iconCls:'logout',scope:this,handler:function(){Ext.Msg.alert("消息","注销");}}]};}
});如下为其中一个事例Modul代码：
MyDesktop.LayoutWindow = Ext.extend(Ext.app.Module,{//当前窗体组件IDid:'layout-win',init:function(){this.launcher = {//该组件在开始菜单中的名称text:'Ext布局方式',//开始菜单中显示的图标iconCls:'',handler:this.createWindow,scope:this}},createWindow : function(){//获取当前桌面组件（或称对象）var desktop = this.app.getDesktop();//通过ID在desktop组件中获取指定窗体组件var win = desktop.getWindow('layout-win');if(!win){win = desktop.createWindow({//此ID为创建窗体ID，必须和顶部当前窗体组件保持一致id:'layout-win',//打开窗体后显示标题title:'Ext布局方式',width:740,height:480,//'false'时禁用浏览器中iframe框的底衬.shim:false,//true 将会在panel被折叠时使用动画效果，false将会跳过动画效果animCollapse:false,//true：限制窗口的顶部在上一级容器里(允许窗口的身体超出上一级容器)；false：允许顶部超出上级容器。使用constrain可以限制整个窗口。constrainHeader:true,//为真时初始化以最大状态显示窗体maximized:true,layout:'border',defaults:{//true:设置默认给面板添加收缩按钮collapsible: true,//true:设置默认可以通过拉动边框来改变面板大小split: true,frame:false},items:[{title: '顶部',region:'north',//margins: '5 5 0 5',height: 70},{title:'底部',region:'south',//这个配置仅仅在 Panel 以border 布局中存在子组件且配置了collapsible 属性时有效（collapsible默认已部署）。collapseMode: 'mini',height:70},{title: '左侧',region: 'west',width: 150,layout:'accordion',split:false,layoutConfig:{//true:展开面板显示动画。false:展开面板不使用动画（默认）animate:true,//true:设置打开指定的面板置顶。默认为falseactiveOnTop:false},items:[new Ext.tree.TreePanel({title: 'TabPanel测试面板',//true:初始状态为关闭状态。false：初始状态为展开状态expanded:true,//true:显示树的层次线。false：不显示树的层次线lines:false,autoScroll:true,//true:显示根节点（默认）false:隐藏根节点。（可缺省）rootVisible:true,root: new Ext.tree.AsyncTreeNode({text:'根节点',//true：不会为本节点渲染展开图标或箭头，样式上当最底层节点处理，并将子节点全部显示出来。默认为falseleaf:false,//True节点是展开的。默认为false （ps:若不显示根节点，则忽略此配置，显示所有子节点）expanded:true,children:[{text:'节点1',//当为最底层节点时，设置leaf:true或children:[]leaf:true},{text:'节点2',leaf:true}],listeners: {'click':function(n,e,checked){alert(2);}}})}),{title:'面板二',html:'面板2 - body'},{title:'面板三',html:'面板3 - body'},{title:'面板四',html:'面板4 - body'},{title:'面板五',html:'面板5 - body'}]},{title: '右侧',region: 'east',html: '右边',collapseMode: 'mini',width: 150,minSize:120,maxSize:200,layout:'fit',items:new Ext.TabPanel({//false:不现实边框(是否显示边框)border: false,//默认选中索引为0的panel容器activeTab: 0,//bottom:将选项卡置于底部，默认为top（能为'top' 或者 'bottom'）tabPosition: 'bottom',//是否允许Tab溢出时可以滚动(移动以显示超出部分)，默认为false。enableTabScroll:true,items:[{title:'右侧卡一',html:'<p>选项卡置于TabPanel底部，选项卡一',},{title:'右侧卡二',html:'<p>选项卡置于TabPanel底部，选项卡二',//添加关闭卡按钮closable:true}]})},{ title: '中间区域',region:'center',layout:'fit',collapsible: false,items:new Ext.TabPanel({id:'centerTabPanel',//false:不现实边框(是否显示边框)border: false,//默认选中索引为0的panel容器activeTab: 0,defaults:{//默认给选项卡添加关闭按钮closable:true},items:[{title:'选项卡一',html:'这里是选项卡一区域。'},{title:'选项卡二',html:'这里是选项卡二区域。'}],listeners:{//选择（改变）选项卡事件tabchange: function(tabPanel, newTab, oldTab) {//选中指定索引选项卡//Ext.getCmp("centerTabPanel").setActiveTab(0);}}})}]})}//创建窗体if反括号win.show();}
})
