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

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

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

 

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

 

1 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             })

 

1 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     }

改为

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

 

再将桌面的创建由

 

1 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     },

 

最后上图:

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

转载于:https://www.cnblogs.com/gsyst/archive/2012/05/22/2512738.html