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

用extjs 4.0打造自己的WEB桌面

 

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

 

1.       桌面图标自动换行

 

1.1. 增加一个换行的方法

这是参考网上换行例子。建议加在desktop.js中，因为是属于desktop的行为。

initShortcut : function() {        var btnHeight = 80;        var btnWidth = 80;        var btnPadding = 8;        var col = null;        var row = null;        var bottom;        var bodyHeight = Ext.getBody().getHeight();               function initColRow() {            col = {               index : 1,               x : btnPadding            };            row = {               index : 1,               y : btnPadding + 27            };        }          this.setXY = function(item) {            bottom = row.y + btnHeight;            if (bottom > bodyHeight && bottom > (btnHeight + btnPadding)) {               col = {                   index : col.index++,                   x : col.x + btnWidth + btnPadding               };               row = {                   index : 1,                   y : btnPadding + 27               };            }            Ext.fly(item).setXY([col.x, row.y]);            row.y = row.y + btnHeight + btnPadding + 4;        }

 

 

1.2. 在适当的地方调用

第一个地方是初始化时。

如Apps.js中的init：

init: function() {         this.callParent();         this.desktop.initShortcut();     }

 

第二个地方是resize时。如在desktop.js中的dataView中注册一事件：

createDataView: function () {         var a = this;         return {             xtype: "dataview",             overItemCls: "x-view-over",             trackOver: true,             itemSelector: a.shortcutItemSelector,             store: a.shortcuts,             tpl: new Ext.XTemplate(a.shortcutTpl),             listeners:{               resize:this.initShortcut //这里调用             }         }     }

 

第三个地方是删除图标或者增加图标时。

如删除：

desktop.shortcutsView.getStore().remove(desktop.handerObj); desktop.initShortcut();   // handerObj是桌面图标对象，在点击图标事件时可以获得

 

还有其它……

 

1.3. 测试

在App.js中的getDesktopConfig中，通过复制增加图标，这样才能看到效果：

getDesktopConfig: function () {         var me = this, ret = me.callParent();           return Ext.apply(ret, {             //cls: 'ux-desktop-black',               contextMenuItems: [                 { text: 'Change Settings', handler: me.onSettings, scope: me }             ],               shortcuts: Ext.create('Ext.data.Store', {                 model: 'Ext.ux.desktop.ShortcutModel',                 data: [                     { name: 'Grid Window', iconCls: 'grid-shortcut', module: 'grid-win' },                     { name: 'Accordion Window', iconCls: 'accordion-shortcut', module: 'acc-win' },                     { name: 'Notepad', iconCls: 'notepad-shortcut', module: 'notepad' },                                        { name: 'Notepad', iconCls: 'notepad-shortcut', module: 'notepad' },                                        { name: 'Notepad', iconCls: 'notepad-shortcut', module: 'notepad' },                                        { name: 'Notepad', iconCls: 'notepad-shortcut', module: 'notepad' },                                        { name: 'Notepad', iconCls: 'notepad-shortcut', module: 'notepad' },                                        { name: 'Notepad', iconCls: 'notepad-shortcut', module: 'notepad' },                                        { name: 'Notepad', iconCls: 'notepad-shortcut', module: 'notepad' },                     { name: 'System Status', iconCls: 'cpu-shortcut', module: 'systemstatus'}                 ]             }),               wallpaper: 'wallpapers/Blue-Sencha.jpg',             wallpaperStretch: false         });     },