`
firesnake2008
  • 浏览: 1535 次
  • 性别: Icon_minigender_1
  • 来自: 上海
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

解决extjs的desktop桌面不能双排列

阅读更多
方法一:(该方法有问题,多余的全部按横排列的,不是希望的)
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仿桌面系统

    EXTJS是一种基于JavaScript的富客户端应用开发框架,由Sencha公司...通过熟练掌握EXTJS,开发者可以创建出具有高度交互性和用户友好性的Web应用程序,即使是在浏览器环境中,也能提供近似于桌面操作系统的使用感受。

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

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

    解决extjs 桌面图标换行方法

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

    extjs4.2 desktop

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

    JS实现的desktop桌面示例(超炫)

    在“JS实现的desktop桌面示例超炫_extjs”中,"extjs"可能指的是Ext JS,这是一个强大的JavaScript框架,专门用于构建富客户端应用。Ext JS提供了丰富的组件库,包括表格、面板、菜单、按钮等,这些组件可以帮助...

    extjs4.0desktop图标换行

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

    用extjs 4.0打造自己的WEB桌面

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

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

    然而,默认情况下,Desktop模块中的图标排列是单列且不会自动换行,这可能导致图标超出屏幕可视区域,特别是当桌面图标数量较多时。 为了实现图标换行,我们需要对`desktop.js`进行扩展,创建一个新功能`...

    ext desktop 综合例子 你可以学到很多哦

    EXT Desktop 是一个基于 ExtJS 的桌面应用程序框架,它允许开发者构建出类似桌面操作系统的Web应用。这个综合例子提供了丰富的学习资源,涵盖了EXT Desktop的核心概念、组件使用和交互设计。 首先,EXT Desktop ...

    Ext 4 桌面图标换行

    1. **扩展`initShortcut`函数**:这是自定义的一个功能,用于计算和设置桌面图标的坐标,以便于它们能够按照行进行排列。函数首先定义了图标的基本尺寸(如高度、宽度和间距),然后通过循环遍历所有快捷方式元素,...

Global site tag (gtag.js) - Google Analytics