Start Menu for 2.0 Desktop

[mxracer]

Please visit www.qWikiOffice.com (http://www.qwikioffice.com) for latest updates.

Mar. 8th.

The desktop shortcuts are no longer limited to a single column. They self manage their positions based on the desktop height.

Files updated are

1. system/core/Desktop.js
2. system/core/Shortcut.js
3. resources/css/desktop.css


Feb. 22nd.

Version 0.7.1 is available.

See Blog (http://www.qwikioffice.com/blog/) for details. Release notes are on the download (http://qwikioffice.com/download.php) page.

Dec. 20th.

Updated DesktopConfig.js and App.js. There was a bug in the code. Sub sub menus, and so on, was not supported in the start menu. I updated App.js initStartMenu().
Taskbar wasn't being displayed properly in FF 3 Beta 2. Re-ordered the include statements to fix it.
Added code to App.js to prevent the backspace (history back 1) shortcut while in the desktop environment.
Updated Ext.ux.TaskBar.TaskButton in Taskbar.js. TaskButton's context menu now checks for window's maximizable and closable properties.
Worked on Vista theme, login.js and login.css.
Updated Preferences window with ability to set and save Auto Run apps.


Dec. 11th.

New directory structure
Db tables updated
Theme support added to Preferences module

View readme.txt in the zip file.

Desktop Config

Added a context menu for the Desktop.
Now all modules are passed into the initModules() method, which no longer adds them to the Start Menu. This allows modules to be initialized into the desktop without adding them to the Start Menu.
Modules are now added to the Desktops Context Menu, Start Menu and Quick Start in the initDesktopContextMenu, initStartMenu() and initQuickStart() method respectively. These methods use the desktopConfig object to add modules.
The DesktopConfig can be hard coded or passed in via json from the server.


Preferences Window

Dec. 11th. Theme support added.
Can set Taskbar transparency.
Wallpapers loading. Now saving to database.
Now saving to the database.
Hooked up the Preferences tool button in the Start Menu to open the Preferences window. Preferences window contains a West and Center panel. The center panel is loaded with a Checkbox Tree. The tree is is loaded with all apps, any that are currently in the Quick Start panel are checked.
Which apps appear in the Quick Start panel can be controlled by checking their items in the Quick Start tree. Code is in place that gathers all checked item id's when the Save button is clicked.


Misc.

Multiple code changes. Start Menu and Quick Start apps can now be either hard coded or passed in from json data.
Added Preferences window.
Added Start Menu config option: toolPanelWidth.
Added Jack's code improvements from his demo.
Can now add the Quick Start apps from local or remote data.
Tool items in the Start Menu are now buttons. I'll update the zip file once I've cleaned up the code.


To Do's


[Dec. 5th]Finish Preferences window. Hopefully this week.


Extensions:


Ext.ux.StartMenuTool, extends Ext.menu.Item
Ext.ux.StartMenu, extends Ext.menu.Menu
Ext.ux.Taskbar, extends Ext.util.Observable
Ext.Desktop, modified from Jack's demo


Features:


Start Menu.
Scrollable taskbar. I ported the tab scrolling code into the Taskbar.
Quick start panel with working menu button that appears if you resize the panel down so some of the buttons are hidden. The menu updates so only the hidden buttons are listed as items


Known Issues

FIXED :) The quick start panel is now working correctly in all the browsers I have. The bug in Opera and Safari was a simple CSS error on my part.
In IE 6, if you grab the split bar that is between the Quick Start panel and the Task Buttons Panel, you can only resize to the right, not the left. I'm not sure if this is a bug with Ext or if its my doing yet.


Browsers I have to test with

FF 2
IE 6
IE 7
Opera 9
Safari for Windows


http://qwikioffice.com/ExtJS-Demos/screenshot-13.png

[santoshrestha]

do you have a demo login info?

[jack.slocum]

That looks real nice!

[Foggy]

that looks awesome.
But if you want add some individual style to the start button, you can do something like this ;)

desktop.htm


<div id="x-desktop">
<div style="padding:15px;"></div>
</div>

<div id="x-windows">
<!-- this div contains the start menu -->
<div id="x-toolbar" style="float:left;"></div>
<div id="x-winlist" style="float:left;">
<div id="spacer"></div>
</div>
<div class="x-clear"></div>
</div>


desktop.css


/*
* Ext JS Library 2.0
* Copyright(c) 2006-2007, Ext JS, LLC.
* licensing@extjs.com
*
* http://www.extjs.com/license
*/

html, body {
font: normal 12px tahoma, arial, verdana, sans-serif;
margin: 0;
padding: 0;
border: 0 none;
overflow: hidden;
height: 100%;
}

img {
behavior: url("css/pngbehavior.htc");
}


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

#x-windows .x-toolbar {
border: 0 none;
background: 0 none;
width: 70px;
padding-right: 5px;
margin-right: 3px;
border-right: 1px solid #3A75BD;
}

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

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

#x-windows {
border-top: 1px solid #3A75BD;
background-color: #D5E2F2;
padding-top: 2px;
height: 26px;
position:relative;
z-index:12001;
}

#x-info {
float:right;
}

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

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

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

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

#spacer {
height: 25px;
float: left;
width: 0;
overflow: hidden;
margin-top: 2px;
}

.x-window-body p,.x-panel-body p {
padding: 10px;
margin: 0;
}

.x-window-body {
background:#fff;
}

.add {
background-image:url(../shared/icons/fam/add.gif) !important;
}
.option {
background-image:url(../shared/icons/fam/plugin.gif) !important;
}
.remove {
background-image:url(../shared/icons/fam/delete.gif) !important;
}
.save {
background-image:url(../shared/icons/save.gif) !important;
}


And maybe this small snippet could interest you. With this you could submit your form by pressing the enter Button in a Form Field ;)



function sendForm(e) {
if(e.getKey() == e.ENTER){
login.getForm().submit({
waitMsg:'&Uuml;berpr&uuml;fe Daten...',
// callback handler if submit has successed
success: doLogin,
// callback handler if submit has failed
failure: function() {
Ext.MessageBox.alert('Fehler', 'Ihre Login-Daten sind Fehlerhaft');
}
});
}
}
Ext.get('loginFormUserField').on('keydown', sendForm);/**/
Ext.get('loginFormPassField').on('keydown', sendForm);/**/
Ext.get('loginFormUserField').focus();

[mxracer]

Thanks guys!

Ok I set up this demo area. Remember its still a work in progress :) http://qwikioffice.com/desktop-demo/

Username: demo
Password: demo

I have added a Viewport in the x-windows div (not sure if this is the best way Jack?). So now the start button is in the west panel and the TaskbarItems are in the center panel. More to come.

Foggy. Thanks for the button styling.

[genius551v]

Wow man, really impressive!
tnks for sharing!....=D>

[JeffHowden]

Looks great. Any plans for how to account for when there are more items in the start bar at the bottom than will fit? Right now the Ext desktop example simply expands the height. Your example does not. Thoughts?

[mxracer]

Yeah thats the bad part of using the viewport to make the panels (west, center). Am I correct in thinking the viewport has to be a fixed height according to the CSS?

Haven't got a concrete answer for you.

I was thinking of using code to monitor the items and increase the height of the bar.

Or do like Vista and shrink the buttons down as the number increase, up to a point, and then turn similar buttons (apps) into a single button that opens a menu on click to select the app.

Any ideas yourself? Open to input.

Thanks.....Todd

[cluettr]

Awesome stuff dude... Fantastic menu.

Was going to point of what Jeff mentioned above but figured it's early 2.0 stuff. Also noticed that the responsiveness of the app slowed dramatically with each window I opened. BUT... the menu as I said looks great! Good work!

[mxracer]

Also noticed that the responsiveness of the app slowed dramatically with each window I opened.

I do notice the slowdown in IE 7, not Firefox. But this also happens with the 2.0 desktop demo: http://extjs.com/playpen/ext-2.0/examples/window/desktop.html

Its not because of the start menu.

Remember guys, this is a work in progress :)

[aconran]

Great work mxracer, that looks awesome :-D

Aaron

[Gunmen]

Looks very cool to me! B)

[ffzhuang]

I was thinking for do something like this long time ago, easy just though than done. Thanks for share idea. On main page, can add drag and drop etc. You can also get some idea from:

www.youos.com (http://www.youos.com)

[Foggy]

Hm, i thought a viewport is by standard rendered to the body element.
The resizable part for the start button, i would do with Ext.Resizable ;)

[dennis]

wow, Cool
Good Job. It's Great!

[spidergeuse]

Cant wait to see it live

[ernieofori]

Great inspiration for some more ideas... really cool

[mxracer]

Looks great. Any plans for how to account for when there are more items in the start bar at the bottom than will fit? Right now the Ext desktop example simply expands the height. Your example does not. Thoughts?

Ok I've been working a scrollable taskbar area for this. I used Jack's scrollable tabs as an example of how to do it.

I still have some tweeks to complete but it is working for the most part. Here is a screenshot. I'll post the link to a demo when its ready.

http://www.qwikioffice.com/ExtJS-Demos/qwikioffice-screenshot-2.png

[aconran]

Very nice! I gotta get on the 2.0 bandwagon soon, tons of cool features.

Aaron

[mystix]

@mxracer, just out of curiosity, are you experiencing any DOM leakage in 2.0 in IE6/7 as put up by @valera in this thread?
(his example references the ext-2.0 playpen which i'm inclined to believe hasn't been updated for some time so the leakage might not be a problem anymore, but nonetheless...)

here's a direct link to a flash video @valera put up illustrating the DOM leakage:
http://test.f-studio.info/nodes.html

[mxracer]

@mxracer, just out of curiosity, are you experiencing any DOM leakage in 2.0 in IE6/7 as put up by @valera in this thread?
(his example references the ext-2.0 playpen which i'm inclined to believe hasn't been updated for some time so the leakage might not be a problem anymore, but nonetheless...)

here's a direct link to a flash video @valera put up illustrating the DOM leakage:
http://test.f-studio.info/nodes.html

I haven't tested for DOM leakage.

[mxracer]

I have finished my Scrollable Taskbar. I'll upload it to my demo when I have time and post a link here.

[saad_miki]

i wish that i have anice copy of you great work
and i wish you continue your creativity
saad zaki
saad@egydo.com

[para]

One thing that I came across when using Ext's menu items is that the menu is closed when sub-menus are clicked. I have an XML file that defines my menus and their attributes, including handler functions. If there isn't a handler assigned (like in the case of submenus items) then I use the default handler, which is simply a 'noClose' function.


noClose: function() {
return false;
},


Simple solution to what I view as a problem.

Your work looks good. Keep it up!

[mxracer]

Thanks Para, I've added this.

[Lucian]

Very nice job!
I like the Scrollable Taskbar also...

[chrisesler]

Whether or not Safari is a targeted browser, I found a small bug.

When you resize either the browser window or the drag handle between start button and the taskbar list, the scrollable area gets locked into a smaller position so if you were to maximize the browser window (not the app window) the taskbar is clipped somewhat.

Minor problem, but just offering my observation.

Great extension nonetheless...

[mxracer]

Thanks for the alert. I don't have Safari and didn't know this. I've only been testing in Firefox 2, IE 7, and Opera 9.

Update

Ok I have downloaded Safari 3 for Windows and have hopefully fixed the bug. Please let me know if you find anything else.

Thanks.

[franklt69]

Hi, mxrace I was testing the demo in IE6 and appear wrong the start menu buttons, watch the attacment, I send a private message too.

regards
Frank

[mxracer]

Thanks for the alert. This is fixed now.

[franklt69]

now is work ok with IE6, mxracer could be possible to add some buttons (like toolbar Quick launch in windows) I mean left to start menu buttons?

regards
Frank

[Isaac_cm]

very good,
you can find standalone browsers to test your work on like safari, IE 6, etc..., press here (http://browsers.evolt.org/)

[mxracer]

Hi everyone. I've updated my original post. I have added an attached Zip file containing the desktop.

[franckxx]

Thx a lot for sources mxracer !!

[franklt69]

mxracer I download the desktop.zip and work ok, but with IE6 I get the error reported in:


Hi, mxrace I was testing the demo in IE6 and appear wrong the start menu buttons, watch the attacment, I send a private message too.

maybe it is don't update

regards
Frank

[mxracer]

Ok sorry about that. Since I have 2 projects for my desktop, the one I am actively working on, and the demo, I had forgot to update 2 files in the demo.

The zip file is now updated in 1st post.

[galdaka]

Live demo not work for me. IE6.

[mxracer]

Live demo not work for me. IE6.

Did you grab the Zip file I just updated earlier today? It is fixed in the updated file.

[chrisesler]

Ok sorry about that. Since I have 2 projects for my desktop, the one I am actively working on, and the demo, I had forgot to update 2 files in the demo.

The zip file is now updated in 1st post.

Thanks!! Excellent script!

[chrisesler]

After seeing this I got somewhat inspired after seeing the nice black glass taskbar and decided to try and expand the look into a new theme. I have a good start so far.

Anyways, I've been trying to get the shadow on the windows created to not be offset at the top. I've tried a few things in desktop.js to get the shadow to frame the window to give it a glow.



this.createWindow = function(config, cls){
var win = new (cls||Ext.Window)(
Ext.applyIf(config||{}, {
manager: windows,
minimizable: true,
maximizable: true,

/* MY CHANGE */
shadow: {mode:'frame'}
})
);
win.render(desktopEl);
win.taskButton = taskbar.addTaskButton(win);

win.cmenu = new Ext.menu.Menu({
items: [

]
});

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


The problem is that it defaults to "sides" without my change. When I do my change it basically does an offset. I would prefer it to be framed to give it a "glow" effect.

thanks in advance!

Here is a larger image for viewing: Picture 3.png (http://www.chrisesler.com/temp/Picture%203.png)

[mxracer]

Chrisesler,

I haven't worked with the shadow yet. It would be nice to do a glow effect with it though.
When I have time I'll start looking into it.

[oracio]

hi mxracer,

you've done a beautiful work. thanks for sharing it with us! =D>

the only thing is that there is a real slowdown in IE7 when you open lots of windows, something that doesnt appear in FireFox...have you noticed it yourself?

anyways, keep the good job!

[mxracer]

oracio,

The slow down was addressed in this post: http://extjs.com/forum/showthread.php?p=53821#post53821

[kitepad]

Hi,

It's very cool extension for ext 2.0. I have a minor problem when I try it.

ScrollBar is not visible, my scenario is :
1. Open a browser window in maximized.
2. Load desktop demo
3. Resize window to small

[tolstoj]

Hi mxracer
I'm looking into the taskbar.js and I am impressed of your work :)

However I wonder if it might be possible to use the bb: configuration option in a panel instead? Tried it and and it works fine as long as I define height and width of the panel instead of layout:fit.

Cheers
Thomas

[mxracer]

Hi,

It's very cool extension for ext 2.0. I have a minor problem when I try it.

ScrollBar is not visible, my scenario is :
1. Open a browser window in maximized.
2. Load desktop demo
3. Resize window to small

What browser are you using?

All the browsers I have (IE7, FF2, Opera 9, Safari for Windows) work fine for me.

[kitepad]

IE6

[mxracer]

Hi mxracer
I'm looking into the taskbar.js and I am impressed of your work :)

However I wonder if it might be possible to use the bb: configuration option in a panel instead? Tried it and and it works fine as long as I define height and width of the panel instead of layout:fit.

Cheers
Thomas

Not sure what the config option: bb is?

I'm not using layout: 'fit' in taskbar.js

[tolstoj]

No, the layout:'fit' was a dead end. Sorry to confuse you with that

I was just playing around with the Panel api and found that there is a "bottom-bar", hence the bb: option, instead of the tb: option. I guess tb is acronym for toolbar, but for me it will now stand for top-bar :D

Btw, as usual, I find the answer of my own questions right after i write them. To adjust height I simply add the onWindowResize event


function layout(){
panel.setHeight(Ext.lib.Dom.getViewHeight());
}
Ext.EventManager.onWindowResize(layout);

Cheers
Thomas

[trbs]

damn this looks very sweet :)

[mxracer]

Ok guys. I've updated the desktop with a new start button, it now is equal in height to the taskbar (XP style). You can check out the screen shot in post #1. The Zip file is updated.

[trbs]

Ok guys. I've updated the desktop with a new start button, it now is equal in height to the taskbar (XP style). You can check out the screen shot in post #1. The Zip file is updated.

sweet, looks great!

[yfzsj]

That`s nice!

[stever]

Ok guys. I've updated the desktop with a new start button, it now is equal in height to the taskbar (XP style). You can check out the screen shot in post #1. The Zip file is updated.

Very cool! What is the license?

[mxracer]

Very cool! What is the license?

No license. I'm just trying to do my part and support the Ext community.

[jay@moduscreate.com]

Very nice. Bravo!

[stever]

Well, it is very cool! Would be extra cool if it were converted into a panel like portal was. Then it would be easier to put it in a border layout, for example. But very cool indeed!

[trbs]

Time for us to wrap/write up the ECL ? ( Ext Community License )
Maybe like the LGPL or BSD/MIT style licenses, no warranties, no rights to relicense, open for the rest. (rights to redistribute / change code / use for own personal or commercial use)

[franklt69]

Hi mxracer, only to have some idea, because you know better the code, I wonder, will be possible:

1- to add a quick desktop bar side the start button?, it could be useful to minimize all windows and show the desktop.

2- In the desktop which will be better way to add some shortcut, using for instances Images with hotspot, or slice or add something like portal example, I mean panel and inside it shortcut to open x windows?

regards, and again good work, congratulations
Frank

[flatburger]

anyone test this in 2.0b1?

can give the steps?

[mxracer]

Hi mxracer, only to have some idea, because you know better the code, I wonder, will be possible:

1- to add a quick desktop bar side the start button?, it could be useful to minimize all windows and show the desktop.

2- In the desktop which will be better way to add some shortcut, using for instances Images with hotspot, or slice or add something like portal example, I mean panel and inside it shortcut to open x windows?

regards, and again good work, congratulations
Frank

1. I'm playing around with the quick launch panel now.

2. Jack added the desktop to the examples folder in beta release and he has added Desktop Icons. Not sure if this is what your hoping for?

[jay@moduscreate.com]

yeah dude this is huge! your work got it a mention on ajaxian.com!

[mxracer]

Thats so cool!


yeah dude this is huge! your work got it a mention on ajaxian.com!

[franklt69]

very useful the quick launch panel, maybe you can set a button to minimize all windows, I mean show desktop
App.getDesktop().getManager().hideAll();
or several button to switch desktop like in linux, about the shortcut in the new demo I like it too, and congratulations mxracer I think your demo is a good example, was good that Jack added it to examples folder.

regards
Frank

[mxracer]

very useful the quick launch panel, maybe you can set a button to minimize all windows, I mean show desktop
App.getDesktop().getManager().hideAll();
or several button to switch desktop like in linux, about the shortcut in the new demo I like it too, and congratulations mxracer I think your demo is a good example, was good that Jack added it to examples folder.

regards
Frank

Thanks Frank. I am working on the quick start/launch panel now and plan on added the show desktop button.

Here is a screen of what I have so far. The new panel is added beside the start button and I have a few buttons added as well. I'm working on the management of the buttons next.

http://qwikioffice.com/ExtJS-Demos/screenshot-2.png

[franklt69]

Very cool, is a dream, if you add a tray icon bar, is will be idem to windows.
let me know when the sample code is update to play with quick launch panel

regards
Frank

[twhite56]

Wonderful work with the quick launch..looks great.

[DragonFist]

I love this.

One thing regarding the latest demo up at the link, the button that shows when quick buttons are hidden gives errors of "too much recursion" and doesn't work.

Can't wait to see what's you do next with this. I am using an earlier version in a project I am working on and I think this gives a great theme to the app.

[mxracer]

What browser are you getting the error: "too much recursion"?

Everything is working in the browsers I have: IE 7, FF2, Opera 9, Safari for Windows.

I don't have the handler hooked up yet for the menu button that appears when quick start buttons are hidden. So it isn't going to do anything yet.

I need to work on the code that dynamically builds the menu to show items who's buttons are hidden.


I love this.

One thing regarding the latest demo up at the link, the button that shows when quick buttons are hidden gives errors of "too much recursion" and doesn't work.

Can't wait to see what's you do next with this. I am using an earlier version in a project I am working on and I think this gives a great theme to the app.

[mxracer]

One thing at a time Franklt69 :)


Very cool, is a dream, if you add a tray icon bar, is will be idem to windows.
let me know when the sample code is update to play with quick launch panel

regards
Frank

[JeffHowden]

One thing at a time? I think it needs developer-defined window grouping, ala xp/vista, as well. ;)

[mxracer]

You heard me. One thing at a time Jeff ;)

But seriously... I agree that grouping is needed.


One thing at a time? I think it needs developer-defined window grouping, ala xp/vista, as well. ;)

[DragonFist]

What browser are you getting the error: "too much recursion"?

Everything is working in the browsers I have: IE 7, FF2, Opera 9, Safari for Windows.

I don't have the handler hooked up yet for the menu button that appears when quick start buttons are hidden. So it isn't going to do anything yet.

I need to work on the code that dynamically builds the menu to show items who's buttons are hidden.

I tried it in both in IE7 and FF2. But this was on the button that you have no handler on yet so this is probably the reason.

BTW, I want to make clear how absolutely cool this is. While I think a browser based OS is not very practical, providing an OS styled environment goes a long way toward providing an environment in which the use can feel familar.

And that can help a lot with app design and acceptance.

Thanks again.

[tomautobahn]

Sometimes you want focus to go to a Field in the window, or let's say you clicked directly on the Field in a window (say a textfield), currently the focus goes away to the window instead.

Here's how to get around this:

In desktop.js, to function markActive(win), add these lines to the end:

if (win.focusElement) {
win.focusElement.focus.defer(100, win.focusElement);
}

Set win.focusElement to point to the field that should get focus.

Best,

Tom

[mxracer]

Hi everyone.

You can check out post 1 for updates on the Quick Start panel. I need to get it working correctly in Opera 9 and Safari. Its working in IE 7 and FF 2.

[sorcerys]

I like !!!
Is possible to create a clock with systray ... like windows .. in this desktop ?!?!

[webchetan]

Hi - Thats awesome piece of work. Can I integrate ASP.NET 2.0 application for EXT JS Desktop?

In short I mean can I have ExtJS work with ASP.NET 2.0 application.

Thanks
- webchetan

[jay@moduscreate.com]

the front end with http + Javascript has no relation to which backend software you use. Anything that communicates via the standard HTTP protocols will work.

so in short the answer is yes.

[mxracer]

I am planning on adding a panel on the right of the Task Buttons Panel that you could put anything you want in.


I like !!!
Is possible to create a clock with systray ... like windows .. in this desktop ?!?!

[mxracer]

Check out post 1 for updates. This bug with Opera 9 and Safari is fixed.


Hi everyone.

You can check out post 1 for updates on the Quick Start panel. I need to get it working correctly in Opera 9 and Safari. Its working in IE 7 and FF 2.

[Thomas_K]

hmm i have problems when i try to include a tree in a desktopwindow.
If i insert the tree and add "nav.root.expand(true, false, '');" to expand the tree.. no problem the first time i open the window.

Now i drag it and click again on the icon, i get a js error:

C has no properties ---> ext-all.js (line 104)
[Break on this error] Ext.tree.TreeNodeUI=function(A){this.node=A;this.rendered=false;this.animating=f...

[mxracer]

You might want to post to the Premium Help thread with this problem. This thread is for the Start Menu and Taskbar.

The only thing I can offer is for you to check out how the tree is added to the Accordion Window in the demo. It's not giving me any problems, but I believe the root of the tree is hidden in this case, so who knows.


hmm i have problems when i try to include a tree in a desktopwindow.
If i insert the tree and add "nav.root.expand(true, false, '');" to expand the tree.. no problem the first time i open the window.

Now i drag it and click again on the icon, i get a js error:

C has no properties ---> ext-all.js (line 104)
[Break on this error] Ext.tree.TreeNodeUI=function(A){this.node=A;this.rendered=false;this.animating=f...

[Thomas_K]

sorry diden't realize! :)

[sturdypine]

we hope you add some shortcuts in the wallpaper of desktop at next time...

[mxracer]

Jack has already done this. I'll add the improvements Jack has made, to this desktop as soon as I can.


we hope you add some shortcuts in the wallpaper of desktop at next time...

[HarryC]

Can you add Doom to this?

Seriously, great work, one of the best examples I've seen with ExtJS. Another year and half the web will be coded in ExtJS if people keep coming up with things like this.

Anyway, playing around with the new code (14-10) and the quick launch icons. I can see you're just using the same icons that you have in the 'start menu', I assume you'll be extending this next to be configurable as it seems unnecessary having the same windows opening from two different points. Or am I missing how to have different windows in there?

[mxracer]

What I do need to work on is the config of what apps are listed where. Also to allow the user to manage it.


Can you add Doom to this?

Seriously, great work, one of the best examples I've seen with ExtJS. Another year and half the web will be coded in ExtJS if people keep coming up with things like this.

Anyway, playing around with the new code (14-10) and the quick launch icons. I can see you're just using the same icons that you have in the 'start menu', I assume you'll be extending this next to be configurable as it seems unnecessary having the same windows opening from two different points. Or am I missing how to have different windows in there?

[codaine]

Hey,

Great job. I've been playing around with it but couldn't get a new module registered only at a specific location in a second sub menu (Say, programs->examples->blabla window).

Can you provide me with an example please?

Thanks

[HarryC]

What I do need to work on is the config of what apps are listed where. Also to allow the user to manage it.

That's what I thought. Was just making sure I'd not missed something and that this was something you were still working on. Good luck, I'm really impressed with this.

[koffdsa]

hi all:
in plugins.js file we can create some codes like this as a plugin to add in our application.

Plugin.GridWindow = Ext.extend(Ext.app.Module, {
init : function(){
this.launcher = {
text: 'Grid Window',
iconCls:'icon-grid',
handler : this.createWindow,
scope: this
}
},

createWindow : function(){
var desk = new Ext.app.App();
var desktop = desk.getDesktop(); //Please notice two lines codes
// var desktop = this.app.getDesktop();
var win = desktop.getWindow('grid-win');
if(!win){
win = desktop.createWindow({
id: 'grid-win',
title:'Grid Window',
width:740,
height:480,
x:10,
y:10,
iconCls: 'icon-grid',
shim:false,
animCollapse:false,
constrainHeader:true,

layout: 'fit',
items:
new Ext.grid.GridPanel({
border:false,
ds: new Ext.data.Store({
reader: new Ext.data.ArrayReader({}, [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]),
data: Ext.grid.dummyData
}),
cm: new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
{id:'company',header: "Company", width: 120, sortable: true, dataIndex: 'company'},
{header: "Price", width: 70, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{header: "Change", width: 70, sortable: true, dataIndex: 'change'},
{header: "% Change", width: 70, sortable: true, dataIndex: 'pctChange'},
{header: "Last Updated", width: 95, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
]),

viewConfig: {
forceFit:true
},
//autoExpandColumn:'company',

tbar:[{
text:'Add Something',
tooltip:'Add a new row',
iconCls:'add'
}, '-', {
text:'Options',
tooltip:'Blah blah blah blaht',
iconCls:'option'
},'-',{
text:'Remove Something',
tooltip:'Remove the selected item',
iconCls:'remove'
}]
})
});
}
win.show();
}
});
this two lines code

var desk = new Ext.app.App();
var desktop = desk.getDesktop();
i think it's equal the var desktop = this.app.getDesktop(); because this,scope is Ext.app.App.so it's can create accordion plugin by this two ways,but the former codes i created has some extreamly errors,open many windows when i click the accordion item many times,the opened plugin in taskbar will lay lower than the former lie with the same plugin.but use the later code var desktop = this.app.getDesktop();,nothing error is happened.how can i do?does everyone help me?thanks

[potdarko]

Hello,
first of all, thank you very much for this contribution. Is anyone trying to enable multiselect on the taskbar with Cascade/Tile options on contextmenu?

[webchetan]

the front end with http + Javascript has no relation to which backend software you use. Anything that communicates via the standard HTTP protocols will work.

so in short the answer is yes.

Thanks djliquidice - Btw how do I populate the ExtJS Grid with SQLDatasource. I saw one example which populates using XML file. Can it be done using SQL/ASP.NET Dataset?

Would appreciate your reply. :)

Thanks

[Venkateswara Rao]

It looks very great

[coolcourt]

Hello, id like to apologize for not finding this thread and giving you guys your proper respect. Thanks to this thread and you guys contributions I really grasped the whole concept of how a few things work within the framework and I hope this alone takes my skill to a higher level and essentially make me a better designer overall. Thanks a lot and keep up the good work.

[kk_kkk]

hi, it's a nice work.

but what do y think about to finish the login and logout function , like this page.http://www.pazor.com/Clients/GoogleDesktop/Files/examples/window/desktop.html

in many project , different stuff meets the different fuction according the user manager.

like the the link above shows .

or would you describe that how to do that. sorry for my bad javascript knowledge!!

any way , thanks !

[jobobjet]

I do not mean to be presumptuous but if I may make a very small code change recommendation to TaskBar.js for "this.cmenu.on('beforeshow',...)"


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);
items[2].setDisabled(w.maximizable === false); //JH -
items[3].setDisabled(w.closable === false); //JH -
}, this);
The first line identified with '//JH -' will prevent a js error if a window is not maximizable by configuration and Maximize is selected in the taskbar context menu.

The second line identified with '//JH -' will prevent closing a window via the taskbar context menu if the window has been configured to be not closable.

[mxracer]

Thanks for the suggestions guys. I've been pretty busy this week, so I haven't had time to look into them yet.

[Danz]

The desktop application is coming along nicely.

Maybe integrate something like this to the desktop icons where you can drag the icon and move it anywhere within the desktop or highlight several icons and right click them to do something? ;)

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

[kk_kkk]

Hi ,everyone, maybe there is a bug in ext20_beta1 version .

After changing the desktop.html to desktop.jsp , I put them to the tomcat and start the tomcat server. When I try to visit the desktop.jsp like this : h ttp://10.5.101.10:8080/easyStruts/js/kkx/desktop/desktop.jsp
I find , There is one error like pic1 and pic2.



And ,The same thing will not happen in the ext-2.0-alpha1 version

So, any guys know what’s wrong ?

Kk_kkk

Thanks!

[pppuuu1003]

Hi...mxracer
I wanna ask one question...
How to update the file "default.html" to link up Ext code?
Please tell me the answer...thx

[sturdypine]

would you like to introduce fish eyes to next version? just like Apple Macintosh.
oh. it will be more fantastic.
I guess nobody will be not shocked...

[mxracer]

I have heard from others that they were having problems with ext20_beta1 (not desktop related). You may want to switch back to using alpha1 until the next version is ready.

[QUOTE=kk_kkk;76984]Hi ,everyone, maybe there is a bug in ext20_beta1 version .

After changing the desktop.html to desktop.jsp , I put them to the tomcat and start the tomcat server. When I try to visit the desktop.jsp like this : h ttp://10.5.101.10:8080/easyStruts/js/kkx/desktop/desktop.jsp
I find , There is one error like pic1 and pic2.



And ,The same thing will not happen in the ext-2.0-alpha1 version

So, any guys know what

[mxracer]

Once you open default.html in your editor you should see the following at line 7:



<!-- EXT -->
<link rel="stylesheet" type="text/css" href="../../Documents/Web/Ext/2.0-10-15-07/resources/css/ext-all.css" />
<script type="text/javascript" src="../../Documents/Web/Ext/2.0-10-15-07/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../Documents/Web/Ext/2.0-10-15-07/ext-all.js"></script>


Replace:


../../Documents/Web/Ext/2.0-10-15-07/

with the path to your copy of Ext (starting from the location of default.html).


Hi...mxracer
I wanna ask one question...
How to update the file "default.html" to link up Ext code?
Please tell me the answer...thx

[franklt69]

Hi, mxracer, is there any way to add a ToolTip to the buttons in the initQuickStart ?

regards
Frank

Sorry: I added to this.launcher = { tooltip: 'atooltips',} and work

[franklt69]

Hi I am playing with the desktop.html example, it have on desktop icons with the size 48x48, in the start menu the icons are 16x16, so someone know about the a library (freeware or shareware) where the same icon with different size appear ok in the start menu and desktop?

it have good icons freeware http://www.famfamfam.com/lab/icons/silk/ with size 16x16 but I don't found the same 48x48

from here http://www.iconshock.com/professional-icons.php I download the demo it have the same icon with different size, but the icon 48x48 on desktop look ok but the 16x16 don't look ok in the start menu, so any help is welcome.

regards
Frank

[Gunmen]

Cool!

Where is the time/clock? :-?
(would be nice when running website in full screen mode)

[kevin.kga]

Dude cool app. I'd like to extend it a bit to provide complete your examples. I've started work on the IM application in there and I plan to have something ready within 7 days. I'll keep you posted. I think there's a lot of potential for product application for the x-windows stuff you did. Way to go.


-Kevin

[mscdex]

I'm looking to make (or make use of, if such a thing exists already) a window manager toolbar like that of the one in this example. Is there an example that has just the taskbar separate from the rest of the modules (e.g. no desktop, start menu, quick launch)?

[mxracer]

I don't have an example set up with just the taskbar. It shouldn't be too difficult for you to seperate out (depending on your coding experience).


I'm looking to make (or make use of, if such a thing exists already) a window manager toolbar like that of the one in this example. Is there an example that has just the taskbar separate from the rest of the modules (e.g. no desktop, start menu, quick launch)?

[mxracer]

I'd like to check out the IM app :)


Dude cool app. I'd like to extend it a bit to provide complete your examples. I've started work on the IM application in there and I plan to have something ready within 7 days. I'll keep you posted. I think there's a lot of potential for product application for the x-windows stuff you did. Way to go.


-Kevin

[Eugenio]

Hi I am playing with the desktop.html example, it have on desktop icons with the size 48x48, in the start menu the icons are 16x16, so someone know about the a library (freeware or shareware) where the same icon with different size appear ok in the start menu and desktop?

it have good icons freeware http://www.famfamfam.com/lab/icons/silk/ with size 16x16 but I don't found the same 48x48

from here http://www.iconshock.com/professional-icons.php I download the demo it have the same icon with different size, but the icon 48x48 on desktop look ok but the 16x16 don't look ok in the start menu, so any help is welcome.

regards
Frank

I am new here, so don't know if that has been posted before, but you can try this URL for a set of icons for applications, desktops, etc.

http://tango.freedesktop.org/Tango_Icon_Library

PNG and SVG version, and quite good.

[mxracer]

I've made a small update to the start menu. Check out my original post for details.

F.Y.I.

More updates coming.

[benny]

wonderful work mxracer :)

I've been working with the version which came as an example app in version2-beta1. I've made a few changes to the sample.js file (created my own menu and submenu options [generated via PHP]). Would it be straightforward to use your latest example without changing my sample.js file? or have you made some structural changes throughout?

Sorry, a separate question... Is there anyway to create a shortcut on the desktop window which will call a sub-menu item?

many thanks.

[mxracer]

wonderful work mxracer :)

I've been working with the version which came as an example app in version2-beta1. I've made a few changes to the sample.js file (created my own menu and submenu options [generated via PHP]). Would it be straightforward to use your latest example without changing my sample.js file? or have you made some structural changes throughout?

Sorry, a separate question... Is there anyway to create a shortcut on the desktop window which will call a sub-menu item?

many thanks.

I have now updated my code with Jack's improvements from the Ext desktop demo. I do have additional code, such as the Quick Start panel.

But if your code works with the example from version2-beta1 I'm thinking it should work with mine?

As for adding a menu to a desktop shortcut. I haven't looked into it yet.

[Ytorres]

Great job ! :)

Could you give me an example on how open, for example, "window 6" when you click on "Add Something" inside "Grid window" ?

I have done this but "window 6" doesn't appear in TaskBar....

[mxracer]

Great job ! :)

Could you give me an example on how open, for example, "window 6" when you click on "Add Something" inside "Grid window" ?

I have done this but "window 6" doesn't appear in TaskBar....

http://www.qwikioffice.com/desktop-demo/ has been updated to demonstrate this solution.

What I am doing if I want to be able to open a certain type of app, or specific app from the toolbar is this.

1st, you can give your app's a unique "id" or "appType" as such:



MyDesktop.TabWindow = Ext.extend(Ext.app.Module, {
appType: 'tab-window',
id: 'tab-win',

...


2nd, in your createWindow method add the line in the blue font:



createWindow : function(){
var desktop = this.app.getDesktop();
var win = desktop.getWindow('grid-win');

if(!win){
var tabWinLauncher = MyDesktop.getModule('tab-win').launcher;

win = desktop.createWindow({


Now, when you build your toolbar add the code in the blue font:



tbar: [{
text:'Add Something',
tooltip:'Add a new row',
iconCls:'add'
}, '-', {
text:'Options',
tooltip:'Blah blah blah blaht',
iconCls:'option'
},'-',{
text:'Remove Something',
tooltip:'Remove the selected item',
iconCls:'remove'
},'-',{
text: 'Open Tab Window',
handler: tabWinLauncher.handler,
scope: tabWinLauncher.scope,
iconCls: tabWinLauncher.iconCls
}]


This is not the only solution. Just one solution. Hope it helps.

[Ytorres]

Thanks a lot :)

Very cool stuf !

[leveille]

Awesome work mxracer. Very slick.

[sam.ds.chen]

Hi,
It's pretty cool with quickstarts.
I think maybe we need to add one more quickstart, that is, "Show Desktop", to make it seem like the OS more ;)
So I appended some code inside the initQuickStart function:
---------------------------------------------------------
initQuickStart : function(ms){
// the first 4 modules can be quickstarts
for(var i = 0, len = 4; i < len; i++){
var m = ms[i];
this.desktop.taskbar.addQuickStartButton(m.launcher);
m.app = this;
}

// Code added by Sam Chen on 11/12/2007 16:58 ==>
// Just to make it more like the OS
var _desktop = this.desktop;
var _winNames = ["layout-win","grid-win","tab-win","acc-win","bogus1","bogus2","bogus3","bogus4","bogus5","bogus6"];
this.desktop.taskbar.addQuickStartButton(
{text:'Show Desktop',
iconCls: 'show-desktop',
handler:function(){
//alert('Show desktop!');
for (i=0,len=_winNames.length;i<len;i++) {
var win = _desktop.getWindow(_winNames[i]);
if (win) {
win.hide();
}
}
}
}
);
// Code added by Sam Chen on 11/12/2007 16:58 <==

...
---------------------------------------------------------

-- Sam Chen

[ThorstenSuckow]

Great stuff, mxracer. Love the latest changes you made to it. Can't wait to play around with it!

[franckxx]

Hi MXRacer,

Thx for your nice appz !

How can i open MAXIMIZED WINDOWS from start menu ?

thx for all !!

[Ytorres]

http://www.qwikioffice.com/desktop-demo/ has been updated to demonstrate this solution.

What I am doing if I want to be able to open a certain type of app, or specific app from the toolbar is this.

1st, you can give your app's a unique "id" or "appType" as such:
[...]

This is not the only solution. Just one solution. Hope it helps.

Yes, it does :)

Could you add a configuration option, so a plugin does not appear in the startMenu ?

[mxracer]

Yes, it does :)

Could you add a configuration option, so a plugin does not appear in the startMenu ?

I would just keep the plugin out of the getModules() method. If it isn't listed in there it won't be added to the Start Menu.

Do you just want a plugin that you invoke from another plugin? Could do something like this:



openDetailWindow : function(cId, cName){
....

var win = new Plugin.ContactDetailView();
detailWin = win.createWindow(cId, cName);
}

[mxracer]

Hi MXRacer,

Thx for your nice appz !

How can i open MAXIMIZED WINDOWS from start menu ?

thx for all !!

I'll have to look into it. Wonder if its already built in.

[kamelus]

Hi MXRacer,

Thx for your nice appz !

How can i open MAXIMIZED WINDOWS from start menu ?

thx for all !!

Before i want to congratulate MXRACER for this great application
well to answer to your question here what i have done to maximize a window when it's open



createWindow : function(src){
var desktop = this.app.getDesktop();
var win = desktop.getWindow('bogus'+src.windowId);
if(!win){
win = desktop.createWindow({
id: 'bogus'+src.windowId,
title:'Consultation',
//width:640,
//height:480,
html : "<iframe style='width:100%;height:100%' src='http://localhost/Ajax/ext/cabinet2/consultation.asp'></iframe>",
iconCls: 'bogus',
shim:false,

animCollapse:true,
constrainHeader:true
});
}

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


you can use also

win.minimize();

to minimize the window

its work for me

I hope this will be help full for you

[Ytorres]

openDetailWindow : function(cId, cName){
....

var win = new Plugin.ContactDetailView();
detailWin = win.createWindow(cId, cName);
}


when i try this, i have a problem with the scope for Plugin.ContactDetailView....


this.app has no properties
var desktop = this.app.getDesktop();

[clarkee]

I have opened a window from a desktop shortcut. The window contains an iframe with some other page in it.

I want this new page to be able to open windows on the desktop. Can this be done? :-/

eg, there is an authentication page in the iframe, once authenticated i want another window to open and be able to populate the 'start menu' with items.

Any help?

[mxracer]

when i try this, i have a problem with the scope for Plugin.ContactDetailView....


this.app has no properties
var desktop = this.app.getDesktop();


I am assuming the calling plugin was added to the Start Menu? It is within the initModules() of App.js that the app is assigned to each module/plugin, as shown here:



initModules : function(ms){
for(var i = 0, len = ms.length; i < len; i++){
var m = ms[i];
this.launcher.add(m.launcher);
m.app = this;
}
}


Try this. Pass in the app from the calling plugin.



openDetailWindow : function(cId, cName){
....

var win = new Plugin.ContactDetailView();
detailWin = win.createWindow(this.app, cId, cName);
}


Then you can.



createWindow : function(app, cId, cName){
this.app = app;

[mxracer]

I have opened a window from a desktop shortcut. The window contains an iframe with some other page in it.

I want this new page to be able to open windows on the desktop. Can this be done? :-/

eg, there is an authentication page in the iframe, once authenticated i want another window to open and be able to populate the 'start menu' with items.

Any help?

You can communicate between a browser window and an iframe it contains with javascript. Do a google search on it.

But this raises a problem. Do you want any web page loaded into an iframe to have the ability to manipulate your desktop?

[franckxx]

From Kamelus :


win.maximize();
to maximize the window

its work for me

I hope this will be help full for you[/QUOTE]

-----------------------------------------------------------------------------------

Hi Camelus,

I've try to win.maximize();,
My maximised windows works great but, when i click here :

http://img214.imageshack.us/img214/5687/42831983ed9.jpg

I've a bug with my windows... like this :

http://img20.imageshack.us/img20/8453/13237886da9.jpg

But, when i try to resize, it's work...

Anyone have solution to resolve this bug !!

Thx for all !!

[liusyan]

oh,this's real nice

[nithhy2003]

Hi all,
I am using ext-2.0-beta1. When I try to open desktop.html directly, entire thing works fine. When I try to open it through apache, it shows me object required error (which I could see by clicking on the status bar)...and taskbar fails loading... What could be the possible reason?
Thanks in advance

[JeffHowden]

Hi all,
I am using ext-2.0-beta1. When I try to open desktop.html directly, entire thing works fine. When I try to open it through apache, it shows me object required error (which I could see by clicking on the status bar)...and taskbar fails loading... What could be the possible reason?
Thanks in advance
Your path to ext-all.js is incorrect, most likely.

[clarkee]

You can communicate between a browser window and an iframe it contains with javascript. Do a google search on it.

But this raises a problem. Do you want any web page loaded into an iframe to have the ability to manipulate your desktop?

Not any more. I've found another solution to this problem... but I have another question now!

Can I add items to the menu after the page has been built? Some method to add items would be cool - is there one? ~o)

[clarkee]

Hi all,
I am using ext-2.0-beta1. When I try to open desktop.html directly, entire thing works fine. When I try to open it through apache, it shows me object required error (which I could see by clicking on the status bar)...and taskbar fails loading... What could be the possible reason?
Thanks in advance

Check the html include for desktop.js and change the case of the 'd' in the filename or in the html to make sure it's the same. Ran into this myself too :)

[nithhy2003]

Check the html include for desktop.js and change the case of the 'd' in the filename or in the html to make sure it's the same. Ran into this myself too :)

Thats correct... thanks clarkee.. Its really crazy =D>

Thanks JeffHowden!

[dizelland]

is it possible put the start menu with task bar on the top? How to do this?

[clarkee]

erm, edit desktop.html and move the task bar divs nearer the top.... i dont know about getting the menu to render below the bar though...

[franckxx]

is it possible put the start menu with task bar on the top? How to do this?

Hi all,

I think it can be great to make start menu and taskbar in top too !

But no success, when i move the taskbar on top, i loose my start menu...

[dizelland]

yes right, menu on the top doesn't work. maybe someone can show the code of worked top menu.

[mxracer]

yes right, menu on the top doesn't work. maybe someone can show the code of worked top menu.

You need to modify the "menuAlign" config option for the startBtn in Taskbar.js



this.startBtn = new Ext.Button({
text: 'Start',
id: 'ux-startbutton',
iconCls: 'start',
menu: this.startMenu,
menuAlign: 'bl-tl',
renderTo: 'ux-taskbar-start',

....
});

[franckxx]

yeah,

thx a lot mxracer !

for align menu to top left try ------------> menuAlign: 'tl-bl',

thx a lot !

[franckxx]

I've make a exemple with menu TOP LEFT here :

http://www.carrouget.com/Test/menu_ext_2/

[mxracer]

I kinda like the taskbar/start menu on top :)

[runnersixty]

In Safari (3.0.3 for Windows) I can't navigate between cells with keyboard, but I think this is a Ext issue.
Thanks for sharing your very impressive creation.

[slobo]

hi mxracer,

I found a possible bug in the desktop app:

only in FF (2.0; not in IE)
when I press the start button many times (even if slowly)
the start menu does not appear after a while

sometimes it apprears, sometimes not

can anyone reproduce this?

[mxracer]

hi mxracer,

I found a possible bug in the desktop app:

only in FF (2.0; not in IE)
when I press the start button many times (even if slowly)
the start menu does not appear after a while

sometimes it apprears, sometimes not

can anyone reproduce this?

I have FF 2.0.0.9 and could not duplicate it, no matter how fast or slow I clicked.

[slobo]

I've tried it on another machine
and there I could not reproduce it
(WinXP)

but on my Win2000 machine I can easily reproduce it

(I also use FF 2.0.0.9)
(I've tested it with your http://qwikioffice.com/desktop-demo/)

[slobo]

is it possible to have the start menu's width and height set automatically
to fit the menu items?

now we have to manually set the width & height
which is only problem, if the menu items are not known in advance;
in this case, if the menu items are wider, a scroll bar appears inside the start menu

[slobo]

If I have a modal window on the desktop
the taskbar (and start menu) is still accessible
(so I can create windows on top of the modal window)

should this be considered a bug?

[dizelland]

Thx for the top.
How can i add viewport to desktop?

[mxracer]

Hi everyone,

Over the weekend I made alot of updates to the desktop.


Now all modules are passed into the initModules() method, which no longer adds them to the Start Menu. This allows modules to be initialized into the desktop without adding them to the Start Menu.
Modules are now added to the Start Menu and Quick Start in the initStartMenu() and initQuickStart() method respectively. These two methods use the desktopConfig object to add modules.
The DesktopConfig can be hard coded or passed in via json from the server.
Hooked up the Preferences tool button in the Start Menu to open the Preferences window. Preferences window contains a West and Center panel. The center panel is loaded with a Checkbox Tree. The tree is is loaded with all apps, any that are currently in the Quick Start panel are checked.
Which apps appear in the Quick Start panel can be controlled by checking their items in the Quick Start tree. Code is in place that gathers all checked item id's when the Save button is clicked.


Example Desktop Config passed in via ajax.



{
'success': true,
'config': {
'quickstart': [ <-- id's of modules to add to the Quick Start panel
'grid-win',
'tab-win',
'acc-win',
'layout-win'
],
'startmenu': [ <-- id's of modules to add to the Start Menu
'grid-win',
'tab-win',
'acc-win',
'layout-win',
'bogus-menu'
]
}
}

[franckxx]

Hi MXRacer,

Cool cool cool !

It would be very interesting to mix your config windows with Ytorres Configuration files (very Great too !) ?

Thx for your constructive work and thx to share your files !

EDIT : i've try to edit "DesktopConfig" for savestate but no success...

[mxracer]

I've just added a Documentation window to the demo. Nothing fancy, but its a start. I'll be working on it from time to time.

[nickvidal]

Hi mxracer,

Thanks for your amazing work! I would like to share with you a concept that I've created called Web Desktop Shared Session (http://nick.iss.im/2007/11/20/web-desktop-shared-session/).

[franklt69]

Hi mxrace, do you have some plan to integrate in your demo the Display Configuration (http://extjs.com/forum/showthread.php?p=89414#post89414) ?

some plan in the future to add the trayicon bar?
Again congratulations and thanks for share, I am a fan to Start Menu for 2.0 Desktop.

regards
Frank

[franckxx]

Hi mxrace, do you have some plan to integrate in your demo the Display Configuration (http://extjs.com/forum/showthread.php?p=89414#post89414) ?
Frank

Hi MXracer,

It can be great !, please integrate this fabulous mod... (now with save, wallpaper work nice, etc...)
byebye :D

[jbonet]

Hello,


I've a problem using autoLoad instruction when creating a module.
Sample code:


MyDesktop.ChatModule = Ext.extend(Ext.app.Module, {
appType : 'Chat',
id : 'chat-win',

init : function(){
this.launcher = {
text: 'Chat',
iconCls:'tabs',
handler : this.createWindow,
scope: this
}
},

createWindow : function(){
var desktop = this.app.getDesktop();
var win = desktop.getWindow('chat-win');
if(!win){
win = desktop.createWindow({
id: 'chat-win',
title:'Chat',
width:740,
height:480,
iconCls: 'tabs',
shim:false,
animCollapse:false,
border:false,
autoLoad: { url: 'chat.htm'},
constrainHeader:true
});
}
win.show();
}
});


I get the following picture :


Did you have an idea of the problem?


Thks a lot.


Jacques

[mxracer]

Is the path to the file correct?

[jbonet]

Yes is correct Mx.

I get an error message if he don't find the file.


Jacques

[xl801026]

The grid's rowcontextmenu don't show if used DesktopContextMenu.

[mxracer]

The grid's rowcontextmenu don't show if used DesktopContextMenu.

Thanks for the alert on this. Its fixed now, simple fix in Desktop.js



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


I'll post when I update the ZIP file.

[mxracer]

Yes is correct Mx.

I get an error message if he don't find the file.


Jacques

Hard to say without seeing a demo.

My Documentation module in my desktop-demo uses the panel load method.



app.cPanel.load({
url: 'plugins/docs/html/menu-modules.html'
});

[jbonet]

Hi MxRacer,


Didn't see where you put


"app.cPanel.load({
url: 'plugins/docs/html/menu-modules.html'
});"

in your program.

[stourwalk]

Quick question, which I don't think I've missed in the previous posts.

What I would like is a desktop that loads in an initial configuration, which then allows the user to login to an application via a login window (as well as peruse other applications that don't require them to be logged in)

Once logged in I need to be able to manipulate the desktop start menu so that it shows new windows dependent on the access rights of the user who logged in.

I can't currently work out if it is possible to manipulate the Start Menu after initial setup and if so, how to do so.

Can anyone enlighten me please!

[jbonet]

Hi MxRacer,


Didn't see where you put


"app.cPanel.load({
url: 'plugins/docs/html/menu-modules.html'
});"

in your program.


I resolved my problem in putting:


html: '<body><iframe src="...." ...></body>';

in module configuration.


Jacques

[mxracer]

If you want to go with an iframe you may want to look at this: http://extjs.com/forum/showthread.php?t=16590

[mxracer]

Hi mxracer,

Thanks for your amazing work! I would like to share with you a concept that I've created called Web Desktop Shared Session (http://nick.iss.im/2007/11/20/web-desktop-shared-session/).

Thanks nickvidal, I'll try to read through it this weekend :)

[armaghedon]

The best ideea I've ever seen! No comment! Keep up the good work!

[brookd]

Is the start menu limited to one submenu? If I try to add more than one sub menu or move the submenu up in the startmenu, it doesn't render anything below the submenu. I guess this is by design because the windows startmenu only has "all programs"?



'startmenu': [
'bogus-menu',
'grid-win', /* nothing else renders except the top item */
'tab-win',
'acc-win',
'layout-win',
]

[mxracer]

Actually brookd, that was a bug. Thanks for letting me know. Its fixed now. I had to update initStartMenu(). The problem was in the nested for loops, its fixed here:



initStartMenu : function(mIds){
if(mIds){
for(var i = 0, iLen = mIds.length; i < iLen; i++){
var m = this.getModule(mIds[i]);
if(m){
if(m.appType == 'menu'){ // handle menu modules
var items = m.items;

for(var j = 0, jLen = items.length; j < jLen; j++){
m.launcher.menu.items.push(this.getModule(items[j]).launcher);
}
}
this.startMenu.add(m.launcher);
}
}
}
}

[mxracer]

I can't currently work out if it is possible to manipulate the Start Menu after initial setup and if so, how to do so.

Can anyone enlighten me please!

You can call the StartMenu's add() method. If you are going to alter it from within a module try this:



this.app.startMenu.add({
...
})

[brookd]

Yo, thanks for that quick fix man. I have to give you a huge thank you for your work. I was having a tough time getting started with EXT and your desktop provided a real nice framework and leg up to get started. Its seriously one of the sexiest things I have seen in a while. I know its probabally wrong to get turned on by an interface, but what my wife doesn't know won't hurt her. Anyways, she tunes me out what I start talking about windows and menu bars....

Again, thats for your excellent work. It has both helped me learn and given me a headstart to get something done!

[brookd]

One more question.. How do you add a public method to app.js? Or do you typically not want to do this. It looks to me like all of the methods are private, right?

[franckxx]

Hi MXRacer,

Nice addition !, login windows + saving data...cool !

There is a problem with IE7, after login, javascript error..

thx for your application in constant evolution !

[Ytorres]

Yeah ! so cool ;)

For IE :
In preference.js, on ligne 240



icon:'desktop-download',


Remove extra comma at the end.

MxRacer ? Have you plan to provide us Database Schema & script for login & save preference ?

Thanks again !

[franklt69]

Good MxRacer, the Zip File have date 11-19-2007, the last update is 11-24 do you have the zip file the last version?

regards
Frank

[mxracer]

One more question.. How do you add a public method to app.js? Or do you typically not want to do this. It looks to me like all of the methods are private, right?

Not all methods are private. getModule() is meant to be public for one.

If you feel a new method is needed add it in with the others:



Mymethod : function(){
...
}

[mxracer]

Ok the bug in Preferences.js is fixed. Thanks for the alert. Those extra comma's always get me :)

I've updated the zip file in 1st post: desktop-11-25-07.zip

It now includes my PHP code to handle login/logout, saving preferences. A sql folder is in there, so you can create the needed Db tables.

In php/desktop.php, line 24. Update with your Db info.



function connect_to_db()
{
mysql_connect ("MyServer", "username", "password") or die ('I cannot connect to mysql because: ' . mysql_error());
mysql_select_db ("desktop") or die ('I cannot select the database because: '.mysql_error());
} // end connect_to_db()


Anyone see any improvements that can be made let know please :)

[franckxx]

Hi MXRacer,

I've installed your new release, i've created my base "desktop", I import your 4 sql files :

- desktopConfig.sql
- login.sql
- member_types.sql
- members.sql

i've this :
http://img264.imageshack.us/img264/1714/screenxy0.jpg

I've modify file "desktop.php" with theses settings :

function connect_to_db()
{
mysql_connect ("localhost", "root", "") or die ('I cannot connect to mysql because: ' . mysql_error());
mysql_select_db ("desktop") or die ('I cannot select the database because: '.mysql_error());
} // end connect_to_db()

When i try to connect (with default login/pass demo/demo), i stay on login windows...

I post this :
module : login
pass : demo
user : demo
i've this response :
{errors:[{id:'user', msg:'User not found'}]}

Can you help me ?

[stourwalk]

You can call the StartMenu's add() method. If you are going to alter it from within a module try this:



this.app.startMenu.add({
...
})


After a bit of fiddling I've got this to work perfectly - thanks - now I've just got to get my variable list of modules to open up new module windows correctly (with a single instance - since I don't want to have to define each module independently in the .js - since it's not very extensible) and I'll be *very* happy.

Thanks for an excellent structure!

Chris

[mxracer]

When i try to connect (with default login/pass demo/demo), i stay on login windows...

I post this :
module : login
pass : demo
user : demo
i've this response :
{errors:[{id:'user', msg:'User not found'}]}

Can you help me ?

Those sql statements only build the tables, they don't populate them with data. Did you add the member "demo" to the "members" table?

[franckxx]

Those sql statements only build the tables, they don't populate them with data. Did you add the member "demo" to the "members" table?

Oups... I'm sorry, I had not seen !

Thx

[atomantic]

Since the load time is really heavy, I found it useful to add a basic ext loader:

http://min3.net/sccc/

I also added a registration add on to the dialog.
The code for the registration and login could really use some tightening up so feel free to use any of it but I would recommend looking it over :)

I made it so the login dialog loads ASAP and lets the rest of the desktop load behind it ;)

Just my luck that as soon as I get registration and login working, you put out a version with login. lol

[franckxx]

Since the load time is really heavy, I found it useful to add a basic ext loader:

http://min3.net/sccc/

I also added a registration add on to the dialog.
The code for the registration and login could really use some tightening up so feel free to use any of it but I would recommend looking it over :)

I made it so the login dialog loads ASAP and lets the rest of the desktop load behind it ;)

Just my luck that as soon as I get registration and login working, you put out a version with login. lol

Very nice improvement !, i've a error when i save... :Errors occured at the server.

[atomantic]

Maybe this will help:

http://min3.net/Desktop_antic_branch_v2007.11.26.zip

I zipped up my site (all the PHP code and the SQL script for the user table is in there).

You will need to run '/sql/osUsers.sql'

You will also need to change the values in 'inConfig.php'

Go ahead and make any improvements you want to that. Post what changes you make :)

I'm starting to think this would make a really awesome Google Code project with a shared SVN src and releases... what do you think mxracer? I'll start one if you don't ;)

[atomantic]

well, here it is:

http://code.google.com/p/jsdesk/

I haven't checked in the code into the repository yet...

Hey mxracer, what's the license on your modifications? I put the project up as GNU GPL 3.0 but I'm not sure if your additions fall into that... Let me know.

[KENT]

@mxracer:
Hi, I got a problem please chk it out http://farm3.static.flickr.com/2285/2070233391_aac82b498a.jpg?v=0
As you see the shortcuts are not shown out.

@atomantic:
I cannot use your Quick start, when I click on it nothing happened.

--
I tested on the lastest firefox.

[Ytorres]

@mxracer:
Hi, I got a problem please chk it out http://farm3.static.flickr.com/2285/2070233391_aac82b498a.jpg?v=0
As you see the shortcuts are not shown out.

@atomantic:
I cannot use your Quick start, when I click on it nothing happened.

--
I tested on the lastest firefox.

Typically, you have a javascript error and/or problem with included Javascript files.
Check this.

[KENT]

I have checked it, everything seems included correctly. I havent made any changes on it so.. it's weird

[Ytorres]

I have checked it, everything seems included correctly. I havent made any changes on it so.. it's weird

Have you test with Firefox & FireBug enabled ?

[mxracer]

I have checked it, everything seems included correctly. I havent made any changes on it so.. it's weird

It looks like the desktopConfig for the start menu didn't get any module id's.

Login to http://qwikioffice.com/desktop-demo/

Open the Developer Docs window and look over the Desktop Config item under Getting Started.

Make sure you are correctly passing in the module id's (either local or remote). Should look like this:



{
'desktopcontextmenu': [
'preferences-win'
],
'quickstart': [
'grid-win',
'tab-win',
'acc-win',
'layout-win'
],
'startmenu': [
'grid-win',
'tab-win',
'acc-win',
'layout-win',
'bogus-menu'
]
}

[shamoco]

First of all thanks for u all , for the great work .... every one.

i have added some enhancing code for php and EXTJS loading time

1- modified index.php deleted login.php and logout.php

2- added combine.php for speeding loadtime

3- adding draggable functionality to icons on desktop

no need to include extjs source , just the DB and confs and run the system

TO login use admin, admin OR demo, demo

LINK TO DOWNLOAD :

http://espartas.net/uploads/DESKTOP 28-11-2007.zip

[franckxx]

Hi shamoco,

Draggable icons is very interesting for Desktop.. nice improvement.

I think doubleClick whil be nice because when i drag icons open windows too.

thx for your work

[atomantic]

First of all thanks for u all , for the great work .... every one.

i have added some enhancing code for php and EXTJS loading time

1- modified index.php deleted login.php and logout.php

2- added combine.php for speeding loadtime

3- adding draggable functionality to icons on desktop

no need to include extjs source , just the DB and confs and run the system

TO login use admin, admin OR demo, demo

LINK TO DOWNLOAD :

http://espartas.net/uploads/DESKTOP 28-11-2007.zip

Give me your google username and I'll add you to the google code project:

jsDesk:

http://code.google.com/p/jsdesk/

[bryman55]

I am getting set_cookie not defined after logging in. It just brings up a blank page. Any ideas?

[cobnet]

I am getting set_cookie not defined after logging in. It just brings up a blank page. Any ideas?

Change:

<script type="text/javascript" src="js/cookies.js"></script>


To:

<script type="text/javascript" src="js/Cookies.js"></script>


I had this one last nite.

[cobnet]

Anyone know how closely this 2.0 Desktop and the Ext 2.0RC1 code example will be updated?

I mean will they be the same coding or will there be differences in the 2 versions?

Thanks for sharing a GREAT app!

Mark

[mxracer]

Anyone know how closely this 2.0 Desktop and the Ext 2.0RC1 code example will be updated?

I mean will they be the same coding or will there be differences in the 2 versions?

Thanks for sharing a GREAT app!

Mark

I haven't heard from Jack on this.

He liked the Start Menu and Taskbar and asked to include it into his demo. He made some nice improvements (like the shortcuts, startMenuConfig).

I've updated my desktop with his improvements. So they do compare. Only difference is the new additions I've been working on (Quick Start panel, Preferences window, etc.).

I'm not sure if Jack wants his demo to stay a fairly simple demo, or go full blown desktop environment? May have to wait and see.

[mxracer]

First of all thanks for u all , for the great work .... every one.

i have added some enhancing code for php and EXTJS loading time

1- modified index.php deleted login.php and logout.php

2- added combine.php for speeding loadtime

3- adding draggable functionality to icons on desktop

no need to include extjs source , just the DB and confs and run the system

TO login use admin, admin OR demo, demo

LINK TO DOWNLOAD :

http://espartas.net/uploads/DESKTOP 28-11-2007.zip

Do you have a url to a live demo?

[Danz]

First of all thanks for u all , for the great work .... every one.

i have added some enhancing code for php and EXTJS loading time

1- modified index.php deleted login.php and logout.php

2- added combine.php for speeding loadtime

3- adding draggable functionality to icons on desktop

no need to include extjs source , just the DB and confs and run the system

TO login use admin, admin OR demo, demo

LINK TO DOWNLOAD :

http://espartas.net/uploads/DESKTOP 28-11-2007.zip

Awesome work on the desktop app. Just couple of improvements that could be done.

Instead of using WZDD() function inside wz_dragdrop.js to determine the browser compatibility wouldnt it be better using EXTJs core lib functions (eg; Ext.isIE, Ext.isOpera) etc...?

Also it would probably be better to use the drag and drop functionality inside EXTJs core (Ext.dd) instead of some of the rest of the wz_dragdrop.js functions/classes. This might simplify and reduce the code.

[stever]

Any change a future feature could be that the desktop derive from a panel not a viewport?

[KENT]

It looks like the desktopConfig for the start menu didn't get any module id's.

Login to http://qwikioffice.com/desktop-demo/

Open the Developer Docs window and look over the Desktop Config item under Getting Started.

Make sure you are correctly passing in the module id's (either local or remote). Should look like this:



{
'desktopcontextmenu': [
'preferences-win'
],
'quickstart': [
'grid-win',
'tab-win',
'acc-win',
'layout-win'
],
'startmenu': [
'grid-win',
'tab-win',
'acc-win',
'layout-win',
'bogus-menu'
]
}


@mxacer:
Hi,
Field 'startmenu' is blank bro.
Problem solved when I updated 'startmenu' field in table desktopconfig with this:
["docs-win","layout-win","grid-win","tab-win","acc-win","bogus-win","preferences-win"]

And it's now running

[xl801026]

it run slowly on ie.memory leak exists? memory don't release

[cobnet]

Just started working with the latest code from your first post! I really like this!

I have run into one issue thou, right-clicking on the desktop does not produce the "Preferences" option your demo does? Where do I go to start trouble-shooting this issue?

Thanks in advance,
Mark

PS: Just an idea, but how hard would it be to make the login optional? Meaning the Start button menu would show Login/Logout accordingly to whichever option was needed at the time.

[seamcker]

Nice work!But if you can change some code in able to let it run in php,asp,asp.net or jsp, it will be better!

[mxracer]

Just started working with the latest code from your first post! I really like this!

I have run into one issue thou, right-clicking on the desktop does not produce the "Preferences" option your demo does? Where do I go to start trouble-shooting this issue?

Thanks in advance,
Mark

PS: Just an idea, but how hard would it be to make the login optional? Meaning the Start button menu would show Login/Logout accordingly to whichever option was needed at the time.

The sql files supplied only build the tables. They don't populate them with data, so you need to add your module id's to the "desktopConfig" table.

[mxracer]

Nice work!But if you can change some code in able to let it run in php,asp,asp.net or jsp, it will be better!

You can replace the php scripts with the language you desire.

[mxracer]

@mxacer:
Hi,
Field 'startmenu' is blank bro.
Problem solved when I updated 'startmenu' field in table desktopconfig with this:
["docs-win","layout-win","grid-win","tab-win","acc-win","bogus-win","preferences-win"]

And it's now running

If you look the the sql files, they only build the tables. They don't populate them.

[Konstantin]

mxracer, I bow to you.

I have a couple of feature suggestions, most of which are trivial to implement. I'll post a diff/patch once I have the code for these (unless someone beats me to it).

1. Make Taskbar items drag-sensitive, so they restore minimized windows once something is dragged over them.
2. A mechanism whereby TaskBar items would update their title on title change of corresponding windows.
3. A launch() method on Desktop interface to launch modules: e.g.


...
Ext.extend(Ext.app.App, Ext.util.Observable, {
...
/*
Launch Module by id with optional parameters
e.g. Desktop.launch('module-id',{optional: params});
e.g. MyDesktop.launch('user-editor', { userId: x });
*/
launch: function(module,options) {
var launcher = this.getModule(module).launcher;
launcher.handler.call(launcher.scope, options);
},
...


4. Perhaps some integration with Ext.state.Manager to optionally re-open windows from last session.

Keep up the good work :-)

[cobnet]

The sql files supplied only build the tables. They don't populate them with data, so you need to add your module id's to the "desktopConfig" table.

I don't think you understood the problem, or maybe I don't understand the response?

I have an example link here:

EDITED: link removed.

This coding at this link will change, so I will erase it from this posting after I figure out the problem.

Once at the above link, click login and the default.php script should load, now if you right-click on the desktop, a menu with "Preference" is supposed to pop-out like your demo link does. I cannot find in the js files where this menu may be?

The database is populated with data for "demo", so not sure where this comes from? This is not a big deal, I don't really need the pop-up on right-click, just trying to understand the app a bit more. I may decide to add other options there at some point in time.

[EDITED]: phpfiles attachment removed, they were unneccessary.

[mxracer]

cobnet,

From Firebug I can see the the desktopConfig being returned from the server, copied and pasted here:



{
'success': true,
'config': {

'desktopcontextmenu': [],

'quickstart': ["displayconf-win","preferences-win","docs-win","bogus-win","acc-win"],

'startmenu': []
}
}


As you can see, both the startmenu and desktopcontextmenu are empty. No module id's.

Assuming you haven't modified desktopConfig.php, and the data is in the Db table, they should be sent from the server. So I'm thinking you need to add them to their fields in the database table "desktopConfig".

If you haven't already, go through my Developer Docs in my demo http://www.qwikioffice.com/desktop-demo/ The docs are a work in progress, but they should help you with this.

[mxracer]

Hi everyone,

I have updated Post 1 with a new zip file. I've updated the sql files to now add the data to the tables.

Hopefully this helps.

[KENT]

@mxracer: Thanks for the update. Hope we can see more features in your next version.

[dickothestar]

Hi mxracer,

First of all thanks for your work on this, its absolute class!

Ive created a module silimar to the bogusmodule and im trying to open the window from the accordian window. I can do this using a button on the toolbar using the example you gave but i would like to open it from a double click on a user, and im struggling. Basically i would a new window to appear for each user that is double clicked, or if the window is already open for it be active.

Any help on this would be great!
Thanks,
Paul

[mxracer]

Basically i would a new window to appear for each user that is double clicked, or if the window is already open for it be active.

Once you get access to a module's launcher:



var tabWinLauncher = MyDesktop.getModule('tab-win').launcher;


You also have access to the launcher's handler, which will open the window.


tabWinLauncher.handler

Set up you event listener on the tree and call the launcher's handler. Hopefully this gets you started.

[atomantic]

I have now merged almost all of my login/registration system with mxracer's.
There are a couple things in Login.js that are not in sync (and that file needs to be cleaned up a bit). However, there are some notable improvements:

* AES encryption for user passwords (no longer stored plaintext in database)
* Library code (App.js, Cookies.js, Module.js, StartMenu.js, TaskBar.js) are seperated from other js files in the js/lib/ directory
* 1 single db install script (with default config data)
* 1 single persistent mysql connection (removed $desktop->connect_to_db(); method and calls)
* Javascript form text comes from lang/ENG/Text.js, which sets up a good platform for localization
* jsDesk/readme.txt contains installation and configuration instructions
* jsDesk/docs/* for license info and TODO.txt (not much in there right now, although there are a lot of TODO items)


New release is available on the Google Code Project Page:

http://jsdesk.googlecode.com/files/jsdesk_2007.12.02.zip

Live Demo available here:

http://www.jsDesk.com

For those of you who are actively developing on this system, the Google Code project and SVN checkout system is a great way for us to merge code and work together to make this thing more awesome. PM me your google name and I'll add you to the project.

I am planning on actively developing this thing for at least the next 4 months (I am teaching a class and will be using this desktop system to manage assignments and students)

\m/

[mxracer]

Hi everyone,

Wallpapers can now be set in the Preferences window. Not saving to the server yet. It's 4 a.m. here and this will have to be finished maybe tomorrow.

Anyway here is a screenshot or checkout the demo.

http://qwikioffice.com/ExtJS-Demos/screenshot-8.jpg

[franckxx]

Hello MXRacer,

I'am surprised to see that you have to add this wallpapers option. It's a good idea, but that was already done by Ytorres with "Display Configuration" and it will be very full (font size/color, background colors, preview window, theme changer, etc...) and i thnik... prettier.

Is it juste my opinion...\:D/... it will be better to add Ytorres "Display Configuration" :-?

But, happy to see application continue to evolve :D

[galdaka]

Live Demo available here:

http://www.jsDesk.com

\m/

IE6 error.

[shamoco]

Nice and pretty as usual , greate work .
i think every one here must share the ideas , its all about ideas .
programming is easy share your ideas and make this project grow :D.

[stourwalk]

Hello MXRacer,

I'am surprised to see that you have to add this wallpapers option. It's a good idea, but that was already done by Ytorres with "Display Configuration" and it will be very full (font size/color, background colors, preview window, theme changer, etc...) and i thnik... prettier.

Is it juste my opinion...\:D/... it will be better to add Ytorres "Display Configuration" :-?

But, happy to see application continue to evolve :D

I have to disagree - whilst ytorres Display Configuration is a great single window solution, I feel that mxracers selection of the backgrounds is much prettier - and without a doubt the additional configuration options (that are not background dependent anyway) will soon be added as an additional menu option!

mxracer: Is it possible to apply the configuration parameters after the desktop has been loaded - so that each user can have their own configuration. I know that you already have to log-in to your setup, but you login *before* displaying the desktop, whereas I login *after* displaying a default desktop and would want to save/load those options after the user logs in.

Chris

[TommyMaintz]

I like this background selecter better aswell. This is really going great MXRacer!

[netbox]

but wallpaper not support 1440*900;)

[Overlord]

I know this was said a while back, but you will be implementing a clock in the taskbar, right?

[mxracer]

I know this was said a while back, but you will be implementing a clock in the taskbar, right?

I do plan on it. Just been so busy with other stuff.

[mxracer]

Thanks for the positive feedback everyone :)

I made some more changes to the Preferences window. Switched to the cardLayout.

Still needs work but here is a screenshot, and the demo is updated as well.

http://qwikioffice.com/ExtJS-Demos/screenshot-10.jpg

[mxracer]

Is it possible to apply the configuration parameters after the desktop has been loaded - so that each user can have their own configuration. I know that you already have to log-in to your setup, but you login *before* displaying the desktop, whereas I login *after* displaying a default desktop and would want to save/load those options after the user logs in.

Chris

Hi Chris,

In App.js I have added addQuickStartButton() and removeQuickStartButton() methods. Which can be used as such:



this.app.addQuickStartButton('tab-win'); <-- pass in the module id


and



this.app.removeQuickStartButton('tab-win'); <-- pass in the module id


In Desktop.js I have added setWallpaper() and setBackgroundColor() methods. Which can be used like:



desktop.setWallpaper('qwikioffice.jpg'); <-- image must be in the wallpapers folder


and



desktop.setBackgroundColor('f9f9f9'); <-- hex number


I am using these methods in the Preferences module. I plan on adding more to allow all pref. to be set.

[franklt69]

Hi mxracer, which advantage have the new approach using cardLayout over before approach?

regards
Frank

[mxracer]

Hi mxracer, which advantage have the new approach using cardLayout over before approach?

regards
Frank

I just think it looks a lot cleaner :) More Vista style.

It did simplify the code some also. Don't need to dynamically add and remove components into the content panel now.

The wallpaper thumbnails don't get re-loaded each time you click the "wallpapers" link anymore. They are only loaded when the window is opened.

[cobnet]

cobnet,

....

As you can see, both the startmenu and desktopcontextmenu are empty. No module id's.

Assuming you haven't modified desktopConfig.php, and the data is in the Db table, they should be sent from the server. So I'm thinking you need to add them to their fields in the database table "desktopConfig".

If you haven't already, go through my Developer Docs in my demo http://www.qwikioffice.com/desktop-demo/ The docs are a work in progress, but they should help you with this.

Color me dum, lol! I did not realize: "desktopcontextmenu" was "right-click", thanks once again for setting me straight.

I do have a new issue, which I have seen asked in different variants a few times already:

How do I call a Module from RowSelectionModel in a grid:

Example:


var tabWinLauncher = MyDesktop.getModule('tab-win').launcher;

var rowSelectionModel = new Ext.grid.RowSelectionModel({singleSelect:true});
rowSelectionModel.on('rowselect',function(){
tabWinLauncher.handler; //This does not work?
// tabWinLauncher; // nor this?
// tabWinLauncher.createWindow(); // nor this?
});



Thanks in advance,
Mark

[atomantic]

IE6 error.

hrm... it appears that MyDesktop is not initializing. I'm guessing this is a race condition in the code... but only in IE.

@mxracer: any idea why this happens?
I expect it's somewhere in the difference between our login systems (since most everything else is pretty close)

Also, @mxracer, do you plan on integrating a registration dialog system?

[KENT]

hrm... it appears that MyDesktop is not initializing. I'm guessing this is a race condition in the code... but only in IE.

@mxracer: any idea why this happens?
I expect it's somewhere in the difference between our login systems (since most everything else is pretty close)

Also, @mxracer, do you plan on integrating a registration dialog system?

@atomantic: I got a loop of 'Validating Account...' and it seems not to stop. :-?
@mxracer: I hope that you could spend your time to intergate the registration system to your project.

[mxracer]

How do I call a Module from RowSelectionModel in a grid:

Example:


var tabWinLauncher = MyDesktop.getModule('tab-win').launcher;

var rowSelectionModel = new Ext.grid.RowSelectionModel({singleSelect:true});
rowSelectionModel.on('rowselect',function(){
tabWinLauncher.handler; //This does not work?
// tabWinLauncher; // nor this?
// tabWinLauncher.createWindow(); // nor this?
});


Thanks in advance,
Mark

I looked at the source of Ext's Button for the answer. In Button.js:



// private
onClick : function(e){
if(e){
e.preventDefault();
}
if(e.button != 0){
return;
}
if(!this.disabled){
if(this.enableToggle && (this.allowDepress !== false || !this.pressed)){
this.toggle();
}
if(this.menu && !this.menu.isVisible() && !this.ignoreNextClick){
this.showMenu();
}
this.fireEvent("click", this, e);
if(this.handler){
//this.el.removeClass("x-btn-over");
this.handler.call(this.scope || this, this, e);
}
}
}


So I updated my demo's DesktopConfig.js to use it. Look in the Grid Window's code.


sm.on('rowselect',function(){
tabWinLauncher.handler.call(this.scope || this);
}, this);


This is working.

[cobnet]

So I updated my demo's DesktopConfig.js to use it. Look in the Grid Window's code.


sm.on('rowselect',function(){
tabWinLauncher.handler.call(this.scope || this);
}, this);


This is working.

Awesome! I can't wait to try it out, but unfortunately I'll have to try it out later. Thanks again and again and again. This app is what I have been looking to find for a very long time now!

As far as the registration system, I think you have this thing flexible enough that many different cms's can tap right into the login and easily move the registration to the appropriate cms. Joomla, Modx, others? I wouldn't go too crazy with concerning myself to much here. This framework can be used on many different systems already. Just my 2 cents worth.

Maybe my next post I can contribute something? Anyways enjoy the holidays,
Mark

EDITED: I could not wait it is working: http://cobnet.com/icmsBeta2/extjs/examples/dtmxracer/login.html .

[mxracer]

As far as the registration system, I think you have this thing flexible enough that many different cms's can tap right into the login and easily move the registration to the appropriate cms. Joomla, Modx, others? I wouldn't go too crazy with concerning myself to much here. This framework can be used on many different systems already. Just my 2 cents worth.

Thanks Mark,

I agree on the regristration system.

[mxracer]

Just added the ability to toggle transparency on the taskbar from the Preferences window.

There is still much to do with the Preferences window. I'll update the zip file when its done.

http://qwikioffice.com/ExtJS-Demos/screenshot-11.jpg

[KENT]

Hi mxracer:
As your words in previous post, i'm using some managedIframe in the bogus window but how do I have it's able to auto scroll ?

[Ytorres]

Just added the ability to toggle transparency on the taskbar from the Preferences window.

Woah ! very nice ! good job ;)

[franckxx]

It is very pretty.
good idea !

[iDevelopment]

First post, so don't shoot me ^^

Nice Work, mxracer...

I made some changes for our application, maybe you like some of these.

( Guys, i'm new to extjs, we used DynAPI before... Don't shoot ;-) )

This change in the Desktop.js makes all Desktop icons movable... Maybe you can use it. I had to change the icons "click" event to dblclick, to prevent "starting a module" when moving the icon.



layout();


if(shortcuts){
// added by iDevelopment - create movable desktop items
var children = shortcuts.dom.childNodes;
for (i = 0; i < children.length; i++){
if(isDefined(children[i].id)){
var shortcut = Ext.get(children[i].id);
shortcut.initDD('DesktopShortcuts');
}
}
// end added by iDevelopment


// added by iDevelopment - changed from click to dblclick to prevent program starting while drag and dropping
shortcuts.on('dblclick', function(e, t){
if(t = e.getTarget('dt', shortcuts)){
e.stopEvent();
var module = app.getModule(t.id.replace('-shortcut', ''));
if(module){
module.createWindow();
}
}
});
}

this.cmenu = new Ext.menu.Menu();


Anyone who knows a nicer way (more extjs way) to do this, please tell (again - i'm new to extjs):


var children = shortcuts.dom.childNodes;
for (i = 0; i < children.length; i++){


I got some more changes... As soon as these are ready, i'll post them. I'm working on a system-clock and implemented a "Debug-Console".

Keep up the really good work guys!

[franckxx]

hi iDevelopment,


if(shortcuts){
// added by iDevelopment - create movable desktop items
var children = shortcuts.dom.childNodes;
for (i = 0; i < children.length; i++){
if(isDefined(children[i].id)){
var shortcut = Ext.get(children[i].id);
shortcut.initDD('DesktopShortcuts');
}
}
// end added by iDevelopment

This part of code doesn't work for me...

[brookd]

The desktop app runs great for me in FF, but in IE7, once I have 3 windows open, everything gets slow. Why?? Does anyone know? I assume its EXT issue not the desktop code. But it unfortunatly, becomes borderline unusable in IE7 after multiple windows are opened. The interface is sluggish to respond to window open/close events and dragging the windows is jumpy and not smooth. Are there any plans to improve these IE specifc performance issues?

[KENT]

The desktop app runs great for me in FF, but in IE7, once I have 3 windows open, everything gets slow. Why?? Does anyone know? I assume its EXT issue not the desktop code. But it unfortunatly, becomes borderline unusable in IE7 after multiple windows are opened. The interface is sluggish to respond to window open/close events and dragging the windows is jumpy and not smooth. Are there any plans to improve these IE specifc performance issues?

Hi, same here

[mxracer]

Performance in IE6/7 is a known issue. I haven't experienced it in any other browser.

The Ext demo runs into the same problem. http://extjs.com/deploy/dev/examples/desktop/desktop.html

[brookd]

Is there any word from the ext team on this? IE has such huge market share. I really hope that this is something that is being addressed..

[KENT]

Is there any word from the ext team on this? IE has such huge market share. I really hope that this is something that is being addressed..

I've just tested the deskop on 2.0 Final Release, there's nothing better.

[cuteleaf]

i down load the zip,but the preferences item is different from the demo,no wallpapers ?？

[mxracer]

I plan to update the zip file when the Preferences window is done. So yes, the zip is out of sync with the demo. Sorry for the inconvenience.

By the way... The Preference window is now saving all settings to the Db. Next I'm going to add background color and theme selection.

[cuteleaf]

wonderfull.
by the way .is there any license?can i use your code as widget of my web site?