Extjs[desktop] Implement icon wrapping sample code _extjs

In the demo of desktop in ExtJS, the default icon arrangement is not wrapped, which causes if the desktop icon too much, when the desktop area, will cause the icon to cover, that is, beyond the desktop area will be blocked by the taskbar, the following code is to solve this problem.

First, extend a function in Desktop.js.

Copy Code code as follows:

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

Then in the current JS file in the Createdataview method, add a listener.

Copy Code code as follows:

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

Furthermore, the function is called at the end of the AfterRender render.

Copy Code code as follows:

Afterrender:function () {
var me = this;
Me.callparent ();
Me.el.on (' ContextMenu ', Me.ondesktopmenu, ME);
Ext.Function.defer (me.initshortcut,1);
}