Tip WebDesktop Icons

[macielcr7]

In the Sencha Web Desktop uses the component dataview .. to create the icons ...
More if the icons pass the area of visibility of User?

createDataView: function () {
        var me = this;
        return {
            xtype: 'dataview',
            overItemCls: 'x-view-over',
            trackOver: true,
            itemSelector: me.shortcutItemSelector,
            store: me.shortcuts,
            style: {
                position: 'absolute'
            },
            x: 0, y: 0,
            tpl: new Ext.XTemplate(me.shortcutTpl)
        };
    },

here enters the solution that will post!


first component is no longer a dataview ...
can be a panel, I'll opt by a component ...

{
  xtype: 'component',
  id: 'icon-desktop-view',
  style: {
     position: 'absolute'
  },
  x: 0, 
  y: 0
}

To improve the visibility I resolvie creates a separate file ..
you can use a mixin to add the controller ...

Ext.define('ShSolutions.plugins.IconDesktop', {
mixins: {
        observable: 'Ext.util.Observable'
    },

    x: 0,
    y: 0,
    btnPadding: 8,
    btnHeight: 78,
    btnWidth: 64,
    row: null,
    col: null,

componentId: 'icon-desktop-view',

    tplIconMenuDeskotp: new Ext.Template([
        '<div class="ux-desktop-shortcut" id="{id}-shortcut">',
'<div class="ux-desktop-shortcut-icon {iconCls}">',
'<img src="',Ext.BLANK_IMAGE_URL,'" title="{name}">',
'</div>',
'<span class="ux-desktop-shortcut-text">{name}</span>',
'</div>'
    ]),

    initColRow: function(){
var me = this;
me.col = {index: 1, x: me.btnPadding};
    me.row = {index: 1, y: me.btnPadding + me.y};
},

isOverflow: function(y){
var me = this;
if(y > (me.getViewHeight())){
return true;
}
return false;
},

setXY: function(item, me, init){
var bottom = me.row.y + me.btnHeight;
var overflow = me.isOverflow(me.row.y + me.btnHeight);

if(overflow && bottom > (me.btnHeight + me.btnPadding)){
me.col = {
    index: me.col.index++,
    x: me.col.x + me.btnWidth + me.btnPadding
};
me.row = {
index: 1,
y: me.btnPadding + me.y
        };
    }

if(init){
if(init=='left'){var from = {x: -200,y: 100};}
else if(init=='right'){var from = {x: 2000,y: 100};}
else if(init=='bottom'){var from = {x: 1000,y: 2000};}
else if(init=='top'){var from = {x: 1000,y: -200};}
else {var from = {x: 0,y: 0};}

item.animate({
duration: 2000,
from: from,
    to: {
        x: me.col.x,
        y: me.row.y
    }
});
}
else{
item.animate({
duration: 1000,
    to: {
        opacity: 60,
        x: me.col.x,
        y: me.row.y
    }
});
}

me.row.index++;
me.row.y = me.row.y + me.btnHeight + me.btnPadding;
},

    updateIconDesktopSize: function(){
var me = this
me.x = 0;
me.y = 0;
me.initColRow();

Ext.each(Ext.getCmp(me.componentId).el.dom.childNodes, function(div){
me.setXY(Ext.get(div.id), me);
});
    },

    addIconDesktop: function(config){
var me = this;
var t = me.tplIconMenuDeskotp;
t.compile();
t.append(Ext.getCmp(componentId).el, {
id: config.id, 
name: config.name, 
iconCls: config.iconCls
});

me.setXY(Ext.get(config.id+'-shortcut'), me, 'right');

Ext.create('Ext.tip.ToolTip', {
    target: config.id+'-shortcut',
    html: config.tooltip
});

Ext.get(config.id+'-shortcut').on('dblclick', function(){
me.getWindow(config.id, config.Controller, config.className);
});

new Ext.dd.DD(Ext.get(config.id+'-shortcut'), 'icon-dektop-move');
    },

    getViewHeight: function(){
return (Ext.getBody().getHeight() - 35);
    },

constructor: function (config) {
        this.mixins.observable.constructor.call(this, config);
    }

});

Mode Usage..

me.addIconDesktop({
  id: 'teste',
  name: 'Teste',
  iconCls: 'teste-shortcut'
});

after adding the icons you can use the resize method to adjust the icons after the thumbnailing ...

Ext.EventManager.onWindowResize(me.updateIconDesktopSize, this, {
delay:500
});

Css...

.ux-wallpaper {background-color: #3d71b8;}
.ux-wallpaper-tiled {background-repeat: repeat;}
.ux-desktop-shortcut {cursor: pointer;position: absolute;text-align: center;padding: 8px;margin: 8px;width: 64px;}
.ux-desktop-shortcut-icon {width: 48px;height: 48px;background-color: transparent;background-repeat: no-repeat;}
.ux-desktop-shortcut-text {font: normal 10px tahoma,arial,verdana,sans-serif;text-decoration: none;padding-top: 5px;color: white;}
.x-view-over .ux-desktop-shortcut-text {text-decoration: underline;}

.teste-shortcut {
background-image: url(../images/list48x48.png);
}
.x-ie6 .teste-shortcut {
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/list48x48.png', sizingMethod='scale');
}

[mitchellsimoens]

I'm thinking lot of people wouldn't have any idea what you are talking about so an example somewhere would probably help.