Desktop panel

[stever]

I broke apart the desktop example to separate out the idea of applications/modules and the desktop window manager. As part of that, I removed the launcher, etc. Anyhow, here is the desktop window manager as a panel.

I have successfully put a portal in the desktop which sits behind the windows. Alternatively, I've put a desktop inside a portlet and dragged it around. I've done both at the same time, while also having a window up with a desktop in that, etc., etc. :D

I can't figure out one bug though -- every time I close a window there is an error (it is trying to stop listening on the window after it is already destroyed). Jack, can you provide any insight?


Ext.ux.Desktop = function(config)
{
config = Ext.apply(config || {},{
cls:'x-desktop',
bbar:[]
});
Ext.applyIf(config,{
layout:'fit'
});

Ext.ux.Desktop.superclass.constructor.call(this,config);
}

Ext.extend(Ext.ux.Desktop, Ext.Panel, {

initComponent : function(){
Ext.ux.Desktop.superclass.initComponent.call(this);
this.windows = new Ext.WindowGroup();
this.on('render',function(){
this.taskbar=this.getBottomToolbar();
this.taskbar.el.addClass('x-taskbar')
},this,{defer:50,single:true});
},

activeWindow:null,

minimizeWin: function(win){
win.minimized = true;
win.hide();
},

markActive: function(win){
if(this.activeWindow && this.activeWindow != win){
this.markInactive(this.activeWindow);
}
this.activeWindow = win;
Ext.fly(win.taskItem.el).addClass('active-win');
win.minimized = false;
},

markInactive: function(win){
if(win == this.activeWindow){
this.activeWindow = null;
Ext.fly(win.taskItem.el).removeClass('active-win');
}
},

removeWin: function(win){
win.taskItem.destroy();
},

createWindow: function(config, cls)
{
var win = new (cls||Ext.Window)(
Ext.applyIf(config||{}, {
manager: this.windows,
minimizable: true,
maximizable: true
})
);
win.render(this.body.dom);
win.taskItem = new Ext.ux.DesktopTaskBarItem(win);
this.taskbar.add(win.taskItem);

win.animateTarget = win.taskItem.el;
win.on('activate', this.markActive);
win.on('beforeshow', this.markActive);
win.on('deactivate', this.markInactive);
win.on('minimize', this.minimizeWin);
win.on('close', this.removeWin);
return win;
},

getManager: function(){
return this.windows;
},

getWindow: function(id){
return this.windows.get(id);
}

});
Ext.reg('desktop', Ext.ux.Desktop);

Ext.ux.DesktopTaskBarItem = function(win){
this.win = win;
Ext.ux.DesktopTaskBarItem.superclass.constructor.call(this, {
iconCls: win.iconCls,
text: win.title,
handler : function(){
if(win.minimized || win.hidden){
win.show();
}else if(win == win.manager.getActive()){
win.minimize();
}else{
win.toFront();
}
},
scope:this
});
};

Ext.extend(Ext.ux.DesktopTaskBarItem, Ext.Toolbar.Button, {
onRender : function(){
Ext.ux.DesktopTaskBarItem.superclass.onRender.apply(this, arguments);

this.cmenu = new Ext.menu.Menu({
items: [{
text: 'Restore',
handler: function(){
if(!this.win.isVisible()){
this.win.show();
}else{
this.win.restore();
}
},
scope: this
},{
text: 'Minimize',
handler: this.win.minimize,
scope: this.win
},{
text: 'Maximize',
handler: this.win.maximize,
scope: this.win
}, '-', {
text: 'Close',
handler: this.win.close,
scope: this.win
}]
});

this.cmenu.on('beforeshow', function(){
var items = this.cmenu.items.items;
var w = this.win;
items[0].setDisabled(w.maximized !== true && w.hidden !== true);
items[1].setDisabled(w.minimized === true);
items[2].setDisabled(w.maximized === true || w.hidden === true);
}, this);

this.el.on('contextmenu', function(e){
e.stopEvent();
if(!this.cmenu.el){
this.cmenu.render();
}
var xy = e.getXY();
xy[1] -= this.cmenu.el.getHeight();
this.cmenu.showAt(xy);
}, this);
}
});





.x-desktop {
width: 100%;
height: 100%;
border: 0 none;
position: relative;
overflow:hidden;
zoom: 1;
}


.x-taskbar .x-btn {
float: left;
margin: 2px 0 0 2px;
position:relative;
}

.x-taskbar button {
width: 150px;
overflow: hidden;
text-align: left;
color: #15428b;
}

.x-taskbar {
background: url(images/winbar-bg.gif ) #b9cbe1 repeat-x;
padding-top: 2px;
height:25px;
z-index:12001;
}

.x-taskbar .x-btn-left{
background:url(images/winbar-btn.gif) no-repeat 0 -189px;
}
.x-taskbar .x-btn-right{
background:url(images/winbar-btn.gif) no-repeat 0 -210px;
}
.x-taskbar .x-btn-center{
background:url(images/winbar-btn.gif) repeat-x 0 -231px;
}

.x-taskbar .x-btn-over .x-btn-left{
background:url(images/winbar-btn.gif) no-repeat 0 0;
}
.x-taskbar .x-btn-over .x-btn-right{
background:url(images/winbar-btn.gif) no-repeat 0 -21px;
}
.x-taskbar .x-btn-over .x-btn-center{
background:url(images/winbar-btn.gif) repeat-x 0 -42px;
}

.x-taskbar .x-btn-click .x-btn-left{
background:url(images/winbar-btn.gif) no-repeat 0 -63px;
}
.x-taskbar .x-btn-click .x-btn-right{
background:url(images/winbar-btn.gif) no-repeat 0 -84px;
}
.x-taskbar .x-btn-click .x-btn-center{
background:url(images/winbar-btn.gif) repeat-x 0 -105px;
}

.x-taskbar .active-win .x-btn-left{
background:url(images/winbar-btn.gif) no-repeat 0 -126px;
}
.x-taskbar .active-win .x-btn-right{
background:url(images/winbar-btn.gif) no-repeat 0 -147px;
}
.x-taskbar .active-win .x-btn-center{
background:url(images/winbar-btn.gif) repeat-x 0 -168px;
}
.x-taskbar .active-win .x-btn-center button {
color:#fff;
}

[galdaka]

Live example?

Thanks in advance,

[jadedgeek]

I would love to see a live example of this as well... to the uninitiated it can be a little confusing. I've managed to put a desktop inside of a window...



Ext.onReady(function(){
var win;

if(!win){
win = new Ext.Window({
layout:'fit',
width:680,
height:500,
plain: true,

items: new Ext.ux.Desktop({ //createWindows how ? })

});
}
win.show();
});


However I'm curious as to what you mean when you say...

...I have successfully put a portal in the desktop which sits behind the windows...

only because Id like to create that whole dashboard feel as well ;)

[stever]

Try:


new Ext.ux.Desktop({items:[{xtype:'portal'}]});

[krycek]

types[config.xtype || defaultType] is not a constructor
create(Object xtype=portal, "panel")ext-all-debug.js (line 12070)
createComponent(Object xtype=portal)ext-all-debug.js (line 13838)
lookupComponent(Object xtype=portal)ext-all-debug.js (line 13829)
add(Object xtype=portal)ext-all-debug.js (line 13751)
initComponent()ext-all-debug.js (line 13688)
initComponent()ext-all-debug.js (line 15287)
initComponent()portal.html (line 32)
Component(Object items=[1] cls=x-desktop bbar=[0] layout=fit)ext-all-debug.js (line 12120)
BoxComponent(Object items=[1] cls=x-desktop bbar=[0] layout=fit)ext-all-debug.js (line 13154)
apply()ext-base.js (line 9)
apply()ext-base.js (line 9)
Desktop(Object items=[1] cls=x-desktop bbar=[0] layout=fit)portal.html (line 26)
(no name)()portal.html (line 245)
fire()ext-all-debug.js (line 1495)
fireDocReady()ext-all-debug.js (line 1532)
[Break on this error] return new types[config.xtype || defaultType](config);

[stever]

A portal requires content I believe. I meant really to just use the portal example data. Here is some for kicks:




Ext.onReady(function(){

Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

// create some portlet tools using built in Ext tool ids
var tools = [{
id:'gear',
handler: function(){
Ext.Msg.alert('Message', 'The Settings tool was clicked.');
}
},{
id:'close',
handler: function(e, target, panel){
panel.ownerCt.remove(panel, true);
}
}];

var desktop2 = Ext.ComponentMgr.create({
xtype: 'desktop',
margins:'5 5 5 0',
border:true,
region:'center'
//,items:[portal]
},'panel');


var portal = {
xtype:'portal',
region:'center',
border:false,
margins:'5 5 5 0',
items:[{
columnWidth:0.33,
style:'padding:10px 0 10px 10px',
items:[{
title: 'Desktop in a Portlet',
layout:'fit',
tools: tools,
height:300,
items:[desktop2]
},{
title: 'Another Panel 1',
tools: tools,
html: '<br/>'
}]
},{
columnWidth:0.33,
style:'padding:10px 0 10px 10px',
items:[{
title: 'Panel 2',
tools: tools,
html: '<br/>'
},{
title: 'Another Panel 2',
tools: tools,
html: '<br/>'
}]
},{
columnWidth:0.33,
style:'padding:10px',
items:[{
title: 'Panel 3',
tools: tools,
html: '<br/>'
},{
title: 'Another Panel 3',
tools: tools,
html: '<br/>'
}]
}]
};

var desktop = Ext.ComponentMgr.create({
xtype: 'desktop',
margins:'5 5 5 0',
border:true,
region:'center'
,items:[portal]
},'panel');

var viewport = new Ext.Viewport({
renderTo:'yui-doc',
layout:'border',
items:[
{
region:'north',
id:'header',
height:50,
border:false,
html:"<h1>Application 3.0</h1>"
},
{
region:'west',
id:'west-panel',
title:'Control Panel',
split:true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
margins:'5 0 5 5',
cmargins:'5 5 5 5',
layout:'accordion',
layoutConfig:{
animate:true
},
items: [{
html: '<br/>',
title:'Dashboard',
autoScroll:true,
border:false,
iconCls:'nav'
},{
title:'Site Editor',
html: '<br/>',
border:false,
autoScroll:true,
iconCls:'settings'
}]
},
desktop
]
});

var createWindow = function(){
var win = desktop.getWindow('tab-win');
if(!win){
win = desktop.createWindow({
id: 'tab-win',
title:'Tab Window',
width:740,
height:480,
x:10,
y:10,
shim:false,
animCollapse:false,
border:false,
constrain:true,

layout: 'fit',
items:[
{
xtype:'desktop'
}
]
});
}
win.show();
}.defer(2000);

var createWindow2 = function(){
var win = desktop2.getWindow('tab-win2');
if(!win){
win = desktop2.createWindow({
id: 'tab-win2',
title:'Tab Window',
width:200,
height:200,
x:10,
y:10,
shim:false,
animCollapse:false,
border:false,
constrain:true,

layout: 'fit',
items:[
new Ext.TabPanel({
activeTab:0,

items: [{
title: 'Tab Text 1',
header:false,
html : '<p>Something useful would be in here.</p>',
border:false
},{
title: 'Tab Text 2',
header:false,
html : '<p>Something useful would be in here.</p>',
border:false
},{
title: 'Tab Text 3',
header:false,
html : '<p>Something useful would be in here.</p>',
border:false
},{
title: 'Tab Text 4',
header:false,
html : '<p>Something useful would be in here.</p>',
border:false
}]
})

]
});
}
win.show();
}.defer(2000);

});

[jadedgeek]

Are you doing that on purpose ... :-/

[stever]

What? The crazy window in a desktop in a portlet that is the backdrop of another desktop for an example? I was just trying to see if it worked. :)

[jadedgeek]

No.. my own stupidity 8-| I have to say thank you... it's a bish to tweak but it's definitely a nice mod.


What? The crazy window in a desktop in a portlet that is the backdrop of another desktop for an example? I was just trying to see if it worked. :)


Are you doing that on purpose ... :-/

[onawave]

Hello Stever,

I would love to be able to see your code run but I cannot get your example to work.

I get the error:
A[C.xtype || D] is not a constructor

when the page is loaded.

Here is my html:


<html>
<head>
<title>Just a test</title>
<!-- Standard CSS -->
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />

<!-- Custom CSS -->
<link rel="stylesheet" type="text/css" href="site/layout.css" />

<!-- Standard ExtJS -->
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="js/Portal.js"></script>

<!-- Custom ExtJS -->
<script type="text/javascript" src="site/layout2.js"></script>

</head>
<body>
<script type="text/javascript" src="js/examples.js"></script>
</body>
</html>


In layout2.js is the code from your post. Any help would be appreciated.

Thanks

[RichieRudez]

activeWindowCls: 'ux-desktop-active-win'

I was wondering if anybody could cast some light on little problem that i just can't seem to resolve, I have an outer glow on the "Active window" in a desktop layout and would like to remove the glow whether the window is active or not, however i don't seem to be able to find the class and wondered how to override this and make it transparent/invisible?



Many thanks in advance,

Rich