方法一:(该方法有问题,多余的全部按横排列的,不是希望的)
desktop中桌面的图标使用的是自定义列表即dl,dt,dd标签,从我们下载的例子中不难发现,在样式里面只定义了在dl里面定义了dt,而没有dd,(关于这个标签的用法,大家自己去搜索一下,这里不废话了),这就意味着,排版只能竖排,而不能横排。
如果想横排的话,在主页中dt标签后面使用dd,这样就可以横排了,但是有两个问题,第一,dd的样式没有定义,第二,点击dd的时候触发的方法,也没有定义。
第一个问题的解决方式是招到desktop.css,然后将#x-shortcuts 下dt所有的样式都让dd也拥有一份,如下:
/* Desktop Shortcuts */
#x-shortcuts dt {
float:left;
margin:15px 0 0 15px;
clear:left;
width:64px;
font:normal 10px tahoma,arial,verdana,sans-serif;
text-align:center;
zoom:1;
display:block;
}
#x-shortcuts dd {
float:left;
margin:15px 0 0 15px;
clear:none;
width:64px;
font:normal 10px tahoma,arial,verdana,sans-serif;
text-align:center;
zoom:1;
display:block;
}
#x-shortcuts dt a {
width:64px;
display:block;
color:white;
text-decoration:none;
}
#x-shortcuts dd a {
width:64px;
display:block;
color:white;
text-decoration:none;
}
#x-shortcuts dt div {
width:100%;
color:white;
overflow:hidden;
text-overflow:ellipsis;
cursor:pointer;
}
#x-shortcuts dd div {
width:100%;
color:white;
overflow:hidden;
text-overflow:ellipsis;
cursor:pointer;
}
.ext-ie #x-shortcuts dt img {
background:transparent !important;
}
.ext-ie #x-shortcuts dd img {
background:transparent !important;
}
#x-shortcuts dt a:hover {
text-decoration:underline;
}
#x-shortcuts dd a:hover {
text-decoration:underline;
}
第二:触发方法在desktop.js的最后一行,原来的方法如下;
/*拓展支持DD标签*/
if (shortcuts) {
shortcuts.on('click', function(e, t) {
if (t = e.getTarget('dt', shortcuts)) {
e.stopEvent();
var module = app.getModule(t.id.replace('-shortcut',''));
if (module) {
module.createWindow();
}
}
});
}
从里可以看出只支持点击dt后触发方法,我们改一下,如下:
/*拓展支持DD标签*/
if (shortcuts) {
shortcuts.on('click', function(e, t) {
if (t = e.getTarget('dt', shortcuts)) {
e.stopEvent();
var module = app.getModule(t.id.replace('-shortcut',''));
if (module) {
module.createWindow();
}
}else if(t = e.getTarget('dd', shortcuts)){
e.stopEvent();
var module = app.getModule(t.id.replace('-shortcut',''));
if (module) {
module.createWindow();
}
}
});
}
方法二:此方法正解,可以自动换行
ext中的那个desktop的demo图标不能自动换行的 desktop.js
//shortcuts 自动换行
var btnHeight = 61;
var btnWidth = 64;
var btnPadding = 15;
var col = null;
var row = null;
function initColRow(){
col = {index: 1, x: btnPadding};
row = {index: 1, y: btnPadding};
}
initColRow();
function isOverflow(y){
if(y > (Ext.lib.Dom.getViewHeight() - taskbarEl.getHeight())){
return true;
}
return false;
}
this.setXY = function(item){
var bottom = row.y + btnHeight,
overflow = isOverflow(row.y + btnHeight);
if(overflow && bottom > (btnHeight + btnPadding)){
col = {
index: col.index++
, x: col.x + btnWidth + btnPadding
};
row = {
index: 1
, y: btnPadding
};
}
Ext.fly(item).setXY([
col.x
, row.y
]);
row.index++;
row.y = row.y + btnHeight + btnPadding;
};
this.handleUpdate = function(){
initColRow();
//var items=shortcuts.dom.children;
var items=Ext.query("dt",shortcuts.dom);
for(var i = 0, len = items.length; i < len; i++){
this.setXY(items[i]);
}
}
this.handleUpdate();
Ext.EventManager.onWindowResize(this.handleUpdate, this, {delay:500});
//end shortcuts 自动换行
分享到:
相关推荐
EXTJS是一种基于JavaScript的富客户端应用开发框架,由Sencha公司...通过熟练掌握EXTJS,开发者可以创建出具有高度交互性和用户友好性的Web应用程序,即使是在浏览器环境中,也能提供近似于桌面操作系统的使用感受。
1. **ExtJS Desktop**:这是一种高级的布局模式,模拟了传统的桌面操作系统界面,包括任务栏、桌面图标、启动菜单等元素。在个人/家庭收支系统中,桌面环境提供了一个直观的界面,让用户可以轻松访问不同的功能模块...
### 解决ExtJS桌面图标换行方法 #### 知识点概述 本文档将详细介绍如何在ExtJS框架中实现桌面图标的自动换行功能。在许多应用中,特别是在模仿桌面环境的应用程序中,桌面图标(通常称为快捷方式)的布局至关重要...
ExtJS 4.2 Desktop 是一个基于 ExtJS 4.2 框架构建的桌面应用模拟能力的解决方案。这个压缩包包含了该框架的一个轻量级版本,经过优化,仅保留了四种主题,以减小文件体积,便于快速开发和部署。它将原本庞大的库...
在“JS实现的desktop桌面示例超炫_extjs”中,"extjs"可能指的是Ext JS,这是一个强大的JavaScript框架,专门用于构建富客户端应用。Ext JS提供了丰富的组件库,包括表格、面板、菜单、按钮等,这些组件可以帮助...
在深入探讨如何在ExtJS 4.0框架中实现Desktop桌面图标自动换行的功能之前,我们首先需要了解ExtJS框架的基本概念以及Desktop组件的作用。ExtJS是一个基于JavaScript的开源前端框架,它提供了一系列丰富的UI组件,使...
ExtJS 4.0 桌面开发指南 ExtJS 4.0 是一个功能强大且流行的 ...我们还学习了如何使用 ExtJS 4.0 的 layout manager 实现桌面图标的自动换行,并在适当的地方调用 initShortcut 函数以实现图标的排列和重新排列。
然而,默认情况下,Desktop模块中的图标排列是单列且不会自动换行,这可能导致图标超出屏幕可视区域,特别是当桌面图标数量较多时。 为了实现图标换行,我们需要对`desktop.js`进行扩展,创建一个新功能`...
EXT Desktop 是一个基于 ExtJS 的桌面应用程序框架,它允许开发者构建出类似桌面操作系统的Web应用。这个综合例子提供了丰富的学习资源,涵盖了EXT Desktop的核心概念、组件使用和交互设计。 首先,EXT Desktop ...
1. **扩展`initShortcut`函数**:这是自定义的一个功能,用于计算和设置桌面图标的坐标,以便于它们能够按照行进行排列。函数首先定义了图标的基本尺寸(如高度、宽度和间距),然后通过循环遍历所有快捷方式元素,...