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="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