解决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,
ov