Ext4 desktop 桌面图标换行实现

今天在网上找了好多换行的方法挨个试了一遍，只要这个我觉得最实用，先看下换行后的效果：



很不错吧，下来说说怎么实现的

首先在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,
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);
},



OK 赶紧试试吧

。。。。。全部是在desktop.js
文件中修改的