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文件中修改的