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


Posted in Javascript onNovember 17, 2013

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); 
}
Javascript 相关文章推荐
JavaScript 给汉字排序实例代码
Jun 28 Javascript
JavaScript Cookie的读取和写入函数
Dec 08 Javascript
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
Aug 05 Javascript
JqueryMobile动态生成listView并实现刷新的两种方法
Mar 05 Javascript
页面装载js及性能分析方法介绍
Mar 21 Javascript
js实现在同一窗口浏览图片
Sep 17 Javascript
JQuery使用$.ajax和checkbox实现下次不在通知功能
Apr 16 Javascript
jQuery结合CSS制作漂亮的select下拉菜单
May 03 Javascript
react学习笔记之state以及setState的使用
Dec 07 Javascript
在layui下对元素进行事件绑定的实例
Sep 06 Javascript
Vue 打包体积优化方案小结
May 20 Javascript
仿照Element-ui实现一个简易的$message方法
Sep 14 Javascript
javascript:void(0)是什么意思示例介绍
Nov 17 #Javascript
巧用js提交表单轻松解决一个页面有多个提交按钮
Nov 17 #Javascript
setInterval()和setTimeout()的用法和区别示例介绍
Nov 17 #Javascript
js用正则表达式来验证表单(比较齐全的资源)
Nov 17 #Javascript
jquery在项目中做复选框时遇到的一些问题笔记
Nov 17 #Javascript
jQuery学习之prop和attr的区别示例介绍
Nov 15 #Javascript
JQuery Highcharts 动态生成图表的方法
Nov 15 #Javascript
You might like
【动漫杂谈】关于《请在T台上微笑》
2020/03/03 日漫
PHP设计模式之命令模式示例详解
2020/12/20 PHP
JS加ASP二级域名转向的代码
2007/05/17 Javascript
js Array操作的最简短最容易理解方法
2013/12/09 Javascript
jquery下拉select控件操作方法分享(jquery操作select)
2014/03/25 Javascript
node.js中使用socket.io制作命名空间
2014/12/15 Javascript
js读取csv文件并使用json显示出来
2015/01/09 Javascript
jQuery的one()方法用法实例
2015/01/19 Javascript
jQuery Ajax中的事件详细介绍
2015/04/16 Javascript
js实现简单的计算器功能
2017/01/16 Javascript
nodejs个人博客开发第七步 后台登陆
2017/04/12 NodeJs
webpack打包后直接访问页面图片路径错误的解决方法
2017/06/17 Javascript
shiro授权的实现原理
2017/09/21 Javascript
JS实现利用两个队列表示一个栈的方法
2017/12/13 Javascript
angular实现页面打印局部功能的思考与方法
2018/04/13 Javascript
Vue 实现显示/隐藏层的思路(加全局点击事件)
2019/12/31 Javascript
[01:45]DOTA2众星出演!DSPL刀塔次级职业联赛宣传片
2014/11/21 DOTA
跟老齐学Python之集成开发环境(IDE)
2014/09/12 Python
python使用正则表达式的search()函数实现指定位置搜索功能
2017/11/10 Python
基于python实现名片管理系统
2018/11/30 Python
python 比较2张图片的相似度的方法示例
2019/12/18 Python
HTML5对比HTML4的主要改变和改进总结
2016/05/27 HTML / CSS
魅力惠奢品线上平台:MEI.COM
2016/11/29 全球购物
手工制作的豪华英式沙发和沙发床:Willow & Hall
2019/05/03 全球购物
高中毕业的自我鉴定
2013/12/09 职场文书
英文留学推荐信范文
2014/01/25 职场文书
《威尼斯的小艇》教学反思
2014/02/17 职场文书
征婚广告词
2014/03/17 职场文书
文体活动总结范文
2014/05/05 职场文书
影视广告专业求职信
2014/09/02 职场文书
实习生工作证明范本
2014/09/14 职场文书
2016年六一文艺汇演开幕词
2016/03/04 职场文书
Python开发工具Pycharm的安装以及使用步骤总结
2021/06/24 Python
POST提交数据常见的四种方式
2022/01/18 HTML / CSS
2021年国漫热度排行前十,完美世界上榜,第四是美国动画作品
2022/03/18 国漫
Python可变与不可变数据和深拷贝与浅拷贝
2022/04/06 Python