ExtJS[Desktop]實作圖示換行範例程式碼_extjs

在 ExtJS中的desktop的demo中，預設的圖示排列是不換行的，這就造成如果桌面上的圖示過多的話，當超出桌面區域，會造成圖示遮蓋，即超出桌面區域的部分會被任務欄遮擋，以下程式碼就是為了解決這個問題的。

首先，在desktop.js中擴充一個函數。

複製程式碼 程式碼如下:

initShortcut : function(>

initShortcut: function(punction(a) { 64;
var btnWidth = 64;
var btnPadding = 30;
var col = {index : 1,x : btnPadding};
var row = {index : 1,y : 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 numberOfItems = 1;
bottom = row.y btnHeight;
if (((bodyHeight (btnHeight btnPadding)) { 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 () { varateDataView: function () { varateData 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. this;
me.callParent();
me.el.on('contextmenu', me.onDesktopMenu, me);
Ext.Function.defer(me.initShortcut,1);
Ext.Function.defer(me.initShortcut,1);
}