在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;
}
}
在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);
}
分享到:
相关推荐
extjs4.0 实现桌面图标换行,具体改动参考 4.0.2a\examples\desktop\App.js 核心方法参考这句 //这里初始化所有图标 this.initShortcut(); 我觉得我说的很清楚了,还不明白的留言,一点js不懂的请闪开,谢谢
在深入探讨如何在ExtJS 4.0框架中实现Desktop桌面图标自动换行的功能之前,我们首先需要了解ExtJS框架的基本概念以及Desktop组件的作用。ExtJS是一个基于JavaScript的开源前端框架,它提供了一系列丰富的UI组件,使...
### 解决ExtJS桌面图标换行方法 #### 知识点概述 本文档将详细介绍如何在ExtJS框架中实现桌面图标的自动换行功能。在许多应用中,特别是在模仿桌面环境的应用程序中,桌面图标(通常称为快捷方式)的布局至关重要...
总结来说,ExtJS 4.2 Desktop 拓展是一个集成了多种桌面特性并优化了基础框架的解决方案,它提供了图标换行、窗口拖动、多级开始菜单等功能,使得开发复杂的Web应用变得更加简单和直观。通过下载提供的LinBDesk4.2...
首先,要实现图标换行,需要在ExtJS desktop组件的基础上编写代码。具体是在desktop.js文件中添加或修改初始化函数。核心步骤包括以下几点: 1. 计算任务栏高度:首先需要获取任务栏的高度,因为这决定了桌面空间的...
标题“Ext 4 桌面图标换行”涉及到的是Ext JS 4框架中对桌面快捷方式图标的布局调整,使其能够在桌面区域自动换行。这种功能通常用于提高用户界面的可读性和易用性,避免图标过于拥挤,使得用户能更方便地查看和访问...
本桌面拓展自ExtJs6.0 DeskTop Demo 主要作如下修改: 1. 修改提示宽度不能自适应问题 2. 增加桌面图标自适应换行 3. 增加桌面图标拖动 4. 解决桌面图标拖动后闪屏问题 5. 桌面背景默认拉伸 6. 增加中文支持文件 7. ...
在 ExtJS 4.2 Desktop 中,实现简单汉化意味着已经对关键的 UI 文本进行了翻译,使得国内开发者可以直接使用,无需额外的本地化工作。 "图标换行"和"图标拖动"是两种增强用户体验的功能。图标换行可能是指在空间...
ExtJS 4.0 桌面开发指南 ExtJS 4.0 是一个功能强大且流行的 ...我们还学习了如何使用 ExtJS 4.0 的 layout manager 实现桌面图标的自动换行,并在适当的地方调用 initShortcut 函数以实现图标的排列和重新排列。
为了使桌面图标更加美观且易于管理,需要实现图标自动换行的功能。这一功能通常涉及到布局管理的调整。 1. **实现方法**: - 在相关的`.js`文件中,利用Extjs提供的布局管理器(如`FitAllLayout`),设置每个图标...