Desktop Icon Manager

[Bobrovnik]

I have finished my second Extjs component - Desktop Icon Manager (dim). It provides posibility to configure icons, make their own templates, drag&drop, select more the one icon and do multi actions with it. I have made some experimental actions like sort icons on desktop, delete and add it in interface.

Documentation (http://code.google.com/p/extdim/w/list)

this project on google code (http://code.google.com/p/extdim/)

Demo (http://bags-gallery.com.ua/stas/ext/examples/idesktop/desktop.html)

Demo with thash icon, which you can drop on
Demo (http://bags-gallery.com.ua/stas/ext/examples/idesktop/removeicon.html)

Download (http://bags-gallery.com.ua/stas/ext/examples/idesktop/dim.zip) After download just put it in extjs examples folder

Updates:
- 02/02/10 - bug with focus fields is fixed, added "launchModuleId" icon property to launch desktop module
- 28/10/09 - added events iconMove, iconSelect, iconDeselect, iconEnter, icondroppedon, iconBeforeDelete. Documentation written http://code.google.com/p/extdim/w/list
- 24/10/09 - added special class for icon
- 22/10/09 - added dragging more then one icon on the desktop, and events: iconSelected, iconDeselected, iconMove
- 22/10/09 - all jquery functionality replaced to extjs, so now this component does not requires jquery library
- 20/10/09 - drag&drop replaced from jquery to extjs base



/**
* author = Stanislav Golovenko
* published = 2009.10.18
* version = 0.4
* extversion = 3.x
* demo = http://bags-gallery.com.ua/stas/ext/examples/idesktop/removeicon.html
* forum = http://www.extjs.com/forum/showthread.php?t=83224
* documentation = http://code.google.com/p/extdim/w/list
*/


Ext.ns('Ext.ux.Desktop');

Ext.ux.Desktop.Icon = Ext.extend(Ext.BoxComponent, {
iconX: 0,
iconY: 0,
autoEl: {
tag: 'dt'
},
IconsManager: null,
launchModuleId: null,
style: 'position: absolute; z-index: 4000;',
template:
'<a href="#"><img src="{icon}" />' +
'<div>{text}</div></a>'
,
menu: false,
dd: false,
elementDeletingFlag: false,
DDGroup: 'iconsDDgroup',
zindex: 4000,
initComponent : function(){

this.on('afterrender', function(c){

this.initIcon();
this.initDD();
this.initSelectable();
this.initDesktopConfig();
if(this.menu)
this.initBaseMenu();
}.createDelegate(this));

Ext.ux.Desktop.Icon.superclass.initComponent.call(this);

this.addEvents({
"iconMove" : true,
"iconSelect" : true,
"iconDeselect" : true,
"iconEnter" : true,
"icondroppedon" : true,
"iconBeforeDelete" : true
})
},
initDesktopConfig : function(){
if(this.launchModuleId && this.IconsManager.desktop){
this.getEl().on('dblclick', function(){

this.IconsManager.desktop.getModule(this.launchModuleId).createWindow();
}, this);
}
},
initIcon : function() {

this.getEl().setStyle('z-index', this.zindex);
var template = new Ext.XTemplate(this.template);

template.overwrite(this.getEl(), this);

var coords = this.IconsManager.repairXY({iconX: this.iconX, iconY: this.iconY});
this.iconX = coords.iconX;
this.iconY = coords.iconY;
this.IconsManager.placeIcon(this);
},
initDD : function(){

this.dd = new Ext.dd.DD(this.getEl(), this.DDGroup, {
isTarget : true
});

Ext.apply(this.dd, {
startDrag : function(x, y){

var icon = Ext.fly(this.getEl());
var id = this.id;

this.coordsBeforeDrag = icon.getXY();

this.IconsManager.isDraggingElement = true;
if(this.IconsManager.selectedIconsArray.indexOf(this.id) == -1){

this.IconsManager.deselectAllIcons();
this.IconsManager.selectIcon(id);
}

this.IconsManager.IconsGrid[this.iconY][this.iconX] = false;
}.createDelegate(this),
endDrag : function(e) {

e.stopEvent();

if(!this.elementDeletingFlag){

var el = Ext.get(this.getEl());

var icon = this;

var elForPlace = this.IconsManager.repairXY({iconX: el.getStyle('left') + 'px', iconY: el.getStyle('top') + 'px'});
icon.iconX = elForPlace.iconX;
icon.iconY = elForPlace.iconY;

this.IconsManager.placeIcon(icon);

this.fireEvent('iconMove', icon);
this.IconsManager.fireEvent('iconMove', this.IconsManager, icon);

if(this.IconsManager.selectedIconsArray.length > 1){

var newCoords = el.getXY();
var oldCoords = this.coordsBeforeDrag;
this.IconsManager.moveMoreThenOneSelectedIcon(icon.id, {
iconX: newCoords[0] - oldCoords[0],
iconY: newCoords[1] - oldCoords[1]
});
}

}
}.createDelegate(this),
onDragEnter : function(evtObj, targetElId) {
// Colorize the drag target if the drag node's parent is not the same as the drop target

if(this.id != targetElId){
this.IconsManager.iconsArray[targetElId].fireEvent('iconEnter', this.IconsManager.iconsArray[targetElId], this);
}

}.createDelegate(this),
onDragDrop : function(evtObj, targetElId) {

if(this.id != targetElId){
this.IconsManager.iconsArray[targetElId].fireEvent('icondroppedon', this.IconsManager.iconsArray[targetElId], this);
}
}.createDelegate(this)
});

var rentedDDTarget = new Ext.dd.DDTarget(this.getEl(), this.DDGroup);
},
initSelectable : function(){

this.getEl().on('click', function(e){
e.stopEvent();
if(!e.ctrlKey){

if(Ext.isIE){
e.browserEvent.keyCode = 0;
}
if(!this.IconsManager.isDraggingElement)
this.IconsManager.deselectAllIcons();
}
if(!this.IconsManager.isDraggingElement){

if(e.ctrlKey){
var icon = this;
if(icon.selected)
this.IconsManager.deselectIcon(this.id);
else
this.IconsManager.selectIcon(this.id);
} else {
this.IconsManager.selectIcon(this.id);
}
}
this.IconsManager.isDraggingElement = false;
}.createDelegate(this));

},
initBaseMenu : function(){
this.getEl().on('contextmenu', function(e){

e.stopEvent();
this.menu = (this.menu instanceof Ext.menu.Menu) ? this.menu : new Ext.menu.Menu(this.menu);
if(!this.menu.el){
this.menu.render();
}
var xy = e.getXY();

this.menu.showAt(xy);
}, this);
},
moveIconTo : function(XY, animate){
var el = this.getEl();

var oldCoords = el.getXY();

var newCoords = this.IconsManager.repairXY({
iconX: oldCoords[0] + parseInt(XY.iconX) + 'px',
iconY: oldCoords[1] + parseInt(XY.iconY) + 'px'
});
this.IconsManager.IconsGrid[this.iconY][this.iconX] = false;
el.moveTo(oldCoords[0] + XY.iconX, oldCoords[1] + XY.iconY, {

callback : function(){

this.iconX = newCoords.iconX;
this.iconY = newCoords.iconY;

this.IconsManager.placeIcon(this);
this.fireEvent('iconMove', this);
this.IconsManager.fireEvent('iconMove', this.IconsManager, this);

}.createDelegate(this)
});
},
selectIcon : function(){

this.selected = true;

var el = this.getEl();
var zindex = el.getStyle('z-index');
el.setStyle('z-index', parseInt(zindex) + 5);
if(this.IconsManager.iconsSelectionElement != ''){
el = el.child(this.IconsManager.iconsSelectionElement);
}

if(!el.hasClass('ui-selected'))
el.addClass('ui-selected');
//new
this.fireEvent('iconSelect', this);
this.IconsManager.fireEvent('iconSelect', this.IconsManager, this);
},
deselectIcon : function(){

this.selected = false;

var el = this.getEl();

var zindex = el.getStyle('z-index');

el.setStyle('z-index', parseInt(zindex) - 5);

if(this.IconsManager.iconsSelectionElement != '')
el = el.child(this.IconsManager.iconsSelectionElement);

el.removeClass('ui-selected');
//new
this.fireEvent('iconDeselect', this);
this.IconsManager.fireEvent('iconDeselect', this.IconsManager, this);
},
deleteIcon : function(){

this.fireEvent('iconBeforeDelete', this);
this.IconsManager.fireEvent('iconBeforeDelete', this.IconsManager, this);

this.elementDeletingFlag = true;
this.IconsManager.IconsGrid[this.iconY][this.iconX] = false;

var indexToDelete = this.IconsManager.selectedIconsArray.indexOf(this.id);
if(indexToDelete != -1)
this.IconsManager.selectedIconsArray.splice(indexToDelete, 1);
delete this.IconsManager.iconsArray[this.id];
this.destroy();
return true;
}
});
Ext.reg('desktopicon', Ext.ux.Desktop.Icon);


/**
* Creates new IconsManager
* @constructor
* @param {Object} config Configuration object
*/
Ext.ux.Desktop.IconsManager = Ext.extend(Ext.util.Observable, {
/**
* @cfg {Object} desktop
* Desktop variable in your aplication
*/
desktop: null,
/**
* @cfg {String} iconsArea
* Parent Element of all icon
*/
iconsArea: 'dl',
/**
* @cfg {String} desktopEl
* Selector of desktop element
*/
desktopEl: '#x-desktop',
/**
* @cfg {String} iconsSelectionElement
* Selector for icon selection view
*/
iconsSelectionElement: '',
/**
* @cfg {String} iconsPostFix
* part of icon id that should be cut for detecting module thet should be launch
*/
iconsPostFix: '-shortcut',
/**
* @cfg {Object} basicStyles
* styles for icons sectors
*/
basicStyles: {
width: 88,
height: 75
},
/**
* @cfg {Bool} allowDesktopContextMenu
* icon template that should be use by default
*/
firstLoad: true,
constructor : function(config){

Ext.apply(this, config);

this.addEvents({
//returns desktopIcon manager, icon record
"iconSelect" : true,
"iconDeselect" : true,
"iconMove" : true,
"iconAfterAdd" : true,
"iconBeforeDelete" : true
});


this.initDesktopIconsConfiguration();
this.initIcons();

this.initSelectable();

Ext.EventManager.onWindowResize(function(){this.initDesktopIconsConfiguration()}, this);

Ext.ux.Desktop.IconsManager.superclass.constructor.call(this);

},
initIcons : function(){

var shortcuts = Ext.get(this.desktopEl.replace('#', ''));

//shortcuts.removeAllListeners();

this.isDraggingElement = false;
this.selectedIconsArray = new Array();

},
initSelectable : function(){

var desktopEl = Ext.get(this.desktopEl.replace('#', ''));
var dragRegion = new Ext.lib.Region(0, 0, 0, 0);
var bodyRegion = desktopEl.getRegion();
var proxy, link = this;
this.isDraggingElement = false;
this.selectedIconsArray = new Array();

tracker = new Ext.dd.DragTracker({
onStart: function(){
console.log('onStart');
if(!proxy){
proxy = desktopEl.createChild({cls:'x-view-selector'});
}else{
proxy.setDisplayed('block');
}
link.deselectAllIcons();
},
onDrag: function(){

var startXY = tracker.startXY;
var xy = tracker.getXY();

var x = Math.min(startXY[0], xy[0]);
var y = Math.min(startXY[1], xy[1]);
var w = Math.abs(startXY[0] - xy[0]);
var h = Math.abs(startXY[1] - xy[1]);

dragRegion.left = x;
dragRegion.top = y;
dragRegion.right = x+w;
dragRegion.bottom = y+h;

dragRegion.constrainTo(bodyRegion);
proxy.setRegion(dragRegion);

for(var i in this.iconsArray){
var r = this.iconsArray[i].region;
var sel = dragRegion.intersect(r);
if(sel && !r.selected){
r.selected = true;
this.selectIcon(this.iconsArray[i].id);
}else if(!sel && r.selected){
r.selected = false;
this.deselectIcon(this.iconsArray[i].id);
}
}
}.createDelegate(this),
onEnd : function(){

if(proxy){
proxy.setDisplayed(false);
}
}

});
tracker.initEl(Ext.get(this.desktopEl.replace('#', '')));
tracker.on('mousedown', function(c, e){
return e.target.id == desktopEl.id;
})
},

repairXY : function(el){

var ret = {};

el.iconX = (el.iconX <= 0) ? 0 : el.iconX;
el.iconY = (el.iconY <= 0) ? 0 : el.iconY;

if(typeof el.iconX == 'string')
ret.iconX = Math.round(parseInt(el.iconX) / this.basicStyles.width);
else
ret.iconX = el.iconX;

if(typeof el.iconY == 'string')
ret.iconY = Math.round(parseInt(el.iconY) / this.basicStyles.height);
else
ret.iconY = el.iconY;

return ret;
},

initDesktopIconsConfiguration : function(){

var DesktopWidth = Ext.fly(this.desktopEl.replace('#', '')).getWidth();
var DesktopHeight = Ext.fly(this.desktopEl.replace('#', '')).getHeight();

this.globalGrid = {};
this.globalGrid.x = Math.floor(DesktopWidth / this.basicStyles.width);
this.globalGrid.y = Math.floor(DesktopHeight / this.basicStyles.height);

this.IconsGrid = new Array();
for( var i = 0; i < this.globalGrid.y; i++){
this.IconsGrid[i] = new Array();
for( var h = 0; h < this.globalGrid.x; h++)
this.IconsGrid[i][h] = false;
}

// var startDate = new Date();
// for(var i = 0; i < 10000; i++)
// $("#x-desktop dt");
// var endDate = new Date();
// console.log('(parseInt(endDate.getTime()) - parseInt(startDate.getTime()))');
// alert((parseInt(endDate.getTime()) - parseInt(startDate.getTime())));
// console.log(icons);
if(!this.iconsArray){
this.iconsArray = new Object();
for (var i = 0; i < this.items.length; i++)
this.iconsArray[this.items[i].id] = this.items[i];
}

this.initManualIconsConfiguration(this.iconsArray);

},
initManualIconsConfiguration : function(icons){

if(this.firstLoad){
for(var i in icons){
var item = icons[i];
this.addIcon(item);
}
} else {

for(var i in icons){
this.placeIcon(icons[i]);
}
}


this.firstLoad = false;
},
placeIcon : function(config){

if(config.iconX > this.globalGrid.x - 1)
config.iconX = this.globalGrid.x - 1;
if(config.iconY > this.globalGrid.y - 1)
config.iconY = this.globalGrid.y - 1;

if(config.iconX < 0)
config.iconX = 0;
if(config.iconY < 0)
config.iconY = 0;

//console.debug(this.IconsGrid);
if(!this.IconsGrid[config.iconY][config.iconX]){
//$('#' + config.id).css({top: config.iconY * this.basicStyles.height, left: config.iconX * this.basicStyles.width});
var el = Ext.fly(config.id);
this.IconsGrid[config.iconY][config.iconX] = true;

el.moveTo(config.iconX * this.basicStyles.width, config.iconY * this.basicStyles.height);
this.iconsArray[config.id].region = el.getRegion();
this.iconsArray[config.id].iconX = config.iconX;
this.iconsArray[config.id].iconY = config.iconY;

} else {
config.iconY++;
if(config.iconY >= this.globalGrid.y){
config.iconY = 0;
config.iconX = config.iconX + 1;
}

this.placeIcon(config);
}

},
selectIcon : function(id){

this.iconsArray[id].selectIcon();
this.selectedIconsArray.push(id);
},
deselectIcon : function(id){

this.iconsArray[id].deselectIcon();
this.selectedIconsArray.splice(this.selectedIconsArray.indexOf(id), 1);
},
deselectAllIcons : function(){
var icons = Ext.apply([], this.getSelectedIconsIds());

for(var i = 0; i < icons.length; i++){
this.deselectIcon(icons[i]);
}
},
getSelectedIcons : function(){

var retArray = [];
var iconsIds = this.getSelectedIconsIds();
for(var i = 0; i < iconsIds.length; i++)
retArray.push(this.iconsArray[iconsIds[i]]);

return retArray;
},
getSelectedIconsIds : function(){

return this.selectedIconsArray;
},
moveMoreThenOneSelectedIcon : function(currentId, XY){

var selectedIcons = this.selectedIconsArray;
for(var i = 0; i < selectedIcons.length; i++){
if(currentId != selectedIcons[i])
this.moveIconTo(selectedIcons[i], XY, true)
}
},
moveIconTo : function(id, XY, animate){

this.iconsArray[id].moveIconTo(XY, animate);

},
getIconCoordsById : function(id){

if(this.iconsArray[id] != undefined)
return this.iconsArray[id];

return false;
},
SetIconsSortable : function(type){
this.autoSort = type;
this.initDesktopIconsConfiguration();
this.autoSort = !type;
},
checkForDeletedIcons : function(icons){

for( var i in icons ){
if(icons[i])
Ext.fly(icons[i].id).setStyle('display', 'none');
}
},
deleteIcon : function(id){
return this.iconsArray[id].deleteIcon();
},
addIcon : function(item){

var iconsArea = Ext.fly(this.desktopEl.replace('#', ''));
if(this.iconsArea)
iconsArea = iconsArea.child(this.iconsArea);

if(!item.IconsManager)
item.IconsManager = this;

this.iconsArray[item.id] = item instanceof Ext.ux.Desktop.Icon ? item : new Ext.ux.Desktop.Icon(item);
this.iconsArray[item.id].render(iconsArea);

this.fireEvent("iconAfterAdd", this, this.iconsArray[item.id]);
}
});
Ext.reg('desktopiconmanager', Ext.ux.Desktop.IconsManager);

[jay@moduscreate.com]

Awesome.

Seems that this requires Jquery or prototype.

[Bobrovnik]

yes, it requires jquery and jquery-ui because of drag&drop and selection, in next versions of this component I will try to rebuild it only using Extjs, but as far as I know drag&drop in Ext is poor and it will take some time to make such thing as jquery-ui thing for extjs.

[jay@moduscreate.com]

yes, it requires jquery and jquery-ui because of drag&drop and selection, in next versions of this component I will try to rebuild it only using Extjs, but as far as I know drag&drop in Ext is poor and it will take some time to make such thing as jquery-ui thing for extjs.

look at my blog post: http://www.extjs.com/blog/2009/09/13/5-steps-drag-and-drop-with-ext-js/

http://tdg-i.com/tmp/extjsblog/dnd_story.jpg

[Bobrovnik]

Yes, I have read this article before, as soon as posible I will rebuild this component to work only with Extjs drag&drop

[Bobrovnik]

look at my blog post: http://www.extjs.com/blog/2009/09/13/5-steps-drag-and-drop-with-ext-js/

http://tdg-i.com/tmp/extjsblog/dnd_story.jpg

Jay, could you give an advice, does extjs have something like this http://jqueryui.com/demos/selectable/ ? I used it for making desktop icons selectable

[jay@moduscreate.com]

No it does not :(

[mschwartz]

Ext.Element.toggleClass()
Ext.Element.addClassOnClick()
Ext.Element.addClassOnFocus()
Ext.Element.addClassOnOver()
Ext.Element.removeClass()

[jay@moduscreate.com]

@Michael,

You need to demo the selectable on the JQuery page, it includes a draggable box, etc, which Ext JS does not have OOTB.

[Bobrovnik]

Ext.Element.toggleClass()
Ext.Element.addClassOnClick()
Ext.Element.addClassOnFocus()
Ext.Element.addClassOnOver()
Ext.Element.removeClass()

Thanks for replay, mschwartz

[mschwartz]

I'm quite interested in this.

Looking at your code, I have one major suggestion. You should allow me to configure the context menu and various event handlers - like double click and a function to handle things being dropped on the icon.

Look at Windows' desktop. Right click on recycle bin has "empty recycle bin" menu item, drop icons on it does "delete" (move to trash) function. This is different from dragging an icon of an image file onto a paint program, which opens the paint program which opens the file.

Regards

[Bobrovnik]

I'm quite interested in this.

Looking at your code, I have one major suggestion. You should allow me to configure the context menu and various event handlers - like double click and a function to handle things being dropped on the icon.

Look at Windows' desktop. Right click on recycle bin has "empty recycle bin" menu item, drop icons on it does "delete" (move to trash) function. This is different from dragging an icon of an image file onto a paint program, which opens the paint program which opens the file.

Regards

Great idia, thanks. Start working it. Also, I have one question about code. I am extending my component of "function(){}", as I understand i is not very good.



Ext.ux.Desktop.IconsManager = Ext.extend(function(){}, {


Could you give some advise about it?

[Bobrovnik]

look at my blog post: http://www.extjs.com/blog/2009/09/13/5-steps-drag-and-drop-with-ext-js/

http://tdg-i.com/tmp/extjsblog/dnd_story.jpg

I have rebuild this component to use only Extjs drag&drop

[Bobrovnik]

- added dragging more then one icon on the desktop, and events:

iconSelected
iconDeselected
iconMove


- all jquery functionality replaced to extjs, so now this component does not requires jquery library

please view demo (http://bags-gallery.com.ua/stas/ext/examples/idesktop/desktop.html)

[BIS]

you have to make the selected "dragged" item the upper most z-index holder, {just a small css modification}, that in order to enable "visual" drop over

looks nice though, thumps up

[Bobrovnik]

you have to make the selected "dragged" item the upper most z-index holder, {just a small css modification}, that in order to enable "visual" drop over

looks nice though, thumps up


You are right, BIS, thanks for advice.

Also I have made some modifications. Now every icon can be configured, has it's own events, can be gropped on, I have made new example (http://bags-gallery.com.ua/stas/ext/examples/idesktop/removeicon.html) to show this.

http://bags-gallery.com.ua/stas/ext/examples/idesktop/removeicon.html

You can easily drop any icon on trash icon and it will be deleted. This thing and many others are made by adding events to every icon item.

If anyona has any more suggestions please write, some time later I will make documentation about this component.

[Alexey Demchenko]

Great work, Stanislav!

One spot I could find in DIM is no ability to save position of icons in cookie. Are you working on it?

[Bobrovnik]

Great work, Stanislav!

One spot I could find in DIM is no ability to save position of icons in cookie. Are you working on it?

In the first version of this component I have made cookie provider to save icons' position in cookies, but it was made only for test, to show the way how icons could be save. Later I came to that icons state is better to save in database, using different events for each icon or for icons manager generally like "iconMove". For example



desktopIconManager = new Ext.ux.Desktop.IconsManager({
items: [
new Ext.ux.Desktop.Icon({
icon: 'images/grid48x48.png',
listeners: {
iconMove : function(icon){

//here is some ajax qery to save icon's state
}
}
})
]
});

[paubach]

This jQuery example isn't included in this extJS example?

http://www.extjs.com/deploy/dev/examples/view/data-view.html

[Bobrovnik]

This jQuery example isn't included in this extJS example?

http://www.extjs.com/deploy/dev/examples/view/data-view.html

No, I am sure it is not

[Bobrovnik]

Documentation added http://code.google.com/p/extdim/w/list

[alienwebz]

Great work iv been looking through your code and I was wondering if you would be able to help implement dynamic rendering of the icons/shortcuts, based on user permissions in a db.

Or do you have plans for this in the future?

feel free to pm me if you are available to chat about this.

[coolstar]

I really like your extention, and it is working just fine, but one thing I noticed is that if you have a textbox(html, or extjs) in a window, and you try to click on it, or select text in it, it doesn't get the focus. Any ideas?

[Bobrovnik]

I really like your extention, and it is working just fine, but one thing I noticed is that if you have a textbox(html, or extjs) in a window, and you try to click on it, or select text in it, it doesn't get the focus. Any ideas?


Interesting question. Are you sure that it does not get the focuse only when you are using Desktop Icon Manager. Is there such bug without it?

[coolstar]

The bug is only when I use the Desktop Icon Manager. When I don't use it, the textbox gets the focus. I tried clicking ans dragging to select the text, and noticed that the focus was disrupted the the Desktop Icon Manager Multiselect.

[Bobrovnik]

I really like your extention, and it is working just fine, but one thing I noticed is that if you have a textbox(html, or extjs) in a window, and you try to click on it, or select text in it, it doesn't get the focus. Any ideas?

In last update bug is fixed. Please download new version

[chrizmaster]

Hi,

first, nice extension. useful and good implementation.

I have a feature request which I think make sense.

- add a property: delete:true or false (I have the case that not every icon at the desktop is allowed to be removed from it)
if the property above is false, there should be a visual hint if u drag the icon to the trash, that this action is not allowed.

- add a visual hint if u try to drag an icon to the trash, so that the user knows that it'll be delete if he drops it there.

What dow you think about this 2 features?
regards
christian

[chrizmaster]

no response? Are u still working on this?

[Bobrovnik]

Sorry for such long time before my reply. I have compite mess at my main job.

Suggested features are quite usefull, I think. But main think about this extention is icon manage on the desctop, first it was idia just to make some common tool to have draggable and selectable icons on the desktop. Basicly I made an example with trash icon just to show how many possibilities are there using this extention.

But these two features that you suggest can be done with wxisting functionality. And it is quite common case, for example I saw some applications that use Desktop Icon Manager extention but they do not have any trash icon.

So maybe it is better just to make new extention - "trash icon" and not implement this functions in core (Desktop Icon Manager) component? I find it more reasonable, for example maybe someone will need icon with comlitely different functions ( desktop widjet, etc. ).

What do you think about it?

[moegal]

Nice work!
I would really like to see the ability to preload or load the icon scripts on the fly. Maybe it can do this now. Each icon could have a property for preload true/false and multi-state button or identifier. If not preloaded and you double click on it it could display a loading message. It could make the application load faster. It might be nice to have delayed loading as well. The main desktop could load and then each icon could start loading behind the scenes if marked as such. A loading order might be nice as well, load grid1, then tab window, etc.

Thanks, Marty

[Bobrovnik]

Nice work!
I would really like to see the ability to preload or load the icon scripts on the fly. Maybe it can do this now. Each icon could have a property for preload true/false and multi-state button or identifier. If not preloaded and you double click on it it could display a loading message. It could make the application load faster. It might be nice to have delayed loading as well. The main desktop could load and then each icon could start loading behind the scenes if marked as such. A loading order might be nice as well, load grid1, then tab window, etc.

Thanks, Marty

Interesting idia. Do you know any examples of such preloading scripts on the fly? Maybe you can show some existing ExtJs component, for my better undestanding your idia?

[Bobrovnik]

Thanks you very much!!!!! I will try it. You can give me a user guide!!!!!

For now there are only classes documented - http://code.google.com/p/extdim/w/list

[mystix]

For now there are only classes documented - http://code.google.com/p/extdim/w/list

don't bother about that user. it was a spambot. i've banned it + removed its post + the corresponding spam links in your quoted reply.

[moegal]

Interesting idia. Do you know any examples of such preloading scripts on the fly? Maybe you can show some existing ExtJs component, for my better undestanding your idia?

Stanislav,

Just an idea at this stage. I would like the smallest download to get the user on the desktop and then on a user by user basis load the scripts that that user might need(in advance) based on past performance or by a list. I guess I see it working like loading a remote store with the loading indicator. Only I would like to see the icon with the loader if preloading or something like a modal pop-up to show loading on demand.

I see there is a loader class in extjs at http://www.extjs.com/deploy/dev/docs/?class=Ext.Loader

I know there i a remote loader extension but I am sure that can be done several ways.

Thanks, Marty

[chrizmaster]

Hey Mate,

sounds like a good idea to create a separate plugin for the trash icon. I by myself give my users the ability to delete files via a right click on this icon.
I thought with a standard option like delete :false/true, I could easily show/hide the delete entry from the context menu.

Any idea if you'll change your work to fit this needs or do u have to much to do?
Chriz

[Bobrovnik]

Hey Mate,

sounds like a good idea to create a separate plugin for the trash icon. I by myself give my users the ability to delete files via a right click on this icon.
I thought with a standard option like delete :false/true, I could easily show/hide the delete entry from the context menu.

Any idea if you'll change your work to fit this needs or do u have to much to do?
Chriz

I think I will implement "delete :false/true" feature on next weekends

[Bobrovnik]

Stanislav,

Just an idea at this stage. I would like the smallest download to get the user on the desktop and then on a user by user basis load the scripts that that user might need(in advance) based on past performance or by a list. I guess I see it working like loading a remote store with the loading indicator. Only I would like to see the icon with the loader if preloading or something like a modal pop-up to show loading on demand.

I see there is a loader class in extjs at http://www.extjs.com/deploy/dev/docs/?class=Ext.Loader

I know there i a remote loader extension but I am sure that can be done several ways.

Thanks, Marty

I think I have solution for your case, while system initialize just make ajax call on server, receive all icons configurations and then on response initialize Desktop Icon Manager with current configuration received from server. While ajax call it would be good to show loading mask.

This is very common solution when you do not mess server-side code with javascript

[moegal]

Stanislav,

This will load the entire desktop at once, right? That is not what I am looking for but thanks for your suggestion.

Marty

[Bobrovnik]

Stanislav,

This will load the entire desktop at once, right? That is not what I am looking for but thanks for your suggestion.

Marty

yes, desktop will be loaded once

[andre.lima]

Any chance to port this to GXT?

[Bobrovnik]

Any chance to port this to GXT?

Unfortunatelly I am not familliar with GXT

[Altair]

Привет! Отличный у вас компонент получился, я его сейчас привязываю к Portlet панели и заметил одну неувязочку.

Вы везде оперируете Left и Top свойствами CSS, но при этом в методе placeIcon используете для установки координат иконки el.moveTo, который устанавливает иконку относительно абсолютных координат. Т.е. оперируете относительными координатами, а устанавливаете в абсолютные. Из-за этого в случае если компонент, в котором находится IconManager смещен относительно начала координат - иконки ведут себя аномально, фиксируются не в тех координатах, где их бросили.

Чтоб это пофиксать я чуть подправил метод:



placeIcon: function (config) {
//.....
if (this.IconsGrid[config.iconY] && !this.IconsGrid[config.iconY][config.iconX]) {
//.....
el.setLeftTop(config.iconX * this.basicStyles.width, config.iconY * this.basicStyles.height);

[Bobrovnik]

да, согласен, просто этот компонент не предполагалось использовать за пределами "рабочего стола"

вот потому то и такой недочет,

спасибо большое за исправление, обязательно подправлю

[marcus78]

Hi,

I did download your code, and tried it. It works for desktop.html sample, but not for desktop2.html. All icons with this version are at the same position, one above the other.
I'm interested in using this version, as I want to get icons from items defined in sample.js.

Did I miss something ?
Thanks in advance.
Best regards.