您的位置：首页 > Web前端 > JavaScript

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

2014-08-04 09:50 543 查看

本教程基于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',

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航