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 相关文章推荐
无缝滚动改进版支持上下左右滚动(封装成函数)
Dec 04 Javascript
jquery实现背景墙聚光灯效果示例分享
Mar 02 Javascript
javascript实现点击单选按钮链接转向对应网址的方法
Aug 12 Javascript
微信小程序 石头剪刀布实例代码
Jan 04 Javascript
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
Jan 05 Javascript
基于JavaScript实现百度搜索框效果
Jun 28 Javascript
改变vue请求过来的数据中的某一项值的方法(详解)
Mar 08 Javascript
React之PureComponent的使用作用
Jul 10 Javascript
在element-ui的el-tree组件中用render函数生成el-button的实例代码
Nov 05 Javascript
详解在网页上通过JS实现文本的语音朗读
Mar 28 Javascript
JS FormData对象使用方法实例详解
Feb 12 Javascript
小程序中使用css var变量(使js可以动态设置css样式属性)
Mar 31 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
DISCUZ 分页代码
2007/01/02 PHP
PHP中shuffle数组值随便排序函数用法
2014/11/21 PHP
获取HTML DOM节点元素的方法的总结
2009/08/21 Javascript
javascript event在FF和IE的兼容传参心得(绝对好用)
2014/07/10 Javascript
JS是按值传递还是按引用传递
2015/01/30 Javascript
原创jQuery弹出层插件分享
2015/04/02 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
2016/01/12 Javascript
Bootstrap安装环境配置教程分享
2016/05/27 Javascript
JavaScript禁止用户多次提交的两种方法
2016/07/24 Javascript
AngularJS实现在ng-Options加上index的解决方法
2016/11/03 Javascript
微信小程序学习(4)-系统配置app.json详解
2017/01/12 Javascript
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
2018/08/29 Javascript
layui实现把数据表格时间戳转换为时间格式的例子
2019/09/12 Javascript
Vue中axios拦截器如何单独配置token
2019/12/27 Javascript
JavaScript实现省份城市的三级联动
2020/02/11 Javascript
element-ui和vue表单(对话框)验证提示语(残留)清除操作
2020/09/11 Javascript
vue打开新窗口并实现传参的图文实例
2021/03/04 Vue.js
[01:01:35]Optic vs paiN 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
使用Python的Supervisor进行进程监控以及自动启动
2014/05/29 Python
python实现图书馆研习室自动预约功能
2018/04/27 Python
python可视化爬虫界面之天气查询
2019/07/03 Python
pytorch 实现在预训练模型的 input上增减通道
2020/01/06 Python
Tensorflow进行多维矩阵的拆分与拼接实例
2020/02/07 Python
python日期与时间戳的各种转换示例
2020/02/12 Python
使用keras实现BiLSTM+CNN+CRF文字标记NER
2020/06/29 Python
使用Python文件读写,自定义分隔符(custom delimiter)
2020/07/05 Python
使用CSS3编写灰阶滤镜来制作黑白照片效果的方法
2016/05/09 HTML / CSS
菲律宾优惠券网站:MetroDeal
2019/04/12 全球购物
行政经理的岗位职责
2013/11/23 职场文书
学生打架检讨书1000字
2014/01/16 职场文书
新闻编辑自荐书范文
2014/02/12 职场文书
2014学习全国两会精神心得体会2000字
2014/03/11 职场文书
副总经理岗位职责
2014/03/16 职场文书
2014最新毕业证代领委托书
2014/09/26 职场文书
导游词之西江千户苗寨
2019/12/24 职场文书
Redis+Lua脚本实现计数器接口防刷功能(升级版)
2022/02/12 Redis