ExtJS4.1 desktop桌面图标自动换行

打开js文件夹下的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,
//            style: {
//                position: 'absolute'
//            },
//            x: 0, y: 0,
            // 实现桌面图标自动换行
            listeners:{  
                resize:me.initShortcut  
            },
            tpl: new Ext.XTemplate(me.shortcutTpl)
        };
    },

最后在afterRender渲染结束时调用函数，修改后的代码如下：

    afterRender: function () {
        var me = this;
        me.callParent();
        me.el.on('contextmenu', me.onDesktopMenu, me);
        // 实现桌面图标自动换行
        Ext.Function.defer(me.initShortcut,1);
    },

换行配置结束。配置后的效果如下图。