ExtJS[Desktop]实现图标换行示例代码

177 阅读 0 评论 117 点赞

我是靠谱客的博主活力彩虹，最近开发中收集的这篇文章主要介绍ExtJS[Desktop]实现图标换行示例代码，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

ExtJS中的desktop的demo中，默认的图标排列是不换行的，这就造成了如果桌面上的图标过多的话，当超出桌面区域，会造成图标遮盖，即超出桌面区域的部分会被任务栏遮挡，以下代码就是为了解决这一问题的。

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

然后在当前的js文件中的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); 
} 