最近看到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:'退出