ExtJs桌面组件(DeskTop)
在desktop\js目录中包含了5个js文件,这5个js文件如下:
还有css样式表:desktop.css,图片素材
在这5个js文件中封装了用于模拟桌面的类,这些类如下:
Ext.ux.StartMenu(StartMenu.js) 模拟操作系统桌面左下方的开始菜单
Ext.ux.TaskBar(TaskBar.js) 模拟操作系统桌面右下方的任务栏
Ext.Desktop(Desktop.js) 模拟操作系统的整个桌面
Ext.app.Module(Module.js)对应整个应用程序中的各个功能模块
Ext.app.App(App.js)对应整个应用程序
由于这些类并不包含在ExtJS的核心组件中,因此,在使用这些类之前,要先引用这些js文件以及相应的css文件,代码如下:
- <script type="text/javascript" src="js/StartMenu.js"></script>
- <script type="text/javascript" src="js/TaskBar.js"></script>
- <script type="text/javascript" src="js/Desktop.js"></script>
- <script type="text/javascript" src="js/App.js"></script>
- <script type="text/javascript" src="js/Module.js"></script>
- <script type="text/javascript" src="sample.js"></script>
其中desktop.css模拟桌面所需的样式文件,在samples.js文件中利用上面5个类实现了如图所示的桌面。
使用桌面组件的第1步是创建Ext.app.App对象,代码如下:
- //桌面组件配置
- MyDesktop = new Ext.app.App({
- //初始化
- init :function(){
- Ext.QuickTips.init();
- },
- //创建功能模块
- getModules : function(){
- return [
- new MyDesktop.GridWindow(),
- new MyDesktop.TabWindow(),
- new MyDesktop.AccordionWindow(),
- new MyDesktop.BogusMenuModule(),
- new MyDesktop.BogusModule()
- ];
- },
- //配置开始菜单
- getStartConfig : function(){
- return {
- title: '我的系统',
- iconCls: 'user',
- toolItems: [{
- text:'设置',
- iconCls:'settings',
- scope:this
- },'-',{
- text:'注销',
- iconCls:'logout',
- scope:this
- }]
- };
- }
- });
与创建大多数ExtJS组件不同,在创建Ext.app.App对象时,并不需要在Ext.onReady方法中指定页面加载完后执行的初始化桌面的方法,ExtJS会在页面加载完成后,自动调用Ext.app.App的init方法对模拟的桌面进行初始化。
在init方法执行后,ExtJS会自动调用getModules和getStartConfig方法对整个应用程序进行配置。getModules方法返回了一个包含多个Ext.app.Module对象的数组。每一个Module对象代表应用中的一个功能模块,这些功能模块都以弹窗的形式出现在桌面上。可以使用模拟桌面的开始菜单的Ext.ux.StartMenu展开这些功能模块的窗口。
对于已经展开的窗口,也可以通过模拟桌面下方的任务栏的Ext.ux.TaskBar控制某个窗口的显示或隐藏。
Ext.app.App中的startConfig()函数主要是用来配置开始菜单的选项。例子中配置了两个按钮,名称分别为"设置","注销",可以像对待普通菜单项一样配置,设置对应的标题,图标等参数。也可以设置handler在用户点击时执行对应的操作。
- /*
- * 创建一个名为MyDesktop.GridWindow的功能模块,并在Ext.app.App的getModules()函数中对其执行了初始化操作。
- */
- MyDesktop.GridWindow = Ext.extend(Ext.app.Module, {
- id:'grid-win',
- //初始化
- init : function(){
- this.launcher = {
- text: 'Grid Window',
- iconCls:'accordion',
- handler : this.createWindow,
- scope: this
- }
- },
- createWindow : function(){
- var desktop = this.app.getDesktop();
- var win = desktop.getWindow('grid-win');
- if(!win){
- win = desktop.createWindow({
- id: 'grid-win',
- title:'Grid Window',
- width:740,
- height:480,
- iconCls: 'icon-grid',
- shim:false,
- animCollapse:false,
- constrainHeader:true
- });
- }
- win.show();
- }
- });
在为Ext.app.App创建功能模块时,都要集成Ext提供的Ext.app.Module,这个类中只定义一个init()函数,需要重写这个函数来实现我们的功能。
一般只需要在init()函数中定义一个launcher对象,他是一个JSON对象,内部包含了启动这个功能模块所需要的一些配置。当在Ext.ux.StartMenu中点击对应的功能模块时,就会执行launcher中定义的handler属性,弹出这个功能模块对应的窗口。
例子中的handler属性对应着自身的createWindow()函数。在这个回调函数中,我们先通过this.app.getDesktop()获得整个应用对应的模拟桌面,然后使用desktop.getWindow('grid-win')判断功能模块对应的窗口是否已经存在,如果窗口还没有创建,就调用desktop.createWindow()创建这个窗口,,并显示出来。
除了使用Ext.ux.StartMenu显示功能窗口之外,我们还可以使用桌面的快捷方式启动对应的功能模块,点击模拟桌面上放置的图标或链接,就可以让对应的功能窗口直接显示出来。
- MyDesktop.TabWindow = Ext.extend(Ext.app.Module, {
- id:'tab-win',
- init : function(){
- this.launcher = {
- text: 'Tab Window',
- iconCls:'tabs',
- handler : this.createWindow,
- scope: this
- }
- },
- createWindow : function(){
- var desktop = this.app.getDesktop();
- var win = desktop.getWindow('tab-win');
- if(!win){
- win = desktop.createWindow({
- id: 'tab-win',
- title:'Tab Window',
- width:740,
- height:480,
- html:'Tab Window',
- iconCls: 'tabs',
- shim:false,
- animCollapse:false,
- border:false,
- constrainHeader:true
- });
- }
- win.show();
- }
- });
Ext.Desktop中将快捷方式称为shortcut,我们不需要写任何代码来配置快捷方式,只需要在为标签和对象命名时遵守一定的规则即可。
在模拟桌面上显示的快捷方式时所使用的HTML标签如下:
- <dl id="x-shortcuts">
- <dt id="grid-win-shortcut">
- <a href="#"><img src="data:images/s.gif" />
- <div>Grid Window</div></a>
- </dt>
- </dl>
模拟快捷方式都必须包含在id = 'x-shortcuts'的dl标签中,dl标签中包含每个dt标签都将成为一个快捷方式。这些dt标签属性都以-shortcut结尾,将id属性中的-shortcut部分去掉后,得到的就是功能模块的id。
转载自:http://blog.csdn.net/sjf0115/article/details/9346727
ExtJs桌面组件(DeskTop)的更多相关文章
- Google Map和桌面组件 Android开发教程
本文节选于机械工业出版社推出的<Android应用开发揭秘>一 书,作者为杨丰盛.本书内容全面,详细讲解了Android框架.Android组件.用户界面开发.游戏开发.数据存储.多媒体开 ...
- Android之桌面组件AppWidget
转载:Android之桌面组件App Widget初探 Android开发应用除了程序应用,还有App Widget应用.好多人会开发程序应用而不会开发App Widget应用.本帖子就是帮助大家学习 ...
- blfs(systemd版本)学习笔记-编译安装gnome桌面组件及应用
我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! blfs中的gnome项目地址:http://www.linuxfromscratch.org/blfs/view/stable ...
- Javascript - ExtJs - GridPanel组件
GridPanel组件(Ext.grid.GridPanel)logogram:Ext.grid.Panel | xtype:gridpanel 此类派生自Ext.Panel,创建表格需要两个必须的对 ...
- 实用ExtJS教程100例-008:使用iframe填充ExtJS Window组件
上面两节中我们分别演示了ExtJS Window的常用功能 和 如何最小化ExtJS Window组件,在这篇内容中我们来演示一下如何使用iframe填充window组件. 思路很简单,首先创建一个w ...
- Extjs window组件 拖动统制
Extjs window组件 拖动控制有时候一拖就拖出了浏览器,在想拖回来就不好办了: 解决办法:参考以下代码,在加载Ext核心库以后执行: Ext.override(Ext.Window, { ...
- Extjs获得组件值的方式
Extjs中找Form,Extjs找组件的方式: 1,Extjs.getCmp 2,通过组件之间的关系,up,down 结论: 1,form.getValues()和form.getForm().g ...
- ExtJS关于组件Component生命周期
extjs组件生命周期大体分为3个阶段:初始化.渲染.销毁. 第一阶段:初始化 初始化工作开始于组件的诞生,所有必须的配置设定.事件注册.预渲染处理等都在此时进行. 1.应用组件的配置: 当初始化一个 ...
- Win7 远程 Ubuntu 桌面 mate desktop,并实现中文输入法
一. 安装mate desktop: $sudo apt-add-repository ppa:ubuntu-mate-dev/ppa $sudo apt-add-repository ppa:ubu ...
随机推荐
- Android中各组件的生命周期
1.Activity生命周期图 二.activity三种状态 (1)active:当Activity运行在屏幕前台(处于当前任务活动栈的最上面),此时它获取了焦点能响应用户的操作,属于活动状态,同一个 ...
- Android控件大全(三)——RecyclerView
是时候用RecyclerView来替换ListView和GridView了 好处就不多说了,百度一搜一大把,来介绍下用法 先定义个适配器: public class BottomSheetAdapte ...
- 法线贴图——Normal Mapping
对于不曾学过.用过法线贴图的人来说,提到法线贴图,经常会提到的问题是什么是法线贴图?法线贴图用于解决什么问题?法线贴图的原理是什么?本文将就这三个问题阐述本人的一些见解,各位不喜勿喷!!! 谈到法线贴 ...
- Git:代码冲突常见解决方法
摘自: http://blog.csdn.net/iefreer/article/details/7679631 如果系统中有一些配置文件在服务器上做了配置修改,然后后续开发又新添加一些配置项的时候, ...
- 再论App的安全性
现代人早已脱离不了智能手机,几乎人手一机,常见人边走边滑,着实危险.大家用手机App购物,用网银App付费,用股票App下单炒股,太方便了所以成了家常便饭. 没错,就是因为太方便,所以大多只会留意好不 ...
- c89和c99的区别【转】
//本文转自:http://www.360doc.com/content/10/0324/18/2633_20101093.shtml 注: GCC支持C99, 通过 --std=c99 命令行参数开 ...
- hdu1506
today, my cc can't make '__in64' it's so bad!!! i don't know why #include <stdio.h> //long lon ...
- javaSE第十九天
第十九天 227 1:异常(理解) 227 (1) 定义 227 a)异常的引入 227 (2)异常的体系 228 (3)异常的处理: 229 A:JVM的默认处理 ...
- js事件 event.target
我们购物车里,会时不时增加和删除产品时,就会绑定事件和解绑的动作. <ul> <li></li> <li></li> </ul> ...
- Winform 打开下载的文件
private void OpenFile(string filename) { ProcessStartInfo sInfo = new ProcessStartInfo(); sInfo.Wind ...