最近看到不少人询问关于在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);
}
分享到:
相关推荐
在深入探讨如何在ExtJS 4.0框架中实现Desktop桌面图标自动换行的功能之前,我们首先需要了解ExtJS框架的基本概念以及Desktop组件的作用。ExtJS是一个基于JavaScript的开源前端框架,它提供了一系列丰富的UI组件,使...
extjs4.0 实现桌面图标换行,具体改动参考 4.0.2a\examples\desktop\App.js 核心方法参考这句 //这里初始化所有图标 this.initShortcut(); 我觉得我说的很清楚了,还不明白的留言,一点js不懂的请闪开,谢谢
### 解决ExtJS桌面图标换行方法 #### 知识点概述 本文档将详细介绍如何在ExtJS框架中实现桌面图标的自动...如果你正在开发类似桌面环境的应用程序,并且遇到了图标布局的问题,不妨尝试一下本文档提供的解决方案。
标题“Ext 4 桌面图标换行”涉及到的是Ext JS 4框架中对桌面快捷方式图标的布局...通过修改`desktop.js`文件中的`initShortcut`函数、监听器以及`afterRender`事件,可以实现Ext JS 4桌面环境下的图标自动换行功能。
总结来说,这个示例代码提供了一个解决ExtJS Desktop模块图标换行问题的方法。通过扩展核心功能并添加适当的事件监听器,我们能够使桌面图标根据屏幕尺寸自适应地排列,从而提高用户体验。这个解决方案的核心在于...
总结来说,ExtJS 4.2 Desktop 拓展是一个集成了多种桌面特性并优化了基础框架的解决方案,它提供了图标换行、窗口拖动、多级开始菜单等功能,使得开发复杂的Web应用变得更加简单和直观。通过下载提供的LinBDesk4.2...
本桌面拓展自ExtJs6.0 DeskTop Demo 主要作如下修改: 1. 修改提示宽度不能自适应问题 ...4. 解决桌面图标拖动后闪屏问题 5. 桌面背景默认拉伸 6. 增加中文支持文件 7. 任务栏背景色 8. 开始菜单多级菜单 9. 登录窗口
"Desktop Icon Toy 4.0" 是一款专为Windows用户设计的桌面图标管理软件,它提供了许多实用且创新的功能,让用户的桌面图标管理变得更加便捷和个性化。这款软件的核心功能是帮助用户固定桌面图标的位置,避免在调整...
Desktop Icon Toy 是一款桌面图标管理工具,你可以用它保存当前桌面图标的位置,激活被其它窗口挡住的图标、当然也可以去除快捷方式上的小箭头。 这个清凉简单的工具,你可以组织和安排所有的桌面图标变成简单的排列...
MacOS 下安装 Genero Desktop Client 及参数配置方法 MacOS 作为一款流行的操作系统,广泛应用于各个领域,而 Genero Desktop ...同时,也提供了常见问题解决方法,以便读者能够更好地使用 Genero Desktop Client。
压缩包内的"Mybase7.x 26标准版完美使用.wmv"很可能是myBase 7.x beta26的标准版使用教程视频,它可能涵盖了软件的基础操作、高级功能以及如何解决常见问题等内容,对于新用户来说,这是一个快速上手的宝贵资源。...
myBase Desktop 6.0.4 完美破解版myBase Desktop 6.0.4 完美破解版
"关于安装QT后桌面无启动图标问题解决方案" 在 Ubuntu 系统中,安装 QT 后,桌面可能不会显示启动图标,这是由于 QT 安装后的默认设置问题。解决这个问题需要找到安装位置并创建启动器。下面将详细介绍解决方案。 ...
ExtJS 4.2 Desktop 是一个基于 ExtJS 4.2 框架构建的桌面应用模拟能力的解决方案。这个压缩包包含了该框架的一个轻量级版本,经过优化,仅保留了四种主题,以减小文件体积,便于快速开发和部署。它将原本庞大的库...
Ubuntu 12.04 Unity下Eclipse图标不显示解决方法 ...解决 Eclipse 图标不显示问题需要创建 desktop 文件,配置图标路径和程序路径,并在 Unity 桌面环境中打开 Dash 并搜寻 Eclipse,以便正确地显示图标。
通过右击“我的电脑”,依次单击“属性/高级/性能设置”在“视觉效果”页中将“在桌面上为图标标签使用阴影”选中,单击确定即可解决问题。 知识点二:新建用户解决桌面图标标签变得不透明问题 如果第一种方法无效...
Desktop Icon Toy 是一款桌面图标管理工具,你可以用它保存当前桌面图标的位置,激活被其它窗口挡住的图标、当然也可以去除快捷方式上的小箭头。 这个清凉简单的工具,你可以组织和安排所有的桌面图标变成简单的排列...
针对上述原因,我们可以采取以下步骤逐一排查并解决问题: 1. **调整视觉效果设置**: - 右键点击“我的电脑”,选择“属性”。 - 进入“高级”选项卡,点击“性能”区域下的“设置”按钮。 - 在“视觉效果”...
总之,解决ArcMap Desktop导出dbf文件时出现中文乱码的问题需要理解dbf文件的性质、编码的重要性以及如何利用插件或更新软件来解决此类兼容性问题。通过正确的方法和工具,可以确保在处理中文数据时不会出现乱码,...