Ext4.1下desktop桌面快捷方式和開始菜單的動態綁定

本文轉載自查看原文 2012-05-22 09:20 6773 ext/ 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     },

最后上圖:

總覺得這樣的實現方式不是很好,暫時實現效果!有空了再來優化下,各位有什么好的方法也可以討論下!

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Qt之創建桌面和開始菜單快捷方式 Ext4.1 tree grid的右鍵菜單 Linux桌面快捷方式desktop ubuntu 18.04 下 typora離線安裝，創建快捷方式以及添加圖標到開始菜單(DashBoard) 使用C#在開始菜單添加快捷方式實現開機自啟動 win10 中添加快捷方式到開始菜單系統重裝/裝Anaconda后，Windows開始菜單缺少快捷方式解決方案 Wix學習整理（7）——在開始菜單中為HelloWorld添加卸載快捷方式 Ext js中CheckBoxGroup的動態綁定 Ext4.1 grid 多選（可無checkbox）