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;
});
}
});
分享到:
相关推荐
2. **Desktop组件**:Desktop应用通常由多个关键组件组成,如DeskTop本身、工作区(Workspace)、快捷方式(Shortcut)、启动器(Launcher)、任务栏(Taskbar)等。这些组件的实现涉及了ExtJS的事件处理、布局管理...
在本项目中,"ExtJS桌面化(desktop)插件Demo项目"展示了如何利用ExtJS的桌面化功能创建一个类似于传统桌面应用的用户界面。这个Demo项目的核心在于对"desktop"插件的定制和应用,该插件提供了构建桌面样式的应用程序...
ExtJS 4.2 Desktop 拓展是一个用于构建桌面样式的Web应用程序的框架,它提供了丰富的用户界面组件和交互效果。这个拓展是基于ExtJS 4.2版本,一个非常强大的JavaScript库,用于创建数据驱动、富客户端的Web应用。在...
ExtJS 4 Desktop 是一个基于 Sencha ExtJS 4 框架的桌面应用程序模拟器。这个框架允许开发者创建类似桌面应用的用户界面,提供多窗口、任务栏、快捷方式等特性,使得Web应用看起来和操作起来更像是本地桌面应用。在...
Extjs4.0.7_desktop基础搭建.用Extjs 开发而成的 额
EXTJS 4.2 Desktop MVC 是一个基于EXTJS 4.2版本的桌面应用程序框架,它结合了MVC(Model-View-Controller)设计模式,为开发者提供了构建富客户端桌面应用的强大工具。EXTJS是一个流行的JavaScript库,专门用于创建...
本桌面拓展自ExtJs6.0 DeskTop Demo 主要作如下修改: 1. 修改提示宽度不能自适应问题 2. 增加桌面图标自适应换行 3. 增加桌面图标拖动 4. 解决桌面图标拖动后闪屏问题 5. 桌面背景默认拉伸 6. 增加中文支持文件 7. ...
这个"webdesktop1.0"压缩包包含了一个基于ExtJS4实现的Web桌面小实例,旨在帮助开发者了解如何利用ExtJS4构建类似桌面环境的Web应用。 在ExtJS4中,Web桌面通常指的是一个模仿传统桌面操作系统界面的Web应用框架,...
标题 "DeskTop-ExtJs4 demo" 暗示我们正在探讨一个使用ExtJs 4框架构建的桌面式应用程序的示例项目。ExtJs是一个强大的JavaScript库,用于开发富客户端Web应用,它提供了丰富的组件和布局管理,使得构建复杂的用户...
ExtJS3 升级到 ExtJS4 方案 ExtJS3 升级到 ExtJS4 需要修改大量代码,主要是因为 ExtJS4 配备了一类新的系统,不向后兼容。在 ExtJS 3 里生成表的几个框架组件,ExtJS4 大多生成 div,这使得 CSS classes 将会失败...
ExtJS DeskTop
4. **数据交互**:使用ExtJS的数据包(Store)和代理(Proxy)来与CodeIgniter API进行通信。配置Store的proxy属性,指定API的URL和请求类型,例如`proxy: { type: 'ajax', url: '...
ExtJs 是一个强大的JavaScript库,专门用于构建富客户端Web应用程序。它提供了丰富的用户界面组件,如数据网格、表格、图表、窗体等,使得开发者能够创建功能丰富的、交互性强的前端应用。本压缩包文件中收集了基于...
### ExtJS4之初体验 #### 一、准备工作 在开始使用ExtJS4进行开发之前,我们需要做一些基础的准备工作,确保开发环境已经搭建好,并且能够顺利地运行第一个ExtJS4程序。 ##### 1. 浏览器兼容性 ExtJS4支持大部分...
1. **ExtJS Desktop**:这是一种高级的布局模式,模拟了传统的桌面操作系统界面,包括任务栏、桌面图标、启动菜单等元素。在个人/家庭收支系统中,桌面环境提供了一个直观的界面,让用户可以轻松访问不同的功能模块...
在标题和描述中提到的“Extjs4小图标”指的是ExtJS 4版本中使用的一系列图形图标,这些图标用于增强应用程序的视觉效果,提供用户友好的操作指示。 1. **图标分类**: - 图标通常分为不同的类别,如操作图标(比如...
EXTJS4是一个强大的JavaScript框架,主要用于构建富客户端Web应用程序。这个中文文档是EXTJS4的官方文档翻译版,为开发者提供了详细的API参考和教程,帮助理解EXTJS4的各种组件、功能和工作原理。 EXTJS4的核心特性...
在本例中,我们假设你已经在MyEclipse中创建了一个新的Web项目,并命名为"Extjs4"。将ExtJS 4.0.7的文件放入Webroot目录,以便于访问。 接下来,你需要设置一个学习环境。确保你的机器上已经安装了MyEclipse和...
EXTJS4 是一款强大的JavaScript框架,用于构建富客户端Web应用程序。EXTJS4的学习文档旨在帮助开发者掌握这一框架,尤其对于初学者来说,提供了宝贵的资源。文档中包含了从环境配置到实际应用开发的基础步骤。 首先...
### ExtJS4基础教程知识点 #### 1. ExtJS4开发环境搭建 ExtJS4是使用JavaScript进行开发的框架,专门用于构建富互联网应用(RIA)。搭建ExtJS开发环境需要预先安装一些软件和配置开发环境。以下步骤详细介绍了如何...