用extjs 4.0打造自己的WEB桌面之二

本教程基于extjs 4.0版本，从静态桌面图标换行讲起，到实现自己的动态WEB桌面，可以像webQQ那样添加应用， 打开应用。本教程不包括详细js代码和服务器代码，但基本思路及主要代码给出。

2 桌面加载动态图标

下面讲解如何实现自己的动态桌面。可以像webQQ那样添加应用，打开应用。

initShortcut方法还是一样，见1.1步骤。

 

2.1 修改ShortcutModel.js,添加更多的一些字段，如：

Ext.define("Ext.ux.desktop.ShortcutModel", {     extend: "Ext.data.Model",     fields: [{         name: "desktop_id"  //桌面ID     }, {         name: "app_id"      //应用ID     }, {         name: "app_name"     },{         name: "icon_name"     }, {         name: "win_title"   //打开的窗口名称     },{         name: "win_width"   //打开的窗口宽     },{         name: "win_height"     }, {         name: "win_iframe"  //如：http://www.baidu.com     }, {         name: "crl_flag"    //一些控制参数     }, {         name: "tips"     }] });

 

2.2 在App.js中，修改桌面图标初始化（在getDesktopConfig方法中）,从服务器中获得参数，将填充到shortcuts 的模型ShortcutModel：

shortcuts: Ext.create("Ext.data.Store", {               model: "Ext.ux.desktop.ShortcutModel",                          autoLoad: false,                          proxy: {                             type: 'ajax',                             url : 'desktop.php',                             reader: {                                 type: 'json',                                 root: ''                              }                          }             })

 

注意，此时只是获得数据，并没有在桌面绘制图标，因为autoLoad: false，如果要自动load，那图标不会排序的。

 

2.3 同样在Apps.js中的init方法中，通过回调进行图标加载：

this.desktop.shortcuts.load({         callback :function(r,options,success){               a.desktop.initShortcut();            }         });

    为什么要通过回调才加载，后来想想才理解。

 

2.4 同样在其它需要排列图标的时候调用initShortcut方法。

 

2.5还有桌面图标模板需要修改（desktop.js的属性shortcutTpl，因为修改了ShortcutModel）：

shortcutTpl: ['<tpl for=".">', '<div class="ux-desktop-shortcut" title="{tips}" id="{app_id}-shortcut">', '<div class="ux-desktop-shortcut-icon" >', '<img src="../resource/images/app_icons/{icon_name}"  height="48px" width="48px">', "</div>", '<span class="ux-desktop-shortcut-text">{app_name}</span>', "</div>", "</tpl>", '<div class="x-clear"></div>'],

 

 

2.6 点击桌面图标时会触发desktop.js的onShortcutItemClick方法，在onShortcutItemClick方法中我们打开一个应用（win_iframe指定）：

onShortcutItemClick: function (e, a) {         var c = this,b,d;                d = createMyWindow(a.data) ;        if (d) {             c.restoreWindow(d)        } },   createMyWindow: function (win_data) {        var c = this;         var b = this.app.getDesktop();         var a = b.getWindow(win_data.app_id);         if (!a) {           var appbar=new Ext.ux.desktop.AppBar(b);             a = b.createWindow({               id: win_data.app_id,               title: win_data.win_title,               width: parseInt(win_data.win_width),               appid:win_data.app_id,               height: parseInt(win_data.win_height)+25,               animCollapse: false,               border: false,               bodyStyle: {background:'#ffffff'},               iconCls:'notepad',               hideMode: "offsets",               layout: "auto",               html: '<iframe style="position:relative;background-color:transparent;" allowtransparency="true" width="100%" height="100%"  frameborder="0" src=' + win_data.win_iframe + '>'             })         }         a.show();         return a     }