1. #1
    Ext JS Premium Member stever's Avatar
    Join Date
    Mar 2007
    Posts
    1,406
    Vote Rating
    6
    stever will become famous soon enough stever will become famous soon enough

      0  

    Default Desktop panel

    Desktop panel


    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?

    Code:
    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);
    	}
    });

    HTML Code:
    .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;
    }

  2. #2
    Sencha User galdaka's Avatar
    Join Date
    Mar 2007
    Location
    Spain
    Posts
    1,166
    Vote Rating
    -1
    galdaka is an unknown quantity at this point

      0  

    Default


    Live example?

    Thanks in advance,

  3. #3
    Ext User jadedgeek's Avatar
    Join Date
    Oct 2007
    Posts
    10
    Vote Rating
    0
    jadedgeek is on a distinguished road

      0  

    Default Floating Desktop

    Floating Desktop


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

    Code:
    			
    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
    Last edited by jadedgeek; 8 Oct 2007 at 9:56 AM. Reason: Clarification

  4. #4
    Ext JS Premium Member stever's Avatar
    Join Date
    Mar 2007
    Posts
    1,406
    Vote Rating
    6
    stever will become famous soon enough stever will become famous soon enough

      0  

    Default


    Try:

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

  5. #5
    Sencha User krycek's Avatar
    Join Date
    Jun 2007
    Posts
    96
    Vote Rating
    0
    krycek is on a distinguished road

      0  

    Default


    Code:
    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);

  6. #6
    Ext JS Premium Member stever's Avatar
    Join Date
    Mar 2007
    Posts
    1,406
    Vote Rating
    6
    stever will become famous soon enough stever will become famous soon enough

      0  

    Default


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

    Code:
    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);
    	
    });

  7. #7
    Ext User jadedgeek's Avatar
    Join Date
    Oct 2007
    Posts
    10
    Vote Rating
    0
    jadedgeek is on a distinguished road

      0  

    Default


    Are you doing that on purpose ...

  8. #8
    Ext JS Premium Member stever's Avatar
    Join Date
    Mar 2007
    Posts
    1,406
    Vote Rating
    6
    stever will become famous soon enough stever will become famous soon enough

      0  

    Default


    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.

  9. #9
    Ext User jadedgeek's Avatar
    Join Date
    Oct 2007
    Posts
    10
    Vote Rating
    0
    jadedgeek is on a distinguished road

      0  

    Default


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

    Quote Originally Posted by stever View Post
    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.
    Quote Originally Posted by jadedgeek View Post
    Are you doing that on purpose ...

  10. #10
    Ext User
    Join Date
    Aug 2007
    Posts
    32
    Vote Rating
    0
    onawave is on a distinguished road

      0  

    Default Can't get your code to run

    Can't get your code to run


    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:
    PHP Code:
    <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