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