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