ExtJS[Desktop] implements icon line wrapping sample code_extjs

In the desktop demo of ExtJS, the default icon arrangement does not wrap. This means that if there are too many icons on the desktop, when they exceed the desktop area, the icons will be covered, that is, the part beyond the desktop area will be blocked by the taskbar. Occlusion, the following code is to solve this problem.

First, extend a function in desktop.js.

Copy code The code is 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 add a listener in the createDataView method in the current js file.

Copy code The code is 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 afterRender rendering.

Copy code The code is as follows:

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