Ext JS4的Desktop的改造

Ext JS4的Desktop的改造。 
在下载的源代码examples/desktop下可以运行它，其比较类似web桌面，其改造的方法经测试，如下。 
1，将其目录整个复制一份，到自己的工程下，可改目录名(如/desktop2) 
2，在/desktop2下创建ext-4.0子目录，并在/desktop2/ext-4.0下复制Ext JS4的/resources和/src两个子目录，以及 ext.js和ext-debug.js两个文件（目录结构与下载的Ext JS4保持一致)。 
3，打开desktop.html文件， 
  

 <script type="text/javascript" src="../../builds/ext-core.js"></script>
    <script type="text/javascript" src="classes.js"></script>

    <script type="text/javascript">
        Ext.Loader.setPath({
            'Ext.ux.desktop': 'js',
            MyDesktop: ''
        });

        Ext.require('MyDesktop.App');

        var myDesktopApp;
        Ext.onReady(function () {
            myDesktopApp = new MyDesktop.App();
        });
    </script> 

 
将它们修改为：         

   

 <script type="text/javascript" src="ext-4.0/ext-debug.js"></script>

    <script type="text/javascript">
              Ext.Loader.setConfig({
                   enabled:true,
                   paths:{
                      'Ext.ux.desktop': 'js',
                      MyDesktop: ''
             }
              });

        Ext.require('MyDesktop.App');

        var myDesktopApp;
        Ext.onReady(function () {
            myDesktopApp = new MyDesktop.App();
        });
    </script>
    <script type="text/javascript" src="App.js"></script> 

 
这是因为用到了原有项目用到了将js打包到了classes.js中，无法进行进一步修改，这里只是调整了一下js载入的顺序，并使用ext-debug.js(最终生产环境可以换成ext.js)。 
经测试发现，App.js必须放到中间那一长段代码的后面才能其作用。 
4，修改App.js ，往桌面上添加快捷方式，修改桌面背景(代码基本上未动，只用添加的地方加粗了，可以参照Notepad.js的写法自己写）。 
    

Ext.define('MyDesktop.App', {
    extend: 'Ext.ux.desktop.App',

    requires: [
        'Ext.window.MessageBox',

        'Ext.ux.desktop.ShortcutModel',

        'MyDesktop.SystemStatus',
        'MyDesktop.VideoWindow',
        'MyDesktop.GridWindow',
        'MyDesktop.TabWindow',
        'MyDesktop.AccordionWindow',
        'MyDesktop.Notepad',
        'MyDesktop.BogusMenuModule',
        'MyDesktop.BogusModule',

//        'MyDesktop.Blockalanche',
        'MyDesktop.Settings',
        'MyDesktop.LyqTest1'
    ],

    init: function() {
        // custom logic before getXYZ methods get called...

        this.callParent();

        // now ready...
    },

    getModules : function(){
        return [
            new MyDesktop.VideoWindow(),
            //new MyDesktop.Blockalanche(),
            new MyDesktop.SystemStatus(),
            new MyDesktop.GridWindow(),
            new MyDesktop.TabWindow(),
            new MyDesktop.AccordionWindow(),
            new MyDesktop.Notepad(),
            new MyDesktop.BogusMenuModule(),
            new MyDesktop.BogusModule(),
            new MyDesktop.LyqTest1()
        ];
    },

    getDesktopConfig: function () {
        var me = this, ret = me.callParent();

        return Ext.apply(ret, {
            //cls: 'ux-desktop-black',

            contextMenuItems: [
                { text: 'Change Settings', handler: me.onSettings, scope: me }
            ],

            shortcuts: Ext.create('Ext.data.Store', {
                model: 'Ext.ux.desktop.ShortcutModel',
                data: [
                    { name: 'Grid Window', iconCls: 'grid-shortcut', module: 'grid-win' },
                    { name: 'Accordion Window', iconCls: 'accordion-shortcut', module: 'acc-win' },
                    { name: 'Notepad', iconCls: 'notepad-shortcut', module: 'notepad' },
                    { name: 'System Status', iconCls: 'cpu-shortcut', module: 'systemstatus'},
                    { name: 'Java学习', iconCls: 'java-shortcut', module: 'lyqtest1' }
                ]
            }),

            wallpaper: 'wallpapers/Wood-Sencha.jpg',
            wallpaperStretch: false
        });
    },

    // config for the start menu
    getStartConfig : function() {
        var me = this, ret = me.callParent();

        return Ext.apply(ret, {
            title: 'Don Griffin',
            iconCls: 'user',
            height: 300,
            toolConfig: {
                width: 100,
                items: [
                    {
                        text:'Settings',
                        iconCls:'settings',
                        handler: me.onSettings,
                        scope: me
                    },
                    '-',
                    {
                        text:'Logout',
                        iconCls:'logout',
                        handler: me.onLogout,
                        scope: me
                    }
                ]
            }
        });
    },

    getTaskbarConfig: function () {
        var ret = this.callParent();

        return Ext.apply(ret, {
            quickStart: [
                { name: 'Accordion Window', iconCls: 'accordion', module: 'acc-win' },
                { name: 'Grid Window', iconCls: 'icon-grid', module: 'grid-win' }
            ],
            trayItems: [
                { xtype: 'trayclock', flex: 1 }
            ]
        });
    },

    onLogout: function () {
        Ext.Msg.confirm('Logout', 'Are you sure you want to logout?');
    },

    onSettings: function () {
        var dlg = new MyDesktop.Settings({
            desktop: this.desktop
        });
        dlg.show();
    }
});