`
hzjxy0624
  • 浏览: 12939 次
  • 性别: Icon_minigender_1
  • 来自: 天津
社区版块
存档分类
最新评论

完美解决desktop图标换行问题

    博客分类:
  • Ext
ext 
阅读更多
最近看到不少人询问关于在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);
    }
分享到:
评论

相关推荐

    extjs4.0desktop图标换行

    在深入探讨如何在ExtJS 4.0框架中实现Desktop桌面图标自动换行的功能之前,我们首先需要了解ExtJS框架的基本概念以及Desktop组件的作用。ExtJS是一个基于JavaScript的开源前端框架,它提供了一系列丰富的UI组件,使...

    extjs4 桌面图标换行

    extjs4.0 实现桌面图标换行,具体改动参考 4.0.2a\examples\desktop\App.js 核心方法参考这句 //这里初始化所有图标 this.initShortcut(); 我觉得我说的很清楚了,还不明白的留言,一点js不懂的请闪开,谢谢

    解决extjs 桌面图标换行方法

    ### 解决ExtJS桌面图标换行方法 #### 知识点概述 本文档将详细介绍如何在ExtJS框架中实现桌面图标的自动...如果你正在开发类似桌面环境的应用程序,并且遇到了图标布局的问题,不妨尝试一下本文档提供的解决方案。

    Ext 4 桌面图标换行

    标题“Ext 4 桌面图标换行”涉及到的是Ext JS 4框架中对桌面快捷方式图标的布局...通过修改`desktop.js`文件中的`initShortcut`函数、监听器以及`afterRender`事件,可以实现Ext JS 4桌面环境下的图标自动换行功能。

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

    总结来说,这个示例代码提供了一个解决ExtJS Desktop模块图标换行问题的方法。通过扩展核心功能并添加适当的事件监听器,我们能够使桌面图标根据屏幕尺寸自适应地排列,从而提高用户体验。这个解决方案的核心在于...

    extjs4.2 desktop 拓展

    总结来说,ExtJS 4.2 Desktop 拓展是一个集成了多种桌面特性并优化了基础框架的解决方案,它提供了图标换行、窗口拖动、多级开始菜单等功能,使得开发复杂的Web应用变得更加简单和直观。通过下载提供的LinBDesk4.2...

    ExtJs6 Desktop

    本桌面拓展自ExtJs6.0 DeskTop Demo 主要作如下修改: 1. 修改提示宽度不能自适应问题 ...4. 解决桌面图标拖动后闪屏问题 5. 桌面背景默认拉伸 6. 增加中文支持文件 7. 任务栏背景色 8. 开始菜单多级菜单 9. 登录窗口

    Desktop Icon Toy4.0 固定桌面图标

    "Desktop Icon Toy 4.0" 是一款专为Windows用户设计的桌面图标管理软件,它提供了许多实用且创新的功能,让用户的桌面图标管理变得更加便捷和个性化。这款软件的核心功能是帮助用户固定桌面图标的位置,避免在调整...

    桌面图标玩具Desktop Icon Toy

    Desktop Icon Toy 是一款桌面图标管理工具,你可以用它保存当前桌面图标的位置,激活被其它窗口挡住的图标、当然也可以去除快捷方式上的小箭头。 这个清凉简单的工具,你可以组织和安排所有的桌面图标变成简单的排列...

    MacOS下安装Genero Desktop Client及参数配置方法

    MacOS 下安装 Genero Desktop Client 及参数配置方法 MacOS 作为一款流行的操作系统,广泛应用于各个领域,而 Genero Desktop ...同时,也提供了常见问题解决方法,以便读者能够更好地使用 Genero Desktop Client。

    myBase Desktop 7.x beta26_6BUG完美版

    压缩包内的"Mybase7.x 26标准版完美使用.wmv"很可能是myBase 7.x beta26的标准版使用教程视频,它可能涵盖了软件的基础操作、高级功能以及如何解决常见问题等内容,对于新用户来说,这是一个快速上手的宝贵资源。...

    myBase Desktop 6.0.4 完美破解版

    myBase Desktop 6.0.4 完美破解版myBase Desktop 6.0.4 完美破解版

    关于安装QT后桌面无启动图标问题.docx

    "关于安装QT后桌面无启动图标问题解决方案" 在 Ubuntu 系统中,安装 QT 后,桌面可能不会显示启动图标,这是由于 QT 安装后的默认设置问题。解决这个问题需要找到安装位置并创建启动器。下面将详细介绍解决方案。 ...

    extjs4.2 desktop

    ExtJS 4.2 Desktop 是一个基于 ExtJS 4.2 框架构建的桌面应用模拟能力的解决方案。这个压缩包包含了该框架的一个轻量级版本,经过优化,仅保留了四种主题,以减小文件体积,便于快速开发和部署。它将原本庞大的库...

    Ubuntu 12.04 Unity下Eclipse图标不显示解决方法.docx

    Ubuntu 12.04 Unity下Eclipse图标不显示解决方法 ...解决 Eclipse 图标不显示问题需要创建 desktop 文件,配置图标路径和程序路径,并在 Unity 桌面环境中打开 Dash 并搜寻 Eclipse,以便正确地显示图标。

    桌面图标标签变得不透明

    通过右击“我的电脑”,依次单击“属性/高级/性能设置”在“视觉效果”页中将“在桌面上为图标标签使用阴影”选中,单击确定即可解决问题。 知识点二:新建用户解决桌面图标标签变得不透明问题 如果第一种方法无效...

    [桌面图标玩具].Desktop.Icon.Toy.v4.0_X86_X64_Kegen

    Desktop Icon Toy 是一款桌面图标管理工具,你可以用它保存当前桌面图标的位置,激活被其它窗口挡住的图标、当然也可以去除快捷方式上的小箭头。 这个清凉简单的工具,你可以组织和安排所有的桌面图标变成简单的排列...

    如何解决桌面图标有蓝底

    针对上述原因,我们可以采取以下步骤逐一排查并解决问题: 1. **调整视觉效果设置**: - 右键点击“我的电脑”,选择“属性”。 - 进入“高级”选项卡,点击“性能”区域下的“设置”按钮。 - 在“视觉效果”...

    解决ArcMap Desktop 10.1-10.6 导出dbf出现乱码.rar

    总之,解决ArcMap Desktop导出dbf文件时出现中文乱码的问题需要理解dbf文件的性质、编码的重要性以及如何利用插件或更新软件来解决此类兼容性问题。通过正确的方法和工具,可以确保在处理中文数据时不会出现乱码,...

Global site tag (gtag.js) - Google Analytics