ExtJS[Desktop]实现图标换行示例代码

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了ExtJS[Desktop]实现图标换行示例代码，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1530字，纯文字阅读大概需要3分钟。

内容图文

ExtJS中的desktop的demo中，默认的图标排列是不换行的，这就造成了如果桌面上的图标过多的话，当超出桌面区域，会造成图标遮盖，即超出桌面区域的部分会被任务栏遮挡，以下代码就是为了解决这一问题的。

首先，在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; 
} 
} 
 
然后在当前的js文件中的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); 
} 

            
            


           
                
                                                

内容总结

以上是互联网集市为您收集整理的ExtJS[Desktop]实现图标换行示例代码全部内容，希望文章能够帮你解决ExtJS[Desktop]实现图标换行示例代码所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---