Ext4.1下desktop桌面快捷方式和开始菜单的动态绑定

以前一直用ext2.0,最近刚好有个项目要做个web桌面,于是就下了个4.1,想体验下新的功能~

4.1相比2.0,变化还是不少,2.0的desktop以前也实现过~所以对ext的desktop的还是有一定的概念~通过一个下午的努力!实现想要的效果~

 

桌面快捷方式实现比较简单,只需将app.js的shortcuts修改

 

 shortcuts: Ext.create('Ext.data.Store', {
2                 model: 'Ext.ux.desktop.ShortcutModel',
3                 data: [
4                     { name: 'Grid Window', iconCls: 'grid-shortcut', module: 'grid-win' },
5                     { name: 'Accordion Window', iconCls: 'accordion-shortcut', module: 'acc-win' },
6                     { name: 'Notepad', iconCls: 'notepad-shortcut', module: 'notepad' },
7                     { name: 'System Status', iconCls: 'cpu-shortcut', module: 'systemstatus'}
8                 ]
9             })

 

 shortcuts: Ext.create("Ext.data.Store", {
2                 model: "Ext.ux.desktop.ShortcutModel",
3                 autoLoad: false,
4                 proxy: {
5                     type: 'ajax',
6                     url: '/MyAppData',
7                     reader: { type: 'json', root: '' }
8                 }
9             })

关于desktop桌面快捷方式默认不换行的方法可以gg,已经有人给出了解决方法~

 

开始菜单的实现还颇费了点周折!首先将app.js的

 

 1 getModules : function(){
 2         return [
 3             new MyDesktop.VideoWindow(),
 4             //new MyDesktop.Blockalanche(),
 5             new MyDesktop.SystemStatus(),
 6             new MyDesktop.GridWindow(),
 7             new MyDesktop.TabWindow(),
 8             new MyDesktop.AccordionWindow(),
 9             new MyDesktop.Notepad(),
10             new MyDesktop.BogusMenuModule(),
11             new MyDesktop.BogusModule()
12         ];
13     }

改为

 getModules : function(){
2         return [mArr];
3     }

 

再将桌面的创建由

 

 Ext.onReady(function () {
2                 myDesktopApp = new MyDesktop.App();
3             });

改为

 

 1 var c = 1;
 2         var mArr = [];
 3         var s = Ext.create("Ext.data.Store", {
 4             model: "Ext.ux.desktop.ShortcutModel",
 5             autoLoad: false,
 6             //idProperty: 'AppID',
 7             proxy: {
 8                 type: 'ajax',
 9                 url: '/MyAppData',
10                 reader: { type: 'json', root: '' }
11             }
12         });
13 
14         s.on('load', function () {
15             s.each(function (r) {
16                 var it = Ext.define("MyDesktop.M" + c, {
17                     extend: "Ext.ux.desktop.Module",
18                     id: r.get("AppName"),
19                     //windowId: "video-window",
20                     tipWidth: 160,
21                     tipHeight: 96,
22                     init: function () {
23                         this.launcher = {
24                             text: r.get("AppName"),
25                             href: r.get("AppUrl"),
26                             target:'_blank',
27                             iconCls: "menu" + c
28                         }
29                     },
30                     gotoUrl: function () {
31                         location.href = r.get("AppUrl")
32                     }
33                 });
34                 c++;
35                 mArr.push(new it());
36             });
37 
38             Ext.onReady(function () {
39                 myDesktopApp = new MyDesktop.App();
40             });
41         });
42         s.load();

应为我的菜单是直接连接到其他页面,所以将原来的createWindow改为gotoUrl.

同时在Ext.ux.desktop.App 添加gotoUrl方法并帮定到事件上

 

 1 getStartConfig: function () {
 2         var b = this,
 3         a = {
 4             app: b,
 5             menu: []
 6         },
 7         c;
 8         Ext.apply(a, b.startConfig);
 9         //设置开始菜单
10         Ext.each(b.modules,
11         function (d) {
12             c = d.launcher;
13             if (c) {
14                 c.handler = c.handler || Ext.bind(b.gotoUrl, b, [d]);
15                 a.menu.push(d.launcher)
16             }
17         });
18         return a
19     },
20     gotoUrl: function (a) { //直接打开连接
21         var b = a.gotoUrl();
22     },

 

最后上图:

总觉得这样的实现方式不是很好,暂时实现效果!有空了再来优化下,各位有什么好的方法也可以讨论下!