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实现 获取鼠标点击位置坐标的方法
Apr 12 Javascript
基于Jquery实现键盘按键监听
May 11 Javascript
浅谈JS继承_寄生式继承 &amp; 寄生组合式继承
Aug 16 Javascript
js捕捉键盘事件和按键键值的方法
Oct 10 Javascript
js的OOP继承实现(必看篇)
Feb 18 Javascript
基于Bootstrap框架实现图片切换
Mar 10 Javascript
基于Vue.js实现tab滑块效果
Jul 23 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
Jan 20 Javascript
JS限制输入框输入的实现代码
Jul 02 Javascript
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
微信小程序实现菜单左右联动
May 19 Javascript
vue中的循环对象属性和属性值用法
Sep 04 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
探讨:php中在foreach中使用foreach ($arr as &amp;$value) 这种类型的解释
2013/06/24 PHP
php汉字转拼音的示例
2014/02/27 PHP
php用户注册时常用的检验函数实例总结
2014/12/22 PHP
php使用高斯算法实现图片的模糊处理功能示例
2016/11/11 PHP
thinkphp5框架调用其它控制器方法 实现自定义跳转界面功能示例
2019/07/03 PHP
JavaScript 监听textarea中按键事件
2009/10/08 Javascript
js插件方式打开pdf文件(浏览器pdf插件分享)
2013/12/20 Javascript
原生js实现fadein 和 fadeout淡入淡出效果
2014/06/05 Javascript
浅析Node在构建超媒体API中的作用
2014/07/30 Javascript
Node.js事件循环(Event Loop)和线程池详解
2015/01/28 Javascript
如何用JavaScript实现动态修改CSS样式表
2016/05/20 Javascript
JavaScript“尽快失败”的原则实例详解
2016/10/08 Javascript
原生js实现中奖信息无间隙滚动效果
2017/01/18 Javascript
NodeJS处理Express中异步错误
2017/03/26 NodeJs
Vue实现百度下拉提示搜索功能
2017/06/21 Javascript
使用命令行工具npm新创建一个vue项目的方法
2017/12/27 Javascript
Vue.set() this.$set()引发的视图更新思考及注意事项
2018/08/30 Javascript
微信小程序适配iphoneX的实现方法
2018/09/18 Javascript
详解从0开始搭建微信小程序(前后端)的全过程
2019/04/15 Javascript
IE11下处理Promise及Vue的单项数据流问题
2019/07/24 Javascript
Vue中跨域及打包部署到nginx跨域设置方法
2019/08/26 Javascript
[02:24]DOTA2亚洲邀请赛 NAVI战队出场宣传片
2015/02/07 DOTA
Python socket模块实现的udp通信功能示例
2019/04/10 Python
pip install python 快速安装模块的教程图解
2019/10/08 Python
使用Python打造一款间谍程序的流程分析
2020/02/21 Python
html5唤起app的方法
2017/11/30 HTML / CSS
设计师珠宝:Ylang 23
2018/05/11 全球购物
请写出char *p与"零值"比较的if语句
2014/09/24 面试题
逃课打麻将检讨书
2014/10/05 职场文书
英语教师个人总结
2015/02/09 职场文书
证券公司客户经理岗位职责
2015/04/09 职场文书
植树节新闻稿
2015/07/17 职场文书
2016参观监狱警示教育活动心得体会
2016/01/15 职场文书
使用numpy nonzero 找出非0元素
2021/05/14 Python
Apache SeaTunnel实现 非CDC数据抽取
2022/05/20 Servers