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

打开js文件夹下的desktop.js文件，在里面拓展一个函数，也就是添加一个函数：

[javascript]
view plaincopyprint?

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添加一个监听器，添加后的代码如下：

[javascript]
view plaincopyprint?

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渲染结束时调用函数，修改后的代码如下：

[javascript]
view plaincopyprint?

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

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