用ExtJS 4.0打造自己的Web桌面

本教程基于ExtJS 4.0版本，从静态桌面图标换行讲起，到实现自己的动态WEB桌面，可以像webQQ那样添加应用，打开应用。本教程不包括详细js代码和服务器代码，但基本思路及主要代码给出。ExtJS中运用HTML5 Canvas简单例子 http://www.linuxidc.com/Linux/2012-04/59389.htm1. 桌面图标自动换行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

}）;

},更多详情见请继续阅读下一页的精彩内容： http://www.linuxidc.com/Linux/2014-08/105208p2.htm