`
wywl0304
  • 浏览: 2225 次
  • 性别: Icon_minigender_1
  • 来自: 成都
最近访客 更多访客>>
社区版块
存档分类
最新评论

ExtJS 4 : desktop shortcut location

阅读更多
  ExtJS 4 Desktop 例子中的桌面图标始终在第一列显示,不论有多少个。重写Desktop的部分方法,让其自动适应位置。

  Ext.override(Ext.ux.desktop.Desktop, {
      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: {
            'refresh': me.positionItems,
            'resize': me.positionItems
          }
        };
      },

      positionItems: function() {
        var me = this,
            height = this.getHeight(),
            x = 0,
            y = 0;

        // get  the max width and height of shortcuts
        if (!me.itemWidth && !me.itemHeight) {
          me.itemHeight = 0;
          var h = 0, rh;

          this.all.each(function(item) {
            var el = Ext.get(item),
                box = el.getBox();
            me.itemWidth = me.itemWidth || box.right;
            me.itemHeight = (rh = box.bottom - h) > me.itemHeight ? rh : me.itemHeight;
            h = box.bottom;
          });
        }

        this.all.each(function(item) {
          var el = Ext.get(item);
          if ((y+me.itemHeight) > height) {
            x += me.itemWidth;
            y = 0;
          }
          el.setXY([x, y]);
          y += me.itemHeight;
        });
      }
    });
1
1
分享到:
评论

相关推荐

    ExtJS4中Desktop独立源代码+功能扩充

    2. **Desktop组件**:Desktop应用通常由多个关键组件组成,如DeskTop本身、工作区(Workspace)、快捷方式(Shortcut)、启动器(Launcher)、任务栏(Taskbar)等。这些组件的实现涉及了ExtJS的事件处理、布局管理...

    ExtJS桌面化(desktop)插件Demo项目

    在本项目中,"ExtJS桌面化(desktop)插件Demo项目"展示了如何利用ExtJS的桌面化功能创建一个类似于传统桌面应用的用户界面。这个Demo项目的核心在于对"desktop"插件的定制和应用,该插件提供了构建桌面样式的应用程序...

    extjs4.2 desktop 拓展

    ExtJS 4.2 Desktop 拓展是一个用于构建桌面样式的Web应用程序的框架,它提供了丰富的用户界面组件和交互效果。这个拓展是基于ExtJS 4.2版本,一个非常强大的JavaScript库,用于创建数据驱动、富客户端的Web应用。在...

    Extjs4 desktop

    ExtJS 4 Desktop 是一个基于 Sencha ExtJS 4 框架的桌面应用程序模拟器。这个框架允许开发者创建类似桌面应用的用户界面,提供多窗口、任务栏、快捷方式等特性,使得Web应用看起来和操作起来更像是本地桌面应用。在...

    Extjs4.0.7_desktop基础搭建.

    Extjs4.0.7_desktop基础搭建.用Extjs 开发而成的 额

    extjs4.2 desktop mvc

    EXTJS 4.2 Desktop MVC 是一个基于EXTJS 4.2版本的桌面应用程序框架,它结合了MVC(Model-View-Controller)设计模式,为开发者提供了构建富客户端桌面应用的强大工具。EXTJS是一个流行的JavaScript库,专门用于创建...

    ExtJs6 Desktop

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

    extjs4 自己写的webdesktop小实例,更新中

    这个"webdesktop1.0"压缩包包含了一个基于ExtJS4实现的Web桌面小实例,旨在帮助开发者了解如何利用ExtJS4构建类似桌面环境的Web应用。 在ExtJS4中,Web桌面通常指的是一个模仿传统桌面操作系统界面的Web应用框架,...

    DeskTop-ExtJs4 demo

    标题 "DeskTop-ExtJs4 demo" 暗示我们正在探讨一个使用ExtJs 4框架构建的桌面式应用程序的示例项目。ExtJs是一个强大的JavaScript库,用于开发富客户端Web应用,它提供了丰富的组件和布局管理,使得构建复杂的用户...

    extJs3升级extjs4方案

    ExtJS3 升级到 ExtJS4 方案 ExtJS3 升级到 ExtJS4 需要修改大量代码,主要是因为 ExtJS4 配备了一类新的系统,不向后兼容。在 ExtJS 3 里生成表的几个框架组件,ExtJS4 大多生成 div,这使得 CSS classes 将会失败...

    ExtJS DeskTop

    ExtJS DeskTop

    Desktop_Extjs5:在Extjs中以Codeigniter为后端的桌面创建

    4. **数据交互**:使用ExtJS的数据包(Store)和代理(Proxy)来与CodeIgniter API进行通信。配置Store的proxy属性,指定API的URL和请求类型,例如`proxy: { type: 'ajax', url: '...

    ExtJs:收集基于ExtJs扩展的一些控件

    ExtJs 是一个强大的JavaScript库,专门用于构建富客户端Web应用程序。它提供了丰富的用户界面组件,如数据网格、表格、图表、窗体等,使得开发者能够创建功能丰富的、交互性强的前端应用。本压缩包文件中收集了基于...

    ExtJS4之初体验

    ### ExtJS4之初体验 #### 一、准备工作 在开始使用ExtJS4进行开发之前,我们需要做一些基础的准备工作,确保开发环境已经搭建好,并且能够顺利地运行第一个ExtJS4程序。 ##### 1. 浏览器兼容性 ExtJS4支持大部分...

    extjs desktop实例(个人/家庭收支系统)第2部分

    1. **ExtJS Desktop**:这是一种高级的布局模式,模拟了传统的桌面操作系统界面,包括任务栏、桌面图标、启动菜单等元素。在个人/家庭收支系统中,桌面环境提供了一个直观的界面,让用户可以轻松访问不同的功能模块...

    包含各种类型的extjs小图标,Extjs4小图标

    在标题和描述中提到的“Extjs4小图标”指的是ExtJS 4版本中使用的一系列图形图标,这些图标用于增强应用程序的视觉效果,提供用户友好的操作指示。 1. **图标分类**: - 图标通常分为不同的类别,如操作图标(比如...

    extjs4中文文档

    EXTJS4是一个强大的JavaScript框架,主要用于构建富客户端Web应用程序。这个中文文档是EXTJS4的官方文档翻译版,为开发者提供了详细的API参考和教程,帮助理解EXTJS4的各种组件、功能和工作原理。 EXTJS4的核心特性...

    Extjs4的demo

    在本例中,我们假设你已经在MyEclipse中创建了一个新的Web项目,并命名为"Extjs4"。将ExtJS 4.0.7的文件放入Webroot目录,以便于访问。 接下来,你需要设置一个学习环境。确保你的机器上已经安装了MyEclipse和...

    extjs4学习文档

    EXTJS4 是一款强大的JavaScript框架,用于构建富客户端Web应用程序。EXTJS4的学习文档旨在帮助开发者掌握这一框架,尤其对于初学者来说,提供了宝贵的资源。文档中包含了从环境配置到实际应用开发的基础步骤。 首先...

    extjs4-教程

    ### ExtJS4基础教程知识点 #### 1. ExtJS4开发环境搭建 ExtJS4是使用JavaScript进行开发的框架,专门用于构建富互联网应用(RIA)。搭建ExtJS开发环境需要预先安装一些软件和配置开发环境。以下步骤详细介绍了如何...

Global site tag (gtag.js) - Google Analytics