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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi