`
cloklo
  • 浏览: 28118 次
  • 性别: Icon_minigender_1
  • 来自: 襄阳
社区版块
存档分类
最新评论

Ext JS4的Desktop的改造

    博客分类:
  • HTML
 
阅读更多

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

 

分享到:
评论

相关推荐

    Ext4 desktop

    "Ext4 desktop" 是一个专为Linux操作系统设计的桌面环境增强工具,主要针对EXT4文件系统进行了优化,提供了丰富的桌面功能。EXT4是Linux中广泛使用的日志式文件系统,以其高效、稳定和大文件支持而著名。这个项目...

    Ext JS 4 Architecture

    Ext JS 4是一个成熟的JavaScript框架,用于开发富互联网应用程序,特别是那些需要运行在各种设备上的复杂、数据密集型的前端界面。Ext JS 4在架构层面体现了高度的模块化和可扩展性,这也是它区别于其他前端框架的一...

    ext JS 源码和学习资料

    本压缩包包含EXT JS的多个版本源码,如ext-3.2.0、ext3.3.1和ext4,以及对应的中文API文档和实用学习资料,对于想要深入理解EXT JS或提升EXT JS开发技能的人来说是宝贵的资源。 一、EXT JS 源码分析 EXT JS 的源码...

    EXT js 4带时间的日期控件

    EXT JS 是一个强大的JavaScript前端框架,专用于构建富客户端应用。EXT JS 4 版本在日期控件方面提供了丰富的功能,使得开发者可以方便地处理日期和时间输入。在这个特定的资源中,我们关注的是一个集成时间选择的...

    Practical Ext JS 4

    本书从基础的JavaScript知识点开始,逐步过渡到Ext JS 4的面向对象编程概念,重点介绍了Ext JS的UI组件、布局以及核心功能,包括MVC架构、应用程序的主题与样式设计、以及如何通过网格、树形控件和图表等组件展示...

    Ext JS 4 First Look

    Ext JS是一款强大的JavaScript库,用于构建企业级的Web应用程序。其丰富的组件集、灵活的数据管理功能以及对各种浏览器的支持,使其成为前端开发者的首选工具之一。Ext JS 4作为该系列的最新版本,在性能、可扩展性...

    springMVC整合ext4js

    Spring MVC作为Java后端的主要MVC框架,提供了强大的控制层支持,而Ext4JS则是一个流行的JavaScript库,用于构建富客户端应用。通过整合这两者,我们可以构建出具有高效数据管理和用户友好的界面的Web应用。 首先,...

    Learning Ext JS 4 pdf

    Learning Ext JS 4 by Crysfel Villa and Armando Gonzalez (Oct 8, 2012) $49.99 Paperback Order in the next 13 hours and get it by Tuesday, Mar 19. More Buying Choices - Paperback $46.48 new (17 ...

    Ext JS学习资料

    Ext JS 是一款基于 JavaScript 的前端框架,主要用于构建复杂的企业级 Web 应用程序。它提供了一套丰富的 UI 组件库以及一系列用于数据处理、应用架构设计等功能模块。自发布以来,Ext JS 不断迭代更新,版本4(Ext ...

    ExtJS桌面化(desktop)插件Demo项目

    ExtJS是一款强大的JavaScript框架,专用于构建富客户端Web应用程序。在本项目中,"ExtJS桌面化(desktop)插件Demo项目"展示了如何利用ExtJS的桌面化功能创建一个类似于传统桌面应用的用户界面。这个Demo项目的核心...

    ext desktop

    Sencha Ext JS是一个强大的JavaScript框架,用于构建复杂的、数据驱动的Web应用程序。它提供了大量的UI组件,如表格、网格、图表等,支持响应式布局,能够在各种设备上运行。开发者可以利用它的MVC(模型-视图-控制...

    [Ext JS] Ext JS 实战 第2版 英文版

    ll learn the best practices for building and scaling full featured web applications including how to customize and build Ext widgets Fully revised for Ext JS 4 0 ☆ 出版信息:☆ [作者信息] Jesus ...

    ext js javascript ext设计软件

    EXT JS是一种基于JavaScript的开源富客户端框架,专为构建企业级Web应用程序而设计。它提供了一套完整的组件化UI控件、数据绑定机制以及强大的事件处理系统,使得开发者能够创建功能丰富的、交互性强的Web应用。EXT ...

    ext js 打包资源下载

    4. **事件驱动**:Ext JS拥有丰富的事件系统,可以监听并响应用户的操作,实现动态交互。 5. **AJAX支持**:内置了对AJAX的全面支持,方便进行异步数据请求和页面更新。 6. **易用性**:提供了一些工具,如Builder...

    Ext JS - JavaScript Library

    Ext JS 是一个强大的JavaScript库,专门用于构建富客户端Web应用程序。这个库以其丰富的用户界面组件、数据绑定功能和可扩展性而闻名。Ext JS 提供了一整套预先封装的组件,如表格、面板、菜单、按钮、表单、树形...

    EXT JS 4自学手册

    EXTjs4自学手册.docx,适用用新手学习EXT JS 4

    JavaScript凌厉开发——Ext JS3详解与实践

    《JavaScript凌厉开发——Ext JS3详解与实践》是一本深度探讨JavaScript库Ext JS3的专著,旨在帮助开发者深入理解和高效运用这一强大的前端框架。本文将围绕标题、描述及标签,详细介绍Ext JS3的核心概念、关键特性...

    Ext JS高级程序设计

    这本书分为三章,涵盖了Ext JS的关键概念和技术,旨在帮助开发者充分利用这个强大的JavaScript库来构建功能丰富的Web应用程序。 第一章可能涉及了Ext JS的基础和核心概念,包括MVC(Model-View-Controller)架构的...

    Ext js 资源大全

    Ext JS 是一种基于 JavaScript 的富客户端应用框架,用于构建功能丰富的、交互性强的Web应用程序。这个资源大全包含了一些关键的学习资料,将有助于深入理解和掌握Ext JS的精髓。 首先,我们来看"EXT学习文档 .doc...

Global site tag (gtag.js) - Google Analytics