ExtJs桌面组件(DeskTop)

时间:2024-03-14 21:14:46

分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识,造福人民,实现我们中华民族伟大复兴!

               

在desktop\js目录中包含了5个js文件,这5个js文件如下:

ExtJs桌面组件(DeskTop)

还有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个类实现了如图所示的桌面。

ExtJs桌面组件(DeskTop)


ExtJs桌面组件(DeskTop)



使用桌面组件的第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="images/s.gif" />            <div>Grid Window</div></a>        </dt>    </dl>


模拟快捷方式都必须包含在id = 'x-shortcuts'的dl标签中,dl标签中包含每个dt标签都将成为一个快捷方式。这些dt标签属性都以-shortcut结尾,将id属性中的-shortcut部分去掉后,得到的就是功能模块的id。



           

给我老师的人工智能教程打call!http://blog.csdn.net/jiangjunshow

ExtJs桌面组件(DeskTop)