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 方法，给它加上一个 resize 监听器，这样当桌面区域大小变化时，图标会自动重新排列：

复制代码 代码如下:

createDataView: function () {
var me = this;
return {
xtype: 'data view',
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);
}

这样一来，图标就能根据桌面可用高度自动换行，再也不会被任务栏遮住了。代码中的几个参数（按钮高度、宽度、间距）可以根据实际 UI 设计灵活调整。如果你在项目中遇到类似问题，直接拿这段逻辑去用就好。