最近看到不少人询问关于在4.0中实现desktop图标换行的问题,现在把我修改的实现方法分享出来,帮助大家完善desktop。此方法能随浏览器的大小自动排列图标
在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; } }
但是我在4.0.7中测试 Ext.query(".ux-taskbar")undefined 所以附上另一个initShortcut
initShortcut : function() { var btnHeight = 80; var btnWidth = 80; var btnPadding = 8; var col = null; var row = null; var bottom; var bodyHeight = Ext.getBody().getHeight(); function initColRow() { col = { index : 1, x : btnPadding }; row = { index : 1, y : btnPadding + 27 }; } this.setXY = function(item) { bottom = row.y + btnHeight; if (bottom > bodyHeight && bottom > (btnHeight + btnPadding)) { col = { index : col.index++, x : col.x + btnWidth + btnPadding }; row = { index : 1, y : btnPadding + 27 }; } Ext.fly(item).setXY([col.x, row.y]); row.y = row.y + btnHeight + btnPadding + 4; } this.handleUpdate = function() { initColRow(); var items = Ext.query(".ux-desktop-shortcut"); for (var i = 0, len = items.length; i < len; i++) { this.setXY(items[i]); } }; this.handleUpdate(); }
在createDataView添加一个监听器
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渲染结束时调用函数
afterRender: function () { var me = this; me.callParent(); me.el.on('contextmenu', me.onDesktopMenu, me); Ext.Function.defer(me.initShortcut,1); }