Ext JS4의 Desktop 개조

Ext JS4의 Desktop 개조다운로드한 원본 코드 examples/desktop에서 실행할 수 있으며, 웹 데스크톱과 유사하며, 그 개조 방법은 다음과 같다.1, 디렉터리를 전체적으로 복사하여 자신의 프로젝트에서 디렉터리 이름(예를 들어/desktop2)을 변경할 수 있습니다. 2,/desktop2에서 ext-4.0 하위 디렉터리를 만들고/desktop2/ext-4.0에서 Ext JS4의/resources와/src 두 하위 디렉터리, 그리고 ext.js와 ext-debug를 복사합니다.js 두 파일(다운로드한 Ext JS4와 디렉토리 구조가 일치함).3, 데스크톱을 엽니다.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();
    }
});