extjs桌面 java_用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

});

},