当前位置:首页 > 开发 > Web前端 > Ext > 正文

Ext JS4的Desktop的改造

发表于: 2013-08-04   作者:cloklo   来源:转载   浏览次数:
摘要: Ext JS4的Desktop的改造。 在下载的源代码examples/desktop下可以运行它,其比较类似web桌面,其改造的方法经测试,如下。 1,将其目录整个复制一份,到自己的工程下,可改目录名(如/desktop2) 2,在/desktop2下创建ext-4.0子目录,并在/desktop2/ext-4.0下复制Ext JS4的/resources和/src

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();
    }
});

 

Ext JS4的Desktop的改造

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
Ext JS4,用grid.plugin.CellEditing做高级查询: 写了90%,界面出来了,小兴奋就贴出来,还有细节要
任务栏图标; 扩展属性 引入css,img 改comm.css的位置; 改css的路径; <img title="clip_image
我的广告单元,有空点一下哦,谢谢! Ext.Net官网的DeskTop有点慢,我拿过来稍稍做了下修改,其实主
最近学数据结构的时候一直在使用UltraEdit这个强大的文本编辑工具写代码,然后再用命令行编译cpp文
搬入新居并布置了家具位置之后,总觉得布线不是很合理,想放个电话的地方没有RJ11插座却反而有个RJ45
修改的compile命令,为emacs实现快捷键绑定的编译功能: F9编译,没有存的文件会提示存盘 C-F9是无
前言:直接从网上荡下DWZ的dwz4j企业级Java Web快速开发框架(Mybatis + SpringMVC) + jUI整合应用使
原http://www.cnblogs.com/hellowood/archive/2010/08/05/1793364.html 键字: sso域名:cas.server
震动鼠标改造 2013-10-5 9月28号陈老师想在鼠标里加装一个震动电机来改造成震动鼠标,让CS更过瘾一
垂直社区的产品改造 垂直社区类产品如何进行产品升级改造?知名互联网人冯大辉分享的有关垂直社区的
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号