ExtJS[Desktop] implementation icon newline sample code

  • 2020-03-29 23:49:18
  • OfStack

In the desktop demo in ExtJS, the default arrangement of ICONS is not newline, which causes that if there are too many ICONS on the desktop, the ICONS will be covered when they are beyond the desktop area, that is, the part beyond the desktop area will be blocked by the task bar. The following code is to solve this problem.

First, extend a function in 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; 
} 
} 

Then add a listener to the createDataView method in the current js file.
 
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 
} 
}; 
} 

Again, the function is called at the end of afterRender.
 
afterRender: function () { 
var me = this; 
me.callParent(); 
me.el.on('contextmenu', me.onDesktopMenu, me); 
Ext.Function.defer(me.initShortcut,1); 
} 

Related articles: