快捷導(dǎo)航

ExtJS[Desktop]實(shí)現(xiàn)圖標(biāo)換行示例代碼

更新時(shí)間：2013年11月17日 16:53:47 作者：

ExtJS中的desktop的demo中，默認(rèn)的圖標(biāo)排列是不換行的，以下代碼就是為了解決這一問(wèn)題的，需要的朋友可以了解下

ExtJS中的desktop的demo中，默認(rèn)的圖標(biāo)排列是不換行的，這就造成了如果桌面上的圖標(biāo)過(guò)多的話，當(dāng)超出桌面區(qū)域，會(huì)造成圖標(biāo)遮蓋，即超出桌面區(qū)域的部分會(huì)被任務(wù)欄遮擋，以下代碼就是為了解決這一問(wèn)題的。

首先，在desktop.js中擴(kuò)展一個(gè)函數(shù)。

復(fù)制代碼代碼如下:

 
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; 
} 
} 

然后在當(dāng)前的js文件中的createDataView方法中，添加一個(gè)監(jiān)聽(tīng)器。

復(fù)制代碼代碼如下:

 
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渲染結(jié)束時(shí)調(diào)用函數(shù)。

復(fù)制代碼代碼如下:

 
afterRender: function () { 
var me = this; 
me.callParent(); 
me.el.on('contextmenu', me.onDesktopMenu, me); 
Ext.Function.defer(me.initShortcut,1); 
} 

您可能感興趣的文章: