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：不会为本节点渲染展开图标或箭头，样式上当最底层节点处理，并将子节点全部显示出来。默认为false                        leaf: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();}})

桌面显示如图所示：