`
OnMartinFowler
  • 浏览: 5043 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
最近访客 更多访客>>
社区版块
存档分类
最新评论

Extjs4实现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;
        }
    }


在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 桌面图标换行

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

    extjs4.0desktop图标换行

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

    解决extjs 桌面图标换行方法

    ### 解决ExtJS桌面图标换行方法 #### 知识点概述 本文档将详细介绍如何在ExtJS框架中实现桌面图标的自动换行功能。在许多应用中,特别是在模仿桌面环境的应用程序中,桌面图标(通常称为快捷方式)的布局至关重要...

    extjs4.2 desktop 拓展

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

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

    首先,要实现图标换行,需要在ExtJS desktop组件的基础上编写代码。具体是在desktop.js文件中添加或修改初始化函数。核心步骤包括以下几点: 1. 计算任务栏高度:首先需要获取任务栏的高度,因为这决定了桌面空间的...

    Ext 4 桌面图标换行

    标题“Ext 4 桌面图标换行”涉及到的是Ext JS 4框架中对桌面快捷方式图标的布局调整,使其能够在桌面区域自动换行。这种功能通常用于提高用户界面的可读性和易用性,避免图标过于拥挤,使得用户能更方便地查看和访问...

    ExtJs6 Desktop

    本桌面拓展自ExtJs6.0 DeskTop Demo 主要作如下修改: 1. 修改提示宽度不能自适应问题 2. 增加桌面图标自适应换行 3. 增加桌面图标拖动 4. 解决桌面图标拖动后闪屏问题 5. 桌面背景默认拉伸 6. 增加中文支持文件 7. ...

    extjs4.2 desktop

    在 ExtJS 4.2 Desktop 中,实现简单汉化意味着已经对关键的 UI 文本进行了翻译,使得国内开发者可以直接使用,无需额外的本地化工作。 "图标换行"和"图标拖动"是两种增强用户体验的功能。图标换行可能是指在空间...

    用extjs 4.0打造自己的WEB桌面

    ExtJS 4.0 桌面开发指南 ExtJS 4.0 是一个功能强大且流行的 ...我们还学习了如何使用 ExtJS 4.0 的 layout manager 实现桌面图标的自动换行,并在适当的地方调用 initShortcut 函数以实现图标的排列和重新排列。

    desktop基础搭建

    为了使桌面图标更加美观且易于管理,需要实现图标自动换行的功能。这一功能通常涉及到布局管理的调整。 1. **实现方法**: - 在相关的`.js`文件中,利用Extjs提供的布局管理器(如`FitAllLayout`),设置每个图标...

Global site tag (gtag.js) - Google Analytics