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