Dynamic binding of Desktop shortcuts and start Menus under ext4.1

I used ext2.0 all the time. Recently I had a project to create a web desktop, so I got a 4.1 project and wanted to experience new functions ~

4.1 Compared with 2.0, there are still many changes, and 2.0 of desktop has been implemented before ~ Therefore, there are some concepts about ext desktop ~ Through one afternoon's effort! Achieve the desired effect ~

 

Desktop shortcuts are easy to implement. You only need to modify the shortcuts of APP. js.

 

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 Windows', iconcls: 'accordion-route cut ', module: 'Acc-win '},
6 {Name: 'notepad ', iconcls: 'notepad-Shortcut', module: 'notepad '},
7 {Name: 'System status', iconcls: 'cpu-periodcut ', 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 })

You can use gg For Desktop shortcuts without line breaks by default. Some people have provided a solution ~

 

The implementation of the Start menu is quite costly! First

 

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 }

Change

1 Getmodules: Function (){
2 Return [Marr];
3 }

 

Then, create a desktop

 

1 Ext. onready ( Function (){
2 Mydesktopapp = New Mydesktop. app ();
3 });

Change

 

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 ();

It should be because my menu is directly connected to other pages, so change the original createwindow to gotourl.

At the same time, add the gotourl method to Ext. UX. desktop. app and help set it to the event.

 

1 Getstartconfig: Function (){
2 VaR B = This ,
3 A = {
4 APP: B,
5 Menu: []
6 },
7 C;
8 Ext. Apply (A, B. startconfig );
9 // Set the Start Menu
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 (){ // Open the connection directly
21 VaR B = A. gotourl ();
22 },

 

Finally:

I always think this implementation method is not very good, so it will achieve the effect temporarily! If you have time to optimize it, you can discuss any good methods!