PDA

View Full Version : WindowManager Toolbar Item and ObservableWindowGroup



danh2000
25 Jun 2009, 1:53 PM
I've got a couple of new components to release:

1.) WindowManagerItem - This probably needs renaming but is like the Windows Taskbar as a toolbar item.

2.) ObservableWindowGroup - As it sounds.

There are 2 examples in this page - 1 in the west panel and 1 in the center panel - they would not usually be used together on the same page, I'm just demoing 2 different setups:

http://technomedia.co.uk/WindowManagerItem/examples.html

I'm probably going to extend the OWG to expose all events - this may be handy in other situations.

Feedback always apprciated.

Thanks,

Dan

koko2589
25 Jun 2009, 2:11 PM
very good tankyou naw i now to add tbar/bbar =D>

danh2000
25 Jun 2009, 7:29 PM
very good tankyou naw i now to add tbar/bbar =D>

Thanks, Glad you like it!

Can anyone suggest a decent name for this component?

Some considerations (although I'm not entirely sold on any of them):

WindowManagerItem
WindowGroupBar
WindowGroupTaskBar
VisualWindowManager
ToolbarWindowManager

Anyone?

Remy
29 Jun 2009, 1:12 AM
Very nice danh2000 =D>

I would go for WindowManagerToolbar or simply WindowManager.

danh2000
29 Jun 2009, 10:10 PM
@remy thanks for the feedback!

I've updated the code if anyone's using it - I have now hooked into the 'titlechange' event of the window to ensure that the Task button text and tooltip stay in sync.

don4321
30 Jun 2009, 6:34 PM
This is quite interesting. Would I be able to pass a FORM element and run a query based on the element's value and then display data in the newly opened sub_window?

danh2000
30 Jun 2009, 6:45 PM
This is quite interesting. Would I be able to pass a FORM element and run a query based on the element's value and then display data in the newly opened sub_window?

I'm not sure what you mean by pass a FORM element - my component has no control over, or even cares what you put inside the windows - it simply acts like the TaskBar in windows desktop.

As you can see in the following snippet, the part that associates the window with the Taskbar is the manager config - everything else is up to you - so you can use windows in exactly the same way that you currently do.




var mainWindowGroup = new Ext.ux.ObservableWindowGroup(); //create the manager
...
new Ext.Window({
id: 'winid' + mainWinCount,
minimizable: true,
title: 'Window ' + mainWinCount,
manager: mainWindowGroup, //manager
width: 200,
height: 150
}).show();

...

tbMain.add(new Ext.ux.toolbar.WindowManagerItem({
manager: mainWindowGroup //manager
}));

don4321
30 Jun 2009, 6:51 PM
This is quite interesting. Would I be able to pass a FORM element and run a query based on the element's value and then display data in the newly opened sub_window?

danh2000
30 Jun 2009, 6:55 PM
This is quite interesting. Would I be able to pass a FORM element and run a query based on the element's value and then display data in the newly opened sub_window?

Am I supposed to duplicate my last comment too, or is the forum playing up? ;)

don4321
30 Jun 2009, 7:02 PM
What I meant was:


Stage 1:
...
// main window
new Ext.Window({
id: 'mainWin',
minimizable: false,
title: 'Main Window ',
// manager: mainWindowGroup, //manager
width: 700,
height: 550
}).show();


// second window - listening window
new Ext.Window({
id: 'secondWin',
minimizable: true,
title: 'Event Window ',
// manager: mainWindowGroup, //manager
width: 300,
height: 300
}).hide();
// not sure if there's a method called hide, if not, probably show(false) would do


Stage 2
at main window, there's a form input field with whatever value a person enters, then,
I'd like this form's submission go to the 'secondWin' with title 'Event Window', then,
it displays some data, of course the scondWin needs to set its state to show().

Not sure how to do the Stage 2 thing, totally new to Ext, any idea?


Thanks.

don4321
30 Jun 2009, 7:04 PM
On duplicate post, sorry, the forum took me as a stranger as you can see I'm new to Ext :(

danh2000
30 Jun 2009, 7:20 PM
On duplicate post, sorry, the forum took me as a stranger as you can see I'm new to Ext :(


No problem ;)

Regarding your question, I don't actually see how it's related to this component, but yes, what you are asking is possible - something like this maybe if I understand your requirement:



//this function is the callback or listener that we will assign to the form field's change event
var onValueChange = function(f, newVal, oldVal){
//I already created the win2 window, but I could have easily lazily created it within this function
win2.body.update('changed from ' + oldVal + ' to ' + newVal; //update the body of the component
win2.show(); //show the new window
}

//create a window containing a form, containing a textfield
var win1 = new Ext.Window({
items: [{
xtype: 'form',
items:[{
xtype: 'textfield',
listeners: {
change: onValueChange //called when the textfield value is changed
}
}]
}]
}).show();

var win2 = new Ext.Window({
...
}); //note. I don't show this window yet and it is created hidden/


This is quickly typed up code that's untested - I'm just showing you the principal.

You should look at the docs and undertand the Observable model that ext uses then look at the events that each component fires - these are the events that you can subscribe to (as change in my example above).

I don't mind helping at all, but if you have further questions about this, you may want to start a dedicated thread.

Dan

don4321
30 Jun 2009, 7:36 PM
Thanks, that's helpful.

The main window would use a script like ColdFusion script instead of all javascripting.
Also, odd, the ext doc below does not talk a single thing about window,
http://extjs.com/deploy/ext/docs/

Happen to know a better doc about ext window?

danh2000
30 Jun 2009, 7:42 PM
Thanks, that's helpful.

The main window would use a script like ColdFusion script instead of all javascripting.
Also, odd, the ext doc below does not talk a single thing about window,
http://extjs.com/deploy/ext/docs/

Happen to know a better doc about ext window?

That link is very old I believe...

Try these:

http://extjs.com/deploy/dev/examples/samples.html
http://extjs.com/deploy/dev/docs/

The examples are a great resource to see how things are done.

don4321
30 Jun 2009, 8:03 PM
Thanks. they are better links, I have this specific task of converting my existing app to an open source one, but the windows UI got me stuck, too bad, still haven't found a specific solid doc that would help me with the task, do not intend to become a true Ext developer or user type...

Looking for something like but MORE for that's not good enough for my specific need.
http://extjs.com/learn/Ext_FAQ_Misc#Window

zendrael
10 Sep 2009, 3:52 AM
Hi! I am using ExtJS 3.0 and this component does not work. When creating the item on toolbar ( as used in the example ) it produce an error in the ext-all.js .

So I tried to change the libs ( extjs-2 to extjs-3 ) on the example to use it ( and not using the component in my code to check if the problem is or is not in my other libs ) and it does not work either!

The component has an ExtJS 3.0 version? It will be very useful for most applications.

Thanks!

danh2000
10 Sep 2009, 3:44 PM
@zendrael, this version will not work with Ext 3 because Toolbar and it's associated components were re-written for Ext 3.

I have created an Ext 3 version which I'll probably release soon.