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

 

最后上图:

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