extjs桌面 java_ExtJS[Desktop]实现图标换行示例代码

ExtJS中的desktop的demo中，默认的图标排列是不换行的，这就造成了如果桌面上的图标过多的话，当超出桌面区域，会造成图标遮盖，即超出桌面区域的部分会被任务栏遮挡，以下代码就是为了解决这一问题的。

首先，在desktop.js中扩展一个函数。

initShortcut : function() {

var btnHeight = 64;

var btnWidth = 64;

var btnPadding = 30;

var col = {index : 1,x : btnPadding};

var row = {index : 1,y : btnPadding};

var bottom;

var numberOfItems = 0;

var taskBarHeight = Ext.query(".ux-taskbar")[0].clientHeight + 40;

var bodyHeight = Ext.getBody().getHeight() - taskBarHeight;

var items = Ext.query(".ux-desktop-shortcut");

for (var i = 0, len = items.length; i < len; i++) {

numberOfItems += 1;

bottom = row.y + btnHeight;

if (((bodyHeight < bottom) ? true : false) && bottom > (btnHeight + btnPadding)) {

numberOfItems = 0;

col = {index : col.index++,x : col.x + btnWidth + btnPadding};

row = {index : 1,y : btnPadding};

}

Ext.fly(items[i]).setXY([col.x, row.y]);

row.index++;

row.y = row.y + btnHeight + btnPadding;

}

}

然后在当前的js文件中的createDataView方法中，添加一个监听器。

createDataView: function () {

var me = this;

return {

xtype: 'dataview',

overItemCls: 'x-view-over',

trackOver: true,

itemSelector: me.shortcutItemSelector,

store: me.shortcuts,

tpl: new Ext.XTemplate(me.shortcutTpl),

listeners:{

resize:me.initShortcut

}

};

}

再者，在afterRender渲染结束时调用函数。

afterRender: function () {

var me = this;

me.callParent();

me.el.on('contextmenu', me.onDesktopMenu, me);

Ext.Function.defer(me.initShortcut,1);

}