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.

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 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