在自带的extjs4.2 desktop例子基础上,修改 desktop.js 文件 添加如下代码:
//shortcuts 自动换行 initShortcut: function () { var btnHeight = 64; var btnWidth = 64; var btnPadding = 30; 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"); var col = { index: 1, x: btnPadding }; var row = { index: 1, y: btnPadding }; 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; }; }, //end shortcuts 自动换行
然后,在函数afterRender 里加入执行这段代码的行 Ext.Function.defer(me.initShortcut, 600);
afterRender: function () { var me = this; me.callParent(); me.el.on('contextmenu', me.onDesktopMenu, me); Ext.Function.defer(me.initShortcut, 600); // 执行换行代码 },
增加这两处代码后,即实现了桌面图标换行.
--------------------------------------------------------------------
源码下载: http://download.csdn.net/detail/olinbsoft/8326735