Extjs desktop类桌面系统的开发

最新推荐文章于 2024-05-16 22:15:31 发布

Fly_Sky520

最新推荐文章于 2024-05-16 22:15:31 发布

阅读量2.8w

点赞数

文章标签： extjs function user module flex licensing

本文链接：https://blog.csdn.net/Fly_Sky520/article/details/7666511

版权

最近看到extjs的类桌面系统，被其界面吸引，然后试着用extjs desktop开发了一个项目。

一》开发目录结构：

resources文件夹是我们自己定义的放资源文件，包括样式，壁纸，图片等。

modules是我项目中对应的各个窗口js模块，也是我们自己需要开发的窗口模块。

extjslib是extjs的库文件；

extjslib中core文件夹内是desktop类桌面需要的模板js类，我们也可以自己开发这种界面，或者直接调用这些类。看名字应该知道这些类的作用

css是放的extjs的默认样式与desktop的样式

ext文件是extjs的函数库跟国际化文件

images是css需要引用的图片资料

下面直接讲开发代码

首先是index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Fly</title>

        <link rel="stylesheet" type="text/css" href="extjslib/css/ext-all.css" />
        <link rel="stylesheet" type="text/css" href="extjslib/css/desktop.css" />

        <script type="text/javascript" src="extjslib/ext/ext-all.js"></script>
        <script type="text/javascript" src="extjslib/ext/ext-lang-zh_CN.js"></script>

        <script type="text/javascript">
            Ext.Loader.setConfig({enabled:true});
            Ext.Loader.setPath({				//命名空间的设置
                'Ext.ux.desktop': 'extjslib/core',
                'Fly.modules': 'modules',
                'FlyDesktop': ''
            });
            Ext.require('FlyDesktop.App');
            Ext.require('Ext.util.Cookies');
            Ext.onReady(function () {
                Ext.create('FlyDesktop.App', {})
            })
        </script>
    </head>


    <body style="background-image: url(resources/wallpapers/Win7.jpg)">
    </body>
</html>

然后是App.js

/*!
 * Ext JS Library 4.0
 * zfeidy@qq.com
 */


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


						//引用我们自己定义的模块
    requires: [
    'Ext.ux.desktop.ShortcutModel',
    'Fly.modules.SystemStatus',
    'Fly.modules.Users',
    'Fly.modules.BaseSetup',
    'Fly.modules.HomeView',
    'Fly.modules.StateCurve',
    'Fly.modules.Settings'
    ],


    init: function() {
        this.callParent();
    },


	//调用模块的方法，这里必须需要
    getModules : function(){
        return [
        new Fly.modules.SystemStatus(),		//因为最开始在index.html中Ext.Loader.setConfig({enabled:true});
						//同时又命令了'Fly.modules': 'modules'的空间，所以这句话其实就是调用modules下的SystemStatus.js。
        new Fly.modules.Users(),		//同上
        new Fly.modules.HomeView(),		//同上
        new Fly.modules.StateCurve(),		//同上
        new Fly.modules.BaseSetup()		//同上
        ];
    },


    getDesktopConfig: function () {
        var me = this, ret = me.callParent();
		
//		如果这里不注释掉的话，我们可以去掉core文件夹中ShortcutModel.js，
//		其实那个文件也只封装了一个model而已，同时上面的requires就不需要引用了    
//        Ext.define('Ext.ux.desktop.ShortcutModel', {
//            extend: 'Ext.data.Model',
//            fields: [{
//                name: 'name'
//            },{
//                name: 'iconCls'
//            },{
//                name: 'module'
//            }]
//        });
        
		
		return Ext.apply(ret, {
            contextMenuItems: [{			//鼠标右键的设置
                text: '壁纸设置', 
                handler: me.onSettings, 		//响应函数
                scope: me
            },{
                text: '样式设置', 
                handler: me.onCssSettings, 		//响应函数
                scope: me
            }],


            shortcuts: Ext.create('Ext.data.Store', {
                model: 'Ext.ux.desktop.ShortcutModel',
                data: [{
                    name: 'xx管理', 
                    iconCls: 'XXCSS',  
                    module: 'users'			//这个参数就是自己所开发的模块的id，这个是必须的
                },{
                    name: 'xx配置', 
                    iconCls: 'XXCSS', 
                    module: 'XXX'
                },{
                    name: 'xx界面', 
                    iconCls: 'XXCSS', 
                    module: 'XXX'
                },{
                    name: 'xx状态', 
                    iconCls: 'XXCSS', 
                    module: 'XXX'
                },{
                    name: 'xx配置', 
                    iconCls: 'XXCSS'
                },{
                    name: 'xx曲线', 
                    iconCls: 'XXXCSS',
                    module: 'XXX'
                }]
            }),


            wallpaper: 'resources/wallpapers/创意.jpg',			//这里是初始化壁纸的路径
            wallpaperStretch: true					//初始化壁纸是否被拉伸
        });
    },


    // config for the start menu
    getStartConfig : function() {					//开始菜单的设置（右边导航栏）
        var me = this, ret = me.callParent();
        return Ext.apply(ret, {
            title: '导航栏',
            iconCls: 'user',
            height: 300,
            toolConfig: {
                width: 100,
                items: [{
                    text:'设置',
                    iconCls:'settings',
                    handler: me.onSettings,
                    scope: me
                },'-',{
                    text:'退出

最低0.47元/天解锁文章

Fly_Sky520

关注

0
点赞
踩
17

收藏

觉得还不错? 一键收藏
33
评论
Extjs desktop类桌面系统的开发

最近看到extjs的类桌面系统，被其界面吸引，然后试着用extjs desktop开发了一个项目。一》开发目录结构：resources文件夹是我们自己定义的放资源文件，包括样式，壁纸，图片等。modules是我项目中对应的各个窗口js模块，也是我们自己需要开发的窗口模块。extjslib是extjs的库文件；extjslib中core文件夹内是desktop类桌面需
复制链接

扫一扫