完美解决Extjs 4 desktop图标换行问题

最近看到不少人询问关于在4.0中实现desktop图标换行的问题，现在把我修改的实现方法分享出来，帮助大家完善desktop。此方法能随浏览器的大小自动排列图标

在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;

}

}

在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);

}

自己测试过 绝对ok