ExtJs桌面组件

最新推荐文章于 2021-02-28 01:51:05 发布

第三眼的思绪

最新推荐文章于 2021-02-28 01:51:05 发布

阅读量1.1k

点赞数

分类专栏：前端文章标签： extjs desktop 桌面组件 extjs桌面

本文链接：https://blog.csdn.net/A123638/article/details/38088287

版权

前端专栏收录该内容

36 篇文章 1 订阅

订阅专栏

在 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,{
	//当前窗体组件ID
	id:'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:设置打开指定的面板置顶。默认为false
						activeOnTop: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();
	}
})

桌面显示如图所示：