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

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

[javascript] view plain copy print ?

1. initShortcut : function() {    
2.     var btnHeight = 64;    
3.     var btnWidth = 64;    
4.     var btnPadding = 30;    
5.     var col = {index : 1,x : btnPadding};    
6.     var row = {index : 1,y : btnPadding};    
7.     var bottom;    
8.     var numberOfItems = 0;    
9.     var taskBarHeight = Ext.query(".ux-taskbar")[0].clientHeight + 40;    
10.     var bodyHeight = Ext.getBody().getHeight() - taskBarHeight;    
11.     var items = Ext.query(".ux-desktop-shortcut");    
12.   
13.     for (var i = 0, len = items.length; i < len; i++) {    
14.         numberOfItems += 1;    
15.         bottom = row.y + btnHeight;    
16.         if (((bodyHeight < bottom) ? true : false) && bottom > (btnHeight + btnPadding)) {    
17.             numberOfItems = 0;    
18.             col = {index : col.index++,x : col.x + btnWidth + btnPadding};    
19.             row = {index : 1,y : btnPadding};    
20.         }    
21.         Ext.fly(items[i]).setXY([col.x, row.y]);    
22.         row.index++;    
23.         row.y = row.y + btnHeight + btnPadding;    
24.     }    
25. },  

接着在createDataView添加一个监听器，添加后的代码如下：

[javascript] view plain copy print ?

1. createDataView: function () {  
2.         var me = this;  
3.         return {  
4.             xtype: 'dataview',  
5.             overItemCls: 'x-view-over',  
6.             trackOver: true,  
7.             itemSelector: me.shortcutItemSelector,  
8.             store: me.shortcuts,  
9. //            style: {  
10. //                position: 'absolute'  
11. //            },  
12. //            x: 0, y: 0,  
13.             // 实现桌面图标自动换行  
14.             listeners:{    
15.                 resize:me.initShortcut    
16.             },  
17.             tpl: new Ext.XTemplate(me.shortcutTpl)  
18.         };  
19.     },  

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

[javascript] view plain copy print ?

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

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