Ext.Desktop.Sidebar

[Foggy]

Hi folks

Just wondering if anybody out there working on something like superkaramba (or vista ;) ) sidebar for desktop?
I've began something small today evening...

Here's a first screen.
Is there anyone interested about something like thtat? Did you think it is a "good" addtion to desktop or not?

Have some nice ideas with sakis un/dockable accordion, that would be great :)

Greets Foggy

[israel]

cool =D>=D>

[jsakalos]

Good idea!

However, I'd prefer taking Mac, KDE4@Linux or Superkaramba@Linux as possible models rather than any of Micro$oft products (that are poor imitations of them anyway).

[Foggy]

I'd prefer taking Mac, KDE4@Linux or Superkaramba@Linux as possible models rather than any of Micro$oft products
Of course, you're right :)
Had my first post adjusted :D

[franckxx]

Hi Foggy,

Nice add'on for Desktop !!

I'm very interested for add this feature on my desktop....can you share your code ?

Thx fior all ;-)

[Foggy]

can you share your code
Of course i can, but currently that is not really much. Just a east panel with some tools and a static flash clock in their html property...

Currently ive do some brainstorming. I think i would define all possible gadgets in a xml file.
So in the sidebar config-dialog i would read this xml to showing all availible mini apps...

As i said before, thats all in a really early state... Just one evening work till now.
But i would keep you posted

[gelleneu]

Thats really cool!! I thinked about adding something like floating panel to the desktop. But I never started developing such thing.

[mxracer]

I have a side bar added to this desktop currently being developed.

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

[Foggy]

Hey Mxracer
Really nice work. Did you also have a Widget Chooser or are this widgets just static?

Here is an other screenshot of the current state ;)

[mxracer]

No chooser yet. But for this desktop, it needs to be there 100% of the time (since it will be a music community).

[franckxx]

Hey Mxracer
Really nice work. Did you also have a Widget Chooser or are this widgets just static?

Here is an other screenshot of the current state ;)

Hey Foggy, your Sidebar look nice !

Its Really cool with your pref win for add and remove widget...excellent !! it's with drag'n drop ?

PS : why do you prefer XML... mysql can store your gadgets ?

[Foggy]

Its Really cool with your pref win for add and remove widget...excellent !! it's with drag'n drop ?
Yes, it should work with drag and drop...


PS : why do you prefer XML... mysql can store your gadgets ?
Because i think xml is much easier, and xml can be read directly with js...

[franckxx]

Yes, it should work with drag and drop...


Because i think xml is much easier, and xml can be read directly with js...

do you think to release a version with new Desktop released yesterday ?

I think your idea is very interesting :-)

[Foggy]

There is not many to share at the moment. There is just a east panel and a window with a grid from XML and a ddTarget on the east panel body. But no functionality now. Please be patient and let me do some stuff first :)

[Foggy]

Hey guys
Maybe you are interested on a very first preview :)
http://www.office.uwd.ch/_tests/ext/examples/desktop/desktop.html
Any suggestions are welcome :)

[israel]

\:D/http://forum.score777.com/html/emoticons/!cid_000601c5d0be$89c06c20$0200000a@sigaljwnp5ad5d.gifhttp://forum.score777.com/html/emoticons/good_job.gif
how to do that the Sidebar willbe close when i open my site?
how to put in Sidebar window not grid?
tenkyou you you are the champion
ammmm iwant 2 window on the Sidebar to do
like this

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

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

createWindow : function(){
var desktop = this.app.getDesktop();
var win = desktop.getWindow('chat-win');
if(!win){
MyDesktop.getDim();
win = desktop.createWindow({
id: 'chat-win',
title:'Chat',
x:0,
y:SIZE_Y_30 + GAP,
width:600,
height:200,
iconCls: 'tchat',
shim:false,
animCollapse:false,
layout: 'fit',
border:false,
constrainHeader:true,
html: '<body><IFRAME SRC="chat.html" style="border:0px none;width:100%;height:100%;"></IFRAME></body>'
});
}
win.show();
return win;
}
});

window-2//-----------------------------------------------------------------------------------//
//------------------------------------Informations RACE24H----------------------------------//
//-----------------------------------------------------------------------------------//
MyDesktop.InformationsModule = Ext.extend(Ext.app.Module, {
appType : 'Informations',
id : 'informations-win',

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

createWindow : function(){
var desktop = this.app.getDesktop();
var win = desktop.getWindow('informations-win');
if(!win){
MyDesktop.getDim();
win = desktop.createWindow({
id: 'informations-win',
title:'Informations',
width:600,
height:450,
iconCls: 'info',
shim:false,
animCollapse:false,
layout: 'fit',
border:false,
constrainHeader:true,
items:
[{
xtype:"tabpanel",
activeTab:0,
autoScroll:true,
items:
[{
xtype:"panel",
title:"Informations Course",
html : '<body><IFRAME SRC="http://87.118.110.131/enduro200712_horaires.php?ipA1=ffsca1.ffsca.info&ipA2=ffsca3.ffsca.info&ipB1=ffsca4.ffsca.info&ipB2=ffsca6.ffsca.info" style="border:0px none;width:100%;height:100%;"></IFRAME></body>'
},
{
xtype:"panel",
title:"Aides et Faqs",
html : '<body><IFRAME SRC="http://87.118.110.131/enduro200712_aidesfaqs.php" style="border:0px none;width:100%;height:100%;"></IFRAME></body>'
},
{
xtype:"panel",
title:"Meteo",
html : '<body><IFRAME SRC="meteo/meteo.htm" style="border:0px none;width:100%;height:100%;"></IFRAME></body>'
}]
}]
});
}
win.show();
return win;
}
});

[israel]

will you guve us the passport to yourdesktop her?
http://www.office.uwd.ch/view/desktop.php
:-?

[Foggy]

how to do that the Sidebar willbe close when i open my site?
Still working on, be patient. But i take this on my todo list...
There would be also:
1. Dock/Undock Gadgets on the sidebar.
2. Put Sidebar on the left or on the right side of the desktop.
3. Show sidebar and widgets always on top or behind all other windows.
4. Set up a configuration button for a gadget if there is a settings file defined in xml.
5. Sidebar.show and Sidebar.close for your Request ;)




how to put in Sidebar window not grid?

[israel]

Quote:
ammmm iwant 2 window on the Sidebar to do

Does i understand you right, you want attach a normal Desktop Window to the sidebar?

no
i dont now xml jast html inow
i want like that in Sidebar

this._configWindow = new Ext.Window({
title: 'Sidebar Configuration',
width: 780,
height: 400,
iconCls: 'rss',

html: '<body><IFRAME SRC="http://www.toto.org.il/" style="border:0px none;width:100%;height:100%;"></IFRAME></body>'
});
[PHP]Ext.Desktop.Sidebar = function(element, config){
if (element instanceof Ext.Element) {
this.desktop = element;
this.init();
} else {
try {
this.desktop = Ext.get(element);
this.init();
} catch (e) {
// catch
}
}
Ext.EventManager.onWindowResize(this.layout, this);

this._configWindow = null;


// XML gadget store
var gadget = Ext.data.Record.create([
{name: 'id'},
{name: 'name'},
{name: 'path'},
{name: 'description'},
{name: 'file'},
{name: 'settings'},
{name: 'icon'},
{name: 'use'}
]);
var gadgetReader = new Ext.data.XmlReader({
totalRecords: "results", // The element which contains the total dataset size (optional)
record: "gadget", // The repeated element which contains row information
id: "id" // The element within the row that provides an ID for the record (optional)
}, gadget);


};


Ext.extend(Ext.Desktop.Sidebar, Ext.util.Observable, {
init : function() {
this.centerPanel = new Ext.Panel({
border: false,
region:'center',
bodyStyle: 'background: none'
});

this.gadgetPanel = new Ext.Panel({
title: false,
width: 270,
minWidth: 270,
maxWidth: 270,
border: false,
split: true,
collapseMode: 'mini',
collapsible: true,
region:'east',
autoScroll: true,
items: [{
// empty title to show tools
title: ' ',
width: 245,
baseCls: 'gadgets-container',
tbar : [{
scope: this,
id:'gear',
text: '+',
handler: this.showConfigWindow
},{
scope: this,
text: '

[Foggy]

Sorry i completly dont understand what you try to do. Normally you dont have to change anything in Sidebar.js. Why you want change the config window contents to a chat iframe??
Or you want just add a gadget wich is containing this chat?
So please see and modify gadgets/gadgets.xml and set up your new gadget. So it would be shown up in the "gadget choser" grid...
You can setup a file wich would be loaded per HttpProxy, a icon and some other stuff...
Best would be you take a look at the xml file...

[israel]

i dont now xml i want the + in Sidebar open a window wute iframe
html and i went more + + + + to open more wi~o):-?ndow /ok?

[Foggy]

Ok, you wont another + button to open a window wich is containing your chat per iframe. But i dont understand why, the sidebar isnt a quick-start-menu :)
But you done it on the right way, just add another button in the sidebar's tbar. And as handler function maybe you could make another method in sidebars object, for example something like
handler: this.showChatWindow ...

[israel]

i do ok it open a window but i want more wundow i try what you sauys=D>

[Nagadev]

Hi Foggy,
is it possible to you to share the code ?