PDA

View Full Version : ux.Media[.Flash/Flex] Components 2.1.2



Pages : [1] 2 3 4

hendricd
23 Jan 2008, 10:10 AM
Supported Ext Releases:
2.0.x, License: LGPL3 (ux.Media[flash] RC1 only)
2.1+, 3.0, License: GPL3 (ux.Media.* 2.0 and higher only)

ux.Media/Flash/Flex 2.1.2 is now available on Google Code (http://code.google.com/p/uxmedia/) (SVN (http://code.google.com/p/uxmedia/source/browse/#svn/tags/2.0/source)).

Ext.ux.Media Classes
Embed sounds, video, inline documents into your layouts or as ux.Components, Panels, or Windows.

Predefined media configurations for: PDF, HTML, MOV, Flash, RealVideo, Mp3, WAV, MIDI, PNG, JPEG, GIF, SVG(IE). (add your own as needed).

Ext.ux.Media.Flash
This package also includes a port of SWFObject to Ext (providing Flash Version detection, Inline Express Installation, and a custom event sync (for use with Flash ActionScript event handling within an Ext application.)

Early Alpha Releases are now closed:
UPDATE: .31 Released. Minor fix to _WMV config prototype.

Update:[8-18-2008] Release 2.0 of ux.Media[Flash] classes.
Effective this release, the license has changed to GPL 3.0. See this post (http://extjs.com/forum/showthread.php?p=211163#post211163)for details regarding this change.

Update:[6-5-2009] Release 2.1 of ux.Media[Flash/Flex] classes.
Many enhancements:

mediaMask, loadMask, autoMask
Flash Visibility fixes and plugin for all media objects
New media profiles created : PDFFRAME, Remote Desktop Client, Office Web Connect:XLS, Flash fscommand/Externalinterface support and more.
Built-in Flex-FABridge emulation support included for all Flex Components


Update:[10-18-2009] Release 2.1.2 of ux.Media classes.
New AudioEvents plugin for Ext.Components. -- Add audio (WAV/MP3) sound playback to any Component/Ext.Element by simply defining listeners on objects of interest.

Demos:
JWPlayer (http://demos.theactivegroup.com/demodesk.html?demo=media&script=jwplayer) - ux.Media.Flash.Panel, externalInterface binding example.
Flowplayer (http://demos.theactivegroup.com/demodesk.html?demo=media&script=flowplayer) - ux.Media.Flash.Window (popular MP4, FLV, player with playlist support)
AudioEvents (http://demos.theactivegroup.com/?demo=media&script=audioev) - ux.Media plugin adds audio support to any Component/Ext.Element event.
Flex(FABridge emulation) (http://demos.theactivegroup.com/demodesk.html?demo=flex&script=bridging) - ux.Media.Flex.Panel driving a popular Flex demonstration.

Productivity (new):
OpenOffice (Firefox only) Spreadsheet (http://demos.theactivegroup.com/demodesk.html?demo=media&script=oo-xls)(XLS) and Documents (http://demos.theactivegroup.com/demodesk.html?demo=media&script=odt)(ODT)

Note: the current vBulletin config gzips attachments which IE hates. Download this with Firefox (or other browser) instead of IE.

stumpy_uk
23 Jan 2008, 1:41 PM
Doug,

This is awesome I have been working on something similar and you have just filled in the blanks that I with a few things. Cheers for your help as usual on this forum and especially on this subject.

Cheers

Stumpy

ajaxvador
23 Jan 2008, 1:56 PM
great job, very nice =D>

hendricd
23 Jan 2008, 1:58 PM
Yes, she is, isn't she? ;)

franckxx
24 Jan 2008, 1:11 AM
Very nice work, i've tested your plugin....GREAT ;-)

Thx you for share it ! :D

JorisA
24 Jan 2008, 3:30 AM
Thnx. Great one :)

albeva
24 Jan 2008, 3:43 AM
it would be very nice to have a demo.

mystix
24 Jan 2008, 3:47 AM
ooh neat... =P~

@hendricd, quick question: do you always code with leading commas? they run contrary to my OCD nature. :))



it would be very nice to have a demo.

@albeva, aren't the instructions clear enough?


Samples: Download both zip files and extract all files into a new directory:
/examples/media folder within your existing Ext distribution.

hendricd
24 Jan 2008, 6:23 AM
@mystix -- Yes, I prefer the leading comma syntax for two reasons:

I can see the commas easier (reduces potential for extras), and
I can comment them out during dev (worrying less about the previous lines' comma placement).

That said, I have to go re-fold my underwear now. ;)


~o)

kenshin
24 Jan 2008, 6:53 AM
Very good work!

I have noticed that on my PC IE blocked the excel file opening (invalid use of the activex).

Thank's for sharing! :)

hendricd
24 Jan 2008, 7:16 AM
@kenshin - Thanks. Yes I'm still playing with the Office suite trials ;)

DigitalSkyline
24 Jan 2008, 10:12 AM
Doug -
You save me too much time... I feel like you should be on the payroll!
(not that I could afford you :">)

anyways... I'm trying to use this like:



{
id:'clockPortlet',
xtype: 'flashpanel',
title: 'Clock',
hideMode : 'visibility',
height: 150,
autoWidth: true,
collapsible:true,
border:true,
mediaType:'SWF',
url: '/media/flash/clock.swf',
controls:true,
start:true
}



but nothing is showing up in the panel... any idea?

hendricd
24 Jan 2008, 10:20 AM
Still need the mediaCfg for 'flashpanel':


{
id:'clockPortlet',
xtype: 'flashpanel',
title: 'Clock',
hideMode : 'visibility',
height: 150,
autoWidth: true,
collapsible:true,
border:true,
mediaCfg:{
url: '/media/flash/clock.swf'
,controls:true
,start:true //Commas MUST be on the other side :))
,width: 150
,height:150
,params: { wmode : 'transparent' } //might want this too.
}
}
I take checks! =D>

DigitalSkyline
24 Jan 2008, 10:29 AM
Still need the mediaCfg for 'flashpanel':


I take checks! =D>


o I c. Would width/height be redundant?

RE: take checks?

I wouldn't recommend that :))

PS on second thought, I'm not sure how much time you really save me after I have to rewrite all those commas!

hendricd
24 Jan 2008, 10:39 AM
The seemingly redundant w,h is for the embedded <object> element itself, not its container (Panel.body).

Looking ahead you might want to handle w/h with CSS. Each mediaType has a classNames generated for it as well:



mediaCfg:{
url: '/media/flash/clock.swf'
,id : 'SWFClock'
,controls:true
,start:true
,width: 150
,height:150
,params: { wmode : 'transparent' } //might want this too.
}
#SWFClock.x-media-swf { ... }

DigitalSkyline
24 Jan 2008, 10:50 AM
As long as the object defaults to 100% w/h then I'm happy with it (seems to be the case)
Thanks, btw This works for me:


{
id:'clockPortlet',
xtype: 'flashpanel',
title: 'Clock',
height: 150,
autoWidth: true,
collapsible:true,
border:true,
mediaCfg:{
mediaType:'SWF',
url: '/media/flash/clock.swf',
controls:true,
start:true
}
}

hendricd
24 Jan 2008, 10:54 AM
MediaPanel.Flash ignores the mediaType as it's known by the class anyway.

For what you're doing, this would be equivalent:



{
id:'clockPortlet',
xtype: 'mediapanel',
title: 'Clock',
height: 150,
autoWidth: true,
collapsible:true,
border:true,
mediaCfg:{
mediaType:'SWF', //here it would be required
url: '/media/flash/clock.swf',
unsupportedText:'You need Flash to tell the time.',
controls:true,
start:true
}
}

DigitalSkyline
24 Jan 2008, 11:14 AM
Gotcha ...

Anyways, I think I might have found a bug, where this panel covers the next item [panel]'s header when expanded.

http://DigitalSkyline.com/media/images/captures/2008-01-24_1408.pnghttp://DigitalSkyline.com/media/images/captures/2008-01-24_1411.png

...hmm...

hendricd
24 Jan 2008, 11:23 AM
Unfortunately the nature of portlets requires hideMode:'display' in order for collapse to work (reflow) as designed.

try putting that params:{wmode : 'transparent'} in the mediaCfg.

or

or Extend MediaPanel to create a MediaPortlet as in the Portlet examples. I believe it has anchor in there, no ?

Short of that, post more of your Portlets code.

DigitalSkyline
24 Jan 2008, 11:33 AM
params:{wmode : 'transparent'}

resulted in this:



http://DigitalSkyline.com/media/images/captures/2008-01-24_1429.png

The thing is, the clock is not defined as "portlet" The portal is beneath:



//init Sidebar
new Ext.Panel({
region: 'east',
title: "Sidebar",
id: 'SideBarPanel',
layout: 'rowfit',
split: true,
width: 250,
minSize: 250,
maxSize: 250,
titlebar: true,
collapsible:true,
animate: true,
border: false,
frame: true,
tbar : ['->',
{
id: 'addWidgetbtn',
text: 'Add Widget',
handler:dsExt.widgetDialog,
cls: 'x-btn-text-icon',
icon: dsExt.vars.ImgPath+'silk/cog_add.png',
tooltip:'Add Widgets to Your Sidebar'
}],
items: [{
id:'clockPortlet',
xtype: 'flashpanel',
title: 'Clock',
height: 150,
autoWidth: true,
collapsible:true,
border:true,
mediaCfg:{
mediaType:'SWF',
url: '/media/flash/clock.swf',
controls:true,
start:true,
params:{wmode : 'transparent'}
}
},{
//Portal goes here
xtype:'portal',
autoScroll:true,
items:[{
id: 'SideBarPortal',
columnWidth:.99,
items:[{
title: 'Welcome Message',
plugins: new Ext.ux.MaximizeTool(),
html : '<p>Welcome to the blah blah blah.</p>',
draggable : true,
tools: tools
}]//end portal items def
}]
}]
}),//end Sidebar

hendricd
24 Jan 2008, 11:44 AM
I think you need to give 'clockPortlet' some more height, and the portal a top margin.
Never quite seen a rowfit layout like that.

Can you join me on IRC ?

DigitalSkyline
24 Jan 2008, 12:09 PM
IRC ... been so long I forgot how to get in there... but alas I'm in #extjs

dolittle
24 Jan 2008, 4:08 PM
I have a crazy idea that could be a workaround for all the flash issues.

Instead of putting the object element in the panel's body, attach it before the panel.el and use css on exapnd and collapse.


onRender : function(ct, position){
Ext.ux.mediaPanel.superclass.onRender.call(this, ct, position);

this.media = Ext.DomHelper.insertBefore(this.el, {tag:'div', cls:'x-media'}, true);

this.media.update(this.html);

},

handle the collapse:

afterCollapse : function(){
Ext.ux.chatWindow.superclass.afterCollapse.call(this);
this.widgetWrap.addClass('x-media-collapsed');
},


.x-media-collapsed{position:absolute;left:-10000px;top:-10000px;visibility:hidden;}

handle the expand:

expand : function(animate){
Ext.ux.mediaPanel.superclass.expand.call(this);
this.media.removeClass('x-media-collapsed');

},


.x-media{
position: relative;
bottom: -100px; /* should be set dynamicaly to handle different object heights?
}

The panel should have height that will be able to contain the object.

What do you think?

hendricd
24 Jan 2008, 7:10 PM
@dolittle - Thanks for input. To my knowledge, the issue (which is manageable) concerns actually changing any <object> size or position on most browsers except IE (of all things !).

The workaround for that is not to move it (eg offsets), but by the use of visibility:hidden.

The goal (mine anyway) is to preserve existing Panel features (tbar, bbar, etc) at the same time.

I am working on a lighter-weight Component that lacks all that position baggage you're inferring. More to come..

Tom Pan
24 Jan 2008, 8:36 PM
cool Work!!!:D

dolittle
25 Jan 2008, 2:42 AM
@hendricd

Consider a situation when using your media panel just as a panel not in a card/tab layout.

When we collapse the panel with visibility:hidden, wouldn't the panel's body still preserve it's space in the doom?

1. I have content behind the media panel, will I be able to click on it when the visibility:hidden?

2. I'm putting my panel on the bottom of the screen like gmail chat windows, I'll wish the panel header will fall to the bottom when the panel is collapsed. That only happen with display:none.

3. I want to preserve the state of the panel. A simple example will be the position of a scroll bar in a div inside the panel body. When using display:none the scroll bar always restart itself to the top of the div.

I realize my workaround is complicated but it solves all this.

I'll be happy to hear about a simpler solution.

Thanks

hendricd
25 Jan 2008, 5:50 AM
@dolittle -- Since MP is implemented as a Panel, you have complete control over its hideMode:'display/visibility/offsets'.

I should have elaborated on the issue more:
The main issue is what most browsers (except IE) do to the <object> content when its size (display:none) or position changes . The plugin gets "re-initialized" when either of those events occurs.
For streaming media/audio, that means the player starts again.
For Acrobat, the document is reloaded again and resumes viewing at Page 1.

hideMode:'visibility' gives you an option for how/when those issues are addressed in your layout.
(Hopefully all this gets fixed in FF3.)

dolittle
25 Jan 2008, 6:05 AM
@hendricd

I was also talking about the reload of the <object> element on FF.

setting visibility:hidden will work but will have other issues.
tab layout will work fine.

If you collapse one panel in a layout like in the portal where you have several panels on top of each other, you'll expect the panels beneath the collapsed one to be shifted upward.

When using display:none it will happen but when using visibility:hidden the panel's body will still keep its place in the dom so there will be a gap between that panel and the others.

Do I make sense?

hendricd
25 Jan 2008, 6:20 AM
Yes, you do, and I think think we're talking about the same issues/resolutions.

Where ARE we going with this? :))

dolittle
25 Jan 2008, 6:29 AM
My research lead me to the same conclusions as you. We can't:

- use display:none
- change the <object> element place in the DOM
- and as I said can't use visibility:hidden for layout other then tabs layout.

The only solution I found is to use position:relative and top:-10000px on the <object> element so it will still play but be outside of the view port.

The problem is that if the <object> element is a child of the panel's body and you use the above css the panel height will be 10000px + the normal height.

So I've tried attaching the <object> element above the panel.el and use css to place it inside the panel's body when the panel is expanded and outside of the view port when it's collapsed.

I haven't found an elegant way to deal with different <object> and panel's body height yet.

If you are not interested in all this I'm sorry and won't hijack your wonderful extension thread any more :)

hendricd
25 Jan 2008, 6:37 AM
Sorry:

So I've tried attaching the <object> element above the panel.el and use css to place it inside the panel's body when the panel is expanded and outside of the view port when it's collapsed.
That's the part I was missing (didn't see) in all this. ;)

Have you had any luck with other media types besides Flash using that approach ?

dolittle
25 Jan 2008, 6:54 AM
I have tried this with a FLASH widget and a div with a scrollbar.

I haven't tried other media types but I don't see any reason for it not to work.

Do you have an idea how to deal with different <obect> heights with my approach?

The only way I see is:

- dynamically calculate the <object> height and set the panel's body height in accordance.
- on expand to use position relative with bottom: -<obect> height px.

Do you know of a FLASH player that can play shoutcast streams?
It could be a cool addition to your demo.

hendricd
25 Jan 2008, 7:07 AM
Do you have an idea how to deal with different <obect> heights with my approach?

The only way I see is:

- dynamically calculate the <object> height and set the panel's body height in accordance.
- on expand to use position relative with bottom: -<obect> height px.Much depends on how the plugin renders itself (borders, margin, etc) You'd really have to consider each an a case-by-case basis.
Do you have a class derived from (BoxComponent level? instead of Panel) defined that uses your approach. I'd be curious what that looks like.


Do you know of a FLASH player that can play shoutcast streams?If you have a site Url to examine, it would be a simple matter to create a mediaCfg for it.

dolittle
25 Jan 2008, 7:29 AM
We can put the <object> inside a div and then check the div height.
With this height we can dynamically handle the expand and collapse of the panel.

An example for a shoutcast stream is:
http://207.200.96.230:8000/

There are millions more at:
http://www.shoutcast.com/
http://www.live365.com/index.live

I guess it is possible to play it with media player but it will be realy great to play it with FLASH.

hendricd
25 Jan 2008, 8:00 AM
Its my understanding Flash wont work with shoutcast because SC doesn't use HTTP headers. Flash requires it.

I've read you'd need to proxy the playlist on your server and provide the necessary headers for the flash object.

mystix
25 Jan 2008, 9:56 AM
That said, I have to go re-fold my underwear now. ;)


nay, 'tis a job for
http://img521.imageshack.us/img521/9319/pcunderwearlargesmallsl8.jpg
(captain underpants)

:))

say, what do you do @ theactivegroup.com (http://theactivegroup.com)?
all i got was an "Under Construction" page... :-?

hendricd
25 Jan 2008, 11:21 AM
Fixes a nasty constructor bug, and width/height defaults for mediaCfg.

dolittle
28 Jan 2008, 3:12 AM
@hendricd

I think it is possible to hide <object> containing FLASH using:

width:0;
height:0;
instead of display none. This will solve the FLASH reload issue in firefox.

With a little modification to the panel class none of the functionalities should be affected.

stumpy_uk
28 Jan 2008, 7:44 AM
Doug,

As I said previously thanks for this I have learnt so much about EXT just looking at how you have done this it really has been awesome. I have one problem which you may have come across but I am unable to debug. When using IE 6.x and playing flash now and again when starting a SWF the page goes white and stays with nothing on it like EXT has crashed. I have tried EXT-DEBUG and also Firefox (which does not have any problems). Just wondered if you came across it during your development.

Cheers

Lee

hendricd
28 Jan 2008, 8:22 AM
@stumpy_uk -- Thanks. Much depends on the Flash object you are rendering and the conditions by which the Panel is displayed/oriented beneath/on-top-of other elements. If you posted your panel/mediaCfg something obvious might be visible.

hendricd
28 Jan 2008, 9:54 AM
@dolittle - Thanks. I'll give that a try with my test suite and let you know it turns out.

simeon
28 Jan 2008, 10:13 AM
hendricd,

You might want to test your media panel in a ssl environement.

Awhile ago I ran into problems with embedding audio into firefox when using ssl.(https)
For some reason the firefox plugin for playing wav files doesn't work in that environment.

I was able to get it to work in https by using <object> for IE and <embed> for Firefox.

My code in case it helps:



var iePlayer = '<OBJECT ID="MediaPlayer" WIDTH=100% HEIGHT=40 CLASSID="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" STANDBY="Loading Windows Media Player components..." TYPE="application/x-oleobject">'
+'<PARAM NAME="FileName" VALUE="' + audioSrc + '">'
+'<PARAM NAME="AutoStart" VALUE="0">'
+'</OBJECT>';

var ffPlayer = '<div id="ffAudioPlayer"><embed height="20" width="100%" controls="SMALLCONSOLE" autoplay="false" src="' + audioSrc + '"/></div>';

hendricd
28 Jan 2008, 10:17 AM
Was 'audioSrc' an absolute URL (https://...) in that scenario? Certain plugins have trouble with secure relative addresses.

simeon
28 Jan 2008, 10:23 AM
It was a relative URL. I will experiment with it using absolute urls. Thanks for the tip.

devnull
28 Jan 2008, 4:23 PM
I have been experimenting with this and have been experiencing z-index problems. I just have a flat layout without any tabs or other such lazy rendered components, but there are a few places where date choosers and combo listboxes end up overlapping the mediapanel (which I am using as a flashpanel). whever these overlaps happen, the flash object ends up on top, obscuring the date chooser or combo listbox.
Any ideas how to deal with this problem?

hendricd
28 Jan 2008, 4:27 PM
Try adding:


params:{wmode:'transparent'}


to your mediaCfg.

Flash params reference is here (http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_12701&sliceId=1).

devnull
28 Jan 2008, 4:50 PM
well i'll be... i coulda sworn i had already tried that, thanks. in fact now that i went back and checked, that didnt work in my implementation but does in yours :)
now, is there any sort of built-in functionality to update some or all of the params and force the flash object to refresh.
basically I am looking to emulate my current solution:
(ofc1 being an SWFObject)

ofc1.variables = {param1: 'blah'...etc};
Ext.getCmp('chart1').body.dom.innerHTML=ofc1.getSWFHTML()

perhaps all I need to do is expose the internal SWFObject if it isnt already, mostly just curious if theres any existing functionality for this before i go hacking things apart.

hendricd
28 Jan 2008, 5:06 PM
now, is there any sort of built-in functionality to update some or all of the params and force the flash object to refresh. That depends on the type and interface your flash object exposes. Some honor commands sent thru the 'FSCommand' interface, but must be written that way.

Both ux.MediaPanel and ux.MediaPanel.Flash use the mediaCfg to pass SWF params (including embedded flashVars):



....
items:[{
xtype:'flashpanel'
,title : 'Annual Sales'
,id : 'salesChart'
,mediaCfg:{
url :'chart.swf'
,width :425
,height :355
,controls :true
,start :true
,unsupportedText : 'Go get Flash first fool'
,requiredVersion : '9.0.45'
,params:{
wmode:'transparent'
,flashVars:{name:'value', series:'A'} //Url encoded for you, or
// ,flashVars:"name=value&series=A" //pass as a string
}
}
}] //end items
When the panel is rendered, the SWFObject is exposed as:


myChartPanel.SWFObject.dom
This permits the declaritive approach rather than using API (SWFObject) calls to achieve the same thing before the SWF object is rendered.

Pure Ext. No need for SWFObject API at all now.

hendricd
28 Jan 2008, 10:49 PM
See first post (http://extjs.com/forum/showthread.php?p=113559#post113559)for release notes.

devnull
29 Jan 2008, 8:26 AM
Very cool, thanks again for making this.
I was thinking about it a bit last night at home, and what I want really is not within the scope of what mediaPanel itself is designed to provide. However, it is the perfect base upon which to build my chartPanel, so I will get to work on extending it :)

hendricd
29 Jan 2008, 8:33 AM
What you got your "sites" set on, a Flash Chart Class?

devnull
29 Jan 2008, 9:56 AM
Yes, thats the idea. I have already been using the excellent open source Open Flash Chart object within a panel, but I think it would be very usefull to many people if it were implemented as its own panel, with helper functions to make configuration easy. I am planning on experimenting with techniques that will associate it with a dataStore, hopefully in much the same way that grids are associated with stores. In fact, in my case it will be associated with the same store as an existing grid.

devnull
29 Jan 2008, 12:22 PM
It seems I have either confused myself or am not understanding what you are saying about not needing the SWFObject API anymore...
I am needing to access the addVariable() delVariable() etc functions and 'variables' property that are provided by (i think) SWFObject normally, but I cannot find them in the object returned by getSWFObject or the SWFObject property.

hendricd
29 Jan 2008, 1:01 PM
the 'variables' you speak of (of SWFObject.addVariable fame) are equivalent to MP (and flash's flashVars parameter.

The popular SWFObject API simply renderers the appropriate <param> tags when you are done calling addVariable.

MP does the same thing (but with more flexibility) using the declaritive approach with the media config.



{
xtype : 'flashpanel'
,mediaCfg:{
mediaType : 'FLV'
,url : 'http://www.jeroenwijering.com/upload/imagerotator.swf'
,start : true
,controls :true
,height :400
,width : 650
,params:{
wmode :'transparent'
,allowscriptaccess : 'always'
,allowfullscreen : true
,quality : 'high'
,scale :'exactfit'
,salign :'tl'
,flashVars:{
width :'@width'
,height :'100%'
,file :'http://api.flickr.com/services/feeds/photos_public.gne?tags=macro&format=rss_200'
,shownavigation:true
,transition : 'random'
,lightcolor: 0x990066
,overstretch :'fit'
,autostart :'@start'
}

}
}
}
It completely replaces the need for SWFObject API (IOW: mediaPanel does the same thing, but the advantage is it can all be lazy-rendered).

The mediaPanel.getSWFObject() returns the DOM interface of the plugin. Once it's rendered nothing can change any of the 'variables' (unless the plugin exposes a Java/JS interface to do so).

devnull
29 Jan 2008, 2:07 PM
Ok, that makes sense to me.
Because of the dynamic nature of the charts I will be generating and the fact that they get their data through the use of flashVars, I need to be able to easily add/remove/update those vars on the fly. For this reason it makes alot more sense for me to go ahead and use a full SWFObject internally and just use some glue logic to make it all work. This really means that it no longer makes sense to use mediaPanel as a base, but to extend panel directly.
I already have it roughed out tho, and thanks to your wonderfull extension I have learned alot about how to do it. I will soon make a separate thread with the code for my own chartPanel :)

hendricd
29 Jan 2008, 2:15 PM
I don't think you still understand. The SWFObject API does the same thing as MP (but uses document.write as the page is being loaded. Once its rendered, the <object/embed/param> tags are no longer modifiable.

Before you get too deep in starting over with panel, study the YUI Chart (Experimental) widget. It uses the SWFObject API to simply render the chart.swf with some flashVars (the series). I think once you snoop at what's rendered when the page is loaded, you'll see what I mean.

Good Luck with it.

devnull
29 Jan 2008, 2:51 PM
I believe I do understand; once it is rendered, the only way to give it new flash vars is to replace the entire <object/embed/param> tags. Since the SWFObject API already contains methods to manage the flash vars, it still makes sense for me to use it, and just (re)assigning the return of getSWFHTML() to my panel's body.dom.innerHTML property. This is working quite successfully with a suprisingly small amount of panel extension code, my only issue being a weird double border around the panel after the first reload.

hendricd
29 Jan 2008, 2:58 PM
Sorry, your previous post finally clicked. "You want to re-write the tags into the panels body." I was considering implimenting that in the upcoming version ;)

hendricd
30 Jan 2008, 6:24 PM
@devnull - You got your wish (with the renderMedia(mediaCfg) method) =P~

devnull
31 Jan 2008, 9:31 AM
Haha thanks, I will take another look at it :)
I do have my chartPanel working quite well for my purposes, I am just trying to decide how best to make it more "generic". I wouldnt mind being able to dump the SWFObject requirement it has so as to avoid loading more javascript so I will definently try to integrate it with mediaPanel.

devnull
31 Jan 2008, 2:39 PM
Well I am getting there, I have high hopes at least. I have encountered a problem with how the flashVars are inserted into the html, so I created a special case within the mediaMarkup method for flashVars that uses the same encoding technique that SWFObject uses.
The specific problem was that arrays in the flashVars object were getting ignored.


var params = Ext.apply(media.params||{},m.params || {});
for(var key in params){
if(params.hasOwnProperty(key)){
m.children || (m.children = []);
if(key == 'flashVars'){
var variables = params[key];
var variablePairs = new Array();
for(pair in variables){
variablePairs[variablePairs.length] = pair +"="+ variables[pair];
}
var pairs = variablePairs.join("&");
m.children.push({tag:'param',name:key,value: pairs } );
} else
if(params[key] !== null){
m.children.push({tag:'param',name:key,value:(typeof params[key] == 'object'?Ext.urlEncode(params[key]):encodeURI(params[key])) } );
}
}
}

stumpy_uk
2 Feb 2008, 3:51 PM
Doug,

One query for you is when I have closed down an SWF I can't reopen that Tab until I open a different one first. Do you know why that is ?

Cheers

Stumpy

hendricd
2 Feb 2008, 8:21 PM
One query for you is when I have closed down an SWF I can't reopen that Tab until I open a different one first. Do you know why that is ?

@stumpy_uk:
Sorry, should have displayed this earlier:

For the Demo, the treeNode handler is designed to permit reloading of the current/modified mediaCfg without rendering a new panel(refresh), by clicking on the same demoNode again.
From the tree nodeHandler (handles all tab creation based on node selection):
var tab;
if(tab = this.tabs.getItem(idClicked)){ //if tab already exists
this.tabs.setActiveTab(tab);
tab.renderMedia(); //force media Refresh
} else {
tab = this.tabs.add(..... ("I forgot all about the tabDestroys tho". Hey, its a demo. ;)

hendricd
2 Feb 2008, 8:58 PM
Well I am getting there, I have high hopes at least. I have encountered a problem with how the flashVars are inserted into the html, so I created a special case within the mediaMarkup method for flashVars that uses the same encoding technique that SWFObject uses.
The specific problem was that arrays in the flashVars object were getting ignored.


var params = Ext.apply(media.params||{},m.params || {});
for(var key in params){
if(params.hasOwnProperty(key)){
m.children || (m.children = []);
if(key == 'flashVars'){
var variables = params[key];
var variablePairs = new Array();
for(pair in variables){ << Assumes an object only
variablePairs[variablePairs.length] = pair +"="+ variables[pair];
}
var pairs = variablePairs.join("&");
m.children.push({tag:'param',name:key,value: pairs } );
} else
if(params[key] !== null){
m.children.push({tag:'param',name:key,value:(typeof params[key] == 'object'?Ext.urlEncode(params[key]):encodeURI(params[key])) } );
}
}
}


mediaCfg.params may be represented in either object notation {name:value} (which Url encodes/escapes things for you) or...

simple strings (seriesdata1=value&seriesdata2=value&...... ), your custom serialization/encoding. Streams of this type could be generated serverside likely easier than JSON output. (The string you pass in will be URI-Encoded however. )

(Array encoding techniques used by Flash developers vary greatly and the string option lets everyone get creative on their own.) ;)

Actuarybrad
3 Feb 2008, 1:10 AM
I have had success with this plugin for different flash charts:

http://extjs.com/forum/showthread.php?t=20799


Not too crazy about flash...trying out jpgraph.....php and renders type image/png...good excuse to try Doug's MediaPanel. :D

devnull
4 Feb 2008, 9:17 AM
Well whatever the code does or does not do, it makes the flashVars 100% compatible with what SWFObject users will be expecting, which I think is worth having.
In this particular case, I was feeding in an array which simply got ignored. the flash object is expecting "param1=1,2,3", which SWFObject gave it.
As to using flash or not, I see no reason why I should need to make another trip to the server to get data that already exists in javascript memory, and the only way I really know how to render graphs client-side is via flash. I am not crazy about flash either, but I see it as being the lesser evil in this case.

hendricd
4 Feb 2008, 11:44 AM
@devnull: Sorry, the point I was trying to make is:

You would do the same thing this way using mediaCfg, as object:



params: {
flashVars:{
width :'@width'
,height :'100%'
,param1 : yourArray.join(',')
,lightcolor: 0x990066
,overstretch :'fit'
,autostart :'@start'
}
or, as a string:


params:{
flashVars:'width=@width&param1='+yourArray.join(',')+'&.........,
..........
}
As I mentioned earlier, the fact that any param (not just flashVars) can be an object or a string means you have this sort if flexibility.

Your approach hard codes Flash-specific array handling into every media-class. (Trying to avoid behaviour like that) ;)

And, I was not inferring that you must load a mediaCfg (or flashVars descriptor ) from the server. I meant you could have a server-side script which queries your DB and returns either an array, JSON, or string containing a large chart series; (or create it locally if you prefer) and push that into your flashVars dynamically.

dolittle
8 Feb 2008, 4:03 PM
Can I set automatically the Panel to be the exact width a FLASH widget + the borders?

I've tried autoWIdth and width but I think it fits the outer container and doesn't consider the inner content.

Thanks

hendricd
8 Feb 2008, 7:55 PM
AH, this is the cool thing about Flash geometry, put IT to work.

Every Flash object implementation is different, but if you know the basic/fixed geometry of your flashObject then fix your panel h/w, then tell Flash to handle it:



{
: 'Clock'
,id : 'clockPanel'
,xtype : 'mediapanel'
,hideMode : 'visibility'
,autoScroll: false
,autoHeight : true
,autoWidth: true
,mediaCfg : {
mediaType:'SWF'
,.............
,height:130 //<object> tag fixed height for initial aspect ratio
,params: {
wmode :'transparent'
,scale :'exactfit'
,salign :'t'
}
}
}


Much easier !

israel
9 Feb 2008, 7:43 PM
--------------------------------------------------------------------------------

it would be very nice to have a demo

hendricd
9 Feb 2008, 7:47 PM
Sorry, the demo is included in the distribution. create an /examples/media and dump it in there.

SlashEMc2k
12 Feb 2008, 7:25 AM
Can I request the impossible please... .. ;)

If you put the pdf into a window panel then activate another window layered ontop the <object> takes precedence over all other elements. (I guess it is because it is an embedded item and has its own rules withing the browser..) So all additional windows are hidden below the object, even though the containing window has a lower z-index..

Would it work if you dropped the object into an iframe? :)

hendricd
12 Feb 2008, 7:46 AM
Ext.Window complicates this a great deal because of the deep DIV heirarchy:

DragProxy, shadowDiv, el, bwrap, body, and finally <object>.

Maintaining z-index (other than 'auto') in that herd is non-trivial. WindowManager.bringToFront helps somewhat.

I'm still studying that behavior, tho....

DigitalSkyline
12 Feb 2008, 10:55 AM
It does seem logical that an Iframe would fix this issue ... perhaps via shim? If not shims maybe some combination of your miframe and media panel?

hendricd
12 Feb 2008, 12:26 PM
No, my original PDF prototype (written in fact for a MIF demo) rendered the PDF object in the IFrame, but then that created focus problems for the PDF object itself if your changed Window/tab focus.

Bottom line, there are fewer issues with IE than FF (believe it or not) when it comes to object/embed.

FF3, I hope fixes all that.

SlashEMc2k
12 Feb 2008, 2:08 PM
I've noticed another strange bug but with flash.

Open up 2 windows.
Put the window with an interactive flash object over the other window (this can just contain html it doesn`t need the xtype mediapanel).

Now try to interact with the flash object i.e. click a flash button functionality appears frozen?

Move the window with the flash object off the other window and functionality works..
Its a strange one??

I was using FF 2.0.0.11
I have wmode transparent enable on my flash object to allow window layers to work.

basshcm
12 Feb 2008, 2:33 PM
Is there a way to display a wait msg while the Pdf is downloading? It looks like there is a "standby" config option for one of the other types (.mov I think).

I understand there are differences in the two types. i.e. the mov is buffering information down.

hendricd
12 Feb 2008, 3:47 PM
@SlashEMc2k -- Yes, I've noticed that too. FF handles embedded object (including iframes) rather poorly. You're really at the mercy of FF and the plugin author with regards to transparency/opacity/z-index internals. In general, Ext.Windowed implementations will suffer the most on FF, due to these problems. Hopefully all that is fixed in FF 3.0.

@basshcm -- embedded <object>s typically do not support enough event interaction with their hosts to supply a usable event to turn off a loadMask reliably, which is why I did not bother even trying to implement one for MediaPanel/FlashPanel at this time.

stumpy_uk
17 Feb 2008, 2:13 PM
Doug,

Loving this work and came back to see how it had progressed, having downloaded the last release I now get an error when trying to play a Windows Media File..


el has no properties
[Break on this error] el.setVisibilityMode(Ext.Element[this.hideMode.toUpperCase()] |...


Am I missing something as all the previous versions ave worked perfectly and all the other components work but this one errors in FF as shown above.

Cheers

Stumpy

hendricd
17 Feb 2008, 7:14 PM
@Stumpy -- sorry 'bout that. The new class heirarchy (introduced .3) now enforces the <object> 'type' attribute and I forgot to provide one for WMV. :">

Modify your source file prototype for WMV, add the proper type:



,"_WMV" : Ext.apply(
{tag :'object'
,cls : 'x-media x-media-wmv'
,type :'video/x-ms-wmv'
,data : "@url"
,params : {
src : "@url"
,url : "@url"
,autostart : "@start"
,showcontrols : "@controls"
}
},Ext.isIE?{classid :"CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"}:false)...and, I'll add that into the next build.

luv2hike
19 Feb 2008, 3:29 PM
This is really neat, but I must ask what the purpose is over using an iframe? Here is my example. I have a border layout and want a PDF loaded into the east panel. I have it working with the following before finding this plugin.



...
spanel = new Ext.Panel({
region: "east",
bodyStyle: blankBgStyle,
title: " ",
width: 400,
autoScroll: true,
collapsible: true,
collapseMode: 'mini',
hideCollapseTool: true,
split: true
});
...


Then when I want to load the panel with the PDF, I do:



spanel.load({
url: "showpdf.html"
});


And the showpdf page (which could also be a JSP with iText generated PDF or variable filenames) is a simple iframe:



<iframe src="results.pdf" width="100%" height="100%" scrolling="no" frameborder="0">
Your browser does not support frames or is currently configured not to display frames.<br/>
Click <a href="results.pdf">this link</a> to view the report then use your Back button to return to this page.
</iframe>


So it may not be "pretty" but it appears to work and work well. What am I missing? Is there a shortcoming that will come back to bite me that requires this plugin? Other advantages I'm not seeing? I appreciate any input as I'm only 2 weeks into my ExtJS learning curve, so thanks!

basshcm
19 Feb 2008, 7:22 PM
If I have a medialPanel of mediaType "HTM" and inside the called .htm page I have a Javascript function, how would I reference the existing Ext object. Do I have to traverse all the way up the dom and back down to get to it or is there an easier way?

luv2hike
19 Feb 2008, 7:34 PM
I believe you can assign the Ext object an id then get a reference to it with Ext.getCmp('the_id').

hendricd
19 Feb 2008, 8:22 PM
@basshcm - luv2hike is on the right track. HTML <object>s are really iframes, so:



parent.Ext.getCmp('the_id')
....should do just fine.

hendricd
19 Feb 2008, 8:28 PM
@luv2hike -- the primary advantage is that the <objects> are wrapped in an Ext.Panel (toolbars, etc) without the overhead of an IFrame (you have cleanup for IE) and you have better control over plugin parameters.

There are some sprecial tricks you have to play with a PDF Iframe when used in a TabPanel scenario as well.

aconran
19 Feb 2008, 8:55 PM
Doug -

Jack recently upped the size limit for zips that you can attach. You may be able to put everything in a single zip now to make it more convenient :D

basshcm
19 Feb 2008, 9:05 PM
@basshcm - luv2hike is on the right track. HTML <object>s are really iframes, so:



parent.Ext.getCmp('the_id')
....should do just fine.
@luv2hike and hendricd
Thanks for the quick replies. That was what I was originally thinking but when I try using Ext. or parent.Ext. I get a javascript error saying that Ext or parent.Ext is null or not an object.

bidyut
21 Feb 2008, 11:32 AM
I think couple of pages before you have mentioned about the swfobject and you do give access to the swfobject by the method getswfobject. Now my question is how do I add variables to the swfobject?

The problem I am facing is that I am getting the data asynchronous way. So I want to use the add variable method once the data is loaded.

stamm
21 Feb 2008, 12:00 PM
@luv2hike and hendricd
Thanks for the quick replies. That was what I was originally thinking but when I try using Ext. or parent.Ext. I get a javascript error saying that Ext or parent.Ext is null or not an object.

This happens within InternetExplorer right?
I have the same problem (Ext 2.0.0).
Is it a ExtJS-Bug? Any Solution?

hendricd
21 Feb 2008, 12:28 PM
I think couple of pages before you have mentioned about the swfobject and you do give access to the swfobject by the method getswfobject. Now my question is how do I add variables to the swfobject?

The problem I am facing is that I am getting the data asynchronous way. So I want to use the add variable method once the data is loaded.

@bidyut -- the .renderMedia method was added to handle just that scenario. You would use it something like this:



Ext.Ajax.request{
url:'getFlashConfig.php'
,success:function(response){

// var flashVars = Ext.decode(response.responseText); //if JSON
var flashVars = response.responseText; //or a serialized string name=value&....

flashPanel.renderMedia( {
mediaType :'SWF'
,url :'yourSWF.swf'
,unsupportedText : 'Flash is not installed'
,params :{flashVars: flashVars }
});
},......

You didn't say what you were sending back, just the variables or the entire mediaCfg? Your choice really.

@basshcm -- unfortunately the generic <OBJECT> for html provides only a lite-weight interface. You'll need to use an IFRAME for that level of interaction. :(

bidyut
21 Feb 2008, 1:03 PM
I am actually returning back the flash vars. I could return it anyways depending on the flash charting application. But your suggestion seems to be pretty good. Let me see if I can use your suggestion and make it work.

By the way, your Extension is very nice. It makes my life so easy.

basshcm
21 Feb 2008, 1:08 PM
@stamm

No I have not had time to try resolve it. I have a couple of things I want to try but currently I am looking at Doug's ManagedIFrame plugin. I might try to go that way for my html pages. It looks like it will give me some additional functionality.

Makor
25 Feb 2008, 4:29 AM
mapPanel= new Ext.ux.MediaPanel.Flash({
frame: false,
split:false,
id : 'clockPanel',
xtype : 'mediapanel'
,hideMode : 'visibility'
,autoScroll: false
,autoHeight: true
,autoWidth: false,
width: 642,

mediaCfg : {
mediaType:'SWF'
,url: 'resources/flash/map.swf'
,id: 'map'
,start :true
,controls :true
,width:640
,height:340 ,requiredVersion : '9.0.95' //a bogus version forces Update
,params: {wmode:'transparent',scale:'exactfit',salign:'t'}
}
})


But flash is always on top...
4799

luv2hike
26 Feb 2008, 9:14 AM
I'm trying to use this plugin for a PDF-generating servlet as the url instead of a file on disk. My servlet uses iText and returns the pdf stream in the response with a type of application/pdf. I have a test html page that calls it with the parameters needed and displays the results in an iframe. However, when I try to call the servlet with the MediaPanel's url, my parameters are always null when they reach the servlet which causes the pdf generation to fail. Has anyone done this successfully?

My attempt that fails since parmA and parmB are always reported as null in the servlet's log:


var pdfPanel = new Ext.ux.MediaPanel(
{
id: "oldtestcard",
loadMask: true,
xtype: 'mediapanel',
mediaCfg:
{
mediaType: 'PDF',
url: 'makePdfServlet',
method: 'POST',
params: { parmA: 1, parmB: 2 },
unsupportedText: 'PDF viewer is not installed.'
}
});


My static html test page to verify the servlet works and the PDF displays when given the correct parameters:


<iframe src="makePdfServlet?parmA=1&parmB=2" width="100%" height="100%" scrolling="no" frameborder="0">
Your browser does not support frames or is currently configured not to display frames.
</iframe>

hendricd
26 Feb 2008, 9:18 AM
mediaCfg:params are not used for URL/Post encoding. They are parameter definitions for the embedded <object> tag only.

You would simple add your encoded params to the URL spec:



url: 'makePdfServlet?paramA=3&paramB=4',

luv2hike
26 Feb 2008, 9:40 AM
Thanks, hendricd, that worked! Now I cannot find a way to replace the MediaPanel's content to update the PDF on a user event. Is this supported? Or do I need to recreate a new object and replace it in my layout each time?

Something like (where pdfPanel is the MediaPanel previously created/loaded):


testGrid.on("rowdblclick", function(thegrid, rowidx, evtobj)
{
pdfPanel.load(
{
url: "makePdfServlet?parmA="+thegrid.store.getAt(rowidx).get('widget')+"&parmB="+thegrid.store.getAt(rowidx).get('gadget'),
method: "POST",
loadMask: true
});
});


Thanks!

I failed to mention that when I run the above code, the servlet DOES get called with the correct parms, but the response gets loaded directly into the container as "junk" - the binary representation of the PDF stream, instead of updating/reloading the PDF plugin.

hendricd
26 Feb 2008, 9:52 AM
@luv2hike: You would use the :renderMedia method of the panel to do an in-place refresh:



var pdfConfig = { //save for later use
mediaType: 'PDF',
url: 'makePdfServlet',
//method: 'POST', //<object> tag doesn't support POST
unsupportedText: 'PDF viewer is not installed.' ,
params : { page : 2 }
} ;

testGrid.on("rowdblclick", function(thegrid, rowidx, evtobj){
pdfPanel.renderMedia(Ext.apply(pdfConfig,
{url:'makePdfServlet?parmA' + thegrid.store.getAt(rowidx).get('widget')+
"&parmB="+thegrid.store.getAt(rowidx).get('gadget')
}));
});
To simply refresh using the last mediaCfg:

pdfPanel.renderMedia();

luv2hike
26 Feb 2008, 10:07 AM
Thank you for your help. Unfortunately when I try this, I get the message in Firebug:

pdfPanel.renderMedia is not a function



var pdfConfig = {
mediaType: 'PDF',
url: 'makePdfServlet',
unsupportedText: 'PDF viewer is not installed.'
};

var pdfPanel = new Ext.ux.MediaPanel(
{
id: "oldtestcard",
loadMask: true,
xtype: 'mediapanel',
mediaCfg: pdfConfig
});

testGrid.on("rowdblclick", function(thegrid, rowidx, evtobj)
{
pdfPanel.renderMedia(Ext.apply(pdfConfig,
{
url: "makePdfServlet?parmA="+thegrid.store.getAt(rowidx).get('widget')+"&parmB="+thegrid.store.getAt(rowidx).get('gadget'),
loadMask: true
}));
});

I assume the pdfConfig I defined can also be used as the mediaCfg as shown above? Is loadMask supported? Can the original pdfConfig/pdfPanel be created without a URL so that nothing loads at definition time?

hendricd
26 Feb 2008, 10:20 AM
Thank you for your help. Unfortunately when I try this, I get the message in Firebug:

pdfPanel.renderMedia is not a function


renderMedia was introduced in version .3. Check yours.


I assume the pdfConfig I defined can also be used as the mediaCfg as shown above? Correct.
Is loadMask supported? Not at this time.

Can the original pdfConfig/pdfPanel be created without a URL so that nothing loads at definition time?Yes, just don't provide a panel.mediaCfg when the panel is created:


var pdfConfig = {
mediaType: 'PDF',
url: 'makePdfServlet',
unsupportedText: 'PDF viewer is not installed.'
};

var pdfPanel = new Ext.ux.MediaPanel(
{
id: "oldtestcard",
//loadMask: true,
//xtype: 'mediapanel',
mediaCfg: null
});

testGrid.on("rowdblclick", function(thegrid, rowidx, evtobj)
{
pdfPanel.renderMedia(Ext.apply(pdfConfig,
{
url: "makePdfServlet?parmA="+thegrid.store.getAt(rowidx).get('widget')+"&parmB="+thegrid.store.getAt(rowidx).get('gadget')
// loadMask: true
}));
});

luv2hike
26 Feb 2008, 11:31 AM
Ok, all this mostly worked. I did have 0.11 installed so I upgraded to 0.3 and that took care of the renderMedia error message. However, in order to avoid another error I had to do this:


var pdfConfig = {
mediaType: 'PDF',
url: 'makePdfServlet', // this causes the servlet to throw a missing params error
unsupportedText: 'PDF viewer is not installed.'
};

var pdfPanel = new Ext.ux.MediaPanel(
{
id: "oldtestcard",
xtype: 'mediapanel', // with xtype commented out and
mediaCfg: pdfConfig // mediaCfg set to null, I get an error
});


The error I get with mediaCfg originally set to null and xtype commented out is:
"el has no properties" on line 371 of mediapanel.js

I also get that same error if I comment out the url option for pdfConfig. Basically, what I'm trying to do is just have a blank panel until the user double clicks a row in the grid then load the generated PDF into that panel. Am I clueless and missing a better way to do this?

hendricd
26 Feb 2008, 11:36 AM
@luv2hike -- Sorry, haven't posted the most recent updates yet. ;) Change onRender (line 359 ish) to :


,onRender : function(ct, position){

//Final macro substition for rendered tag attributes

if(this.bodyCfg){
this.bodyCfg = this.applyMacros(this.bodyCfg);
}

Ext.ux.MediaPanel.superclass.onRender.call(this, ct, position);

// Set the Visibility Mode for el, bwrap for collapse/expands/hide/show

Ext.each(
[this[this.collapseEl],this.el , this.body.child('x-media')]
,function(el){
if(el){
el.setVisibilityMode(Ext.Element[this.hideMode.toUpperCase()] || 1 )
.originalDisplay = (this.hideMode != 'display'?'visible':'block');
}
},this);

}

luv2hike
26 Feb 2008, 11:57 AM
That worked! Thank you VERY much for your quick response and perseverance with me on this! So just to summarize in case someone else needs this same functionality:


I upgraded MediaPanel to version 0.3
I replaced the onRender function with the one in the previous post
Then I modified my code as shown below.



var pdfConfig = {
mediaType: 'PDF',
url: 'makePdfServlet',
unsupportedText: 'PDF viewer is not installed.'
};

var pdfPanel = new Ext.ux.MediaPanel(
{
id: "oldtestcard",
mediaCfg: null
});

testGrid.on("rowdblclick", function(thegrid, rowidx, evtobj)
{
pdfPanel.renderMedia(Ext.apply(pdfConfig,
{
url: "makePdfServlet?parmA="+thegrid.store.getAt(rowidx).get('widget')+"&parmB="+thegrid.store.getAt(rowidx).get('gadget')
}));
});

hendricd
26 Feb 2008, 1:03 PM
:">

luv2hike
26 Feb 2008, 1:23 PM
Does the 3.1 update include the onRender fix from above?

hendricd
26 Feb 2008, 1:25 PM
Yep.

Carina
26 Feb 2008, 10:55 PM
Wow, just found this and I'm sure it will save me some time. Thanks a lot for sharing and continuously improving this one! (if you don't hear any more from me then it works so fine that I don't even need any support ;) ).

ralf
1 Mar 2008, 6:52 AM
Hi,

I yesterday discovered this great helper and run some tests to see whether it solves a problem I had before when I tried to display PDF files in a Panel.
Unfortunately the MediaPanel shows the same effect of overlaying Tooltips, Message Boxes and other windows when showig PDF files as you can see on the attached image.
I tried to change z-indexes of several elements using firebug without any success yet :-/.
I find this for IE7 and Firefox2 with Acrobat 8.

Did anybody experience this problem too or better did anybody already found a solution/fix for that issue?
I will go on trying, but my skill on that kind of things is limited.

DigitalSkyline
1 Mar 2008, 6:59 AM
Maybe you can set the css visibility on the object before a modal/mask is used?

It might even be possible to code that in to the ux as a work around when any Ext object overlaps an object that doesn't support z-index ... ?

luv2hike
1 Mar 2008, 7:01 AM
I have this same problem using Firefox on OS/X with the Schubert PDF plugin. I also found an issue when resizing the panel that the PDF is in. After releasing the splitter bar, the PDF disappears. I have to keep moving it a little at a time until is shows up again.

hendricd
1 Mar 2008, 7:50 AM
Setting z-index requires absolute positioning. As each MP.mediaCfg assigns a unique className (x-media-pdf in your case), try:



.x-media-pdf {position:absolute;top:0px;left:0px;z-index:??? }


I am currently working on applying the same 'layout awareness' for borderlayout dragging that ManagedIframePanel does now. Should solve the drag issues, but not sure about the 'disappearing act'. :-?

Will advise.

ralf
1 Mar 2008, 8:15 AM
Thank you for the tips.


.x-media-pdf {position:absolute;top:0px;left:0px;z-index:1 }

I tried that without success :-(



Maybe you can set the css visibility on the object before a modal/mask is used?

This sounds like a reasonable workaround for modal windows....

The strange thing is, that some content (images) goes on top of the pdf (see attached image). Any ideas?

hendricd
1 Mar 2008, 8:25 AM
A z-index of 1 is likely too low, and to complicate matters, Ext.windowmanager controls the z-order for its windows (in a specific range -- forget what it is right now). What makes it really tough is 95% of Ext is relatively positioned, so you can't control much z-index behaviour except for Ext.Windows...

ralf
2 Mar 2008, 4:06 AM
I had some success using firebug to set the z-index along with the absolute position for the title of a window. In the end it appeared above the pdf.


style="position:absolute;top:0px;left:0px;z-index:9025"

But I failed trying to expand that to all the other elements of a window, which are relativly positioned (as Doug clued) and I had to find the correct absolute position....

So in the end I use a simple hide/show of the pdf panel when showing/hiding my dialog and forget about the tooltip problems (at least for now...).
Thank you for the hints.

richgoldmd
13 Mar 2008, 11:48 AM
So in the end I use a simple hide/show of the pdf panel when showing/hiding my dialog and forget about the tooltip problems (at least for now...).
Thank you for the hints.

I had this same problems with PDFs, even without the use of this Media class. I found a workaround, which I only tested in IE6 and IE7.

In my "global" initialization, I do this:



// First, make certain shimming is enabled
Ext.useShims = true;
/*
With shims enabled, there is still trouble with shadow positioning,
but there is no global way to disable shadows. So I replaced the Ext.Layer.sync code thus:
*/

Ext.Layer.prototype.sync = function(doShow){
var sw = this.shadow;
if(!this.updating && this.isVisible() && (sw || this.useShim)){
var sh = this.getShim();
var w = this.getWidth(),
h = this.getHeight();
var l = this.getLeft(true),
t = this.getTop(true);
if(sw && !this.shadowDisabled){
if(doShow && !sw.isVisible()){
sw.show(this);
}else{
sw.realign(l, t, w, h);
}
if(sh){
if(doShow){
sh.show();
}
// fit the shim behind the shadow, so it is shimmed too
var a = sw.adjusts;
var sa = Ext.isIE ? 2 : 0;
sh.setSize(w+a.w+sa, h+a.h+sa);
sh.setLeftTop(Math.min(l, l+a.l)+sa, Math.min(t, t+a.t)+sa);
}
}else if(sh){
if(doShow){
sh.show();
}
sh.setSize(w, h);
sh.setLeftTop(l, t);
}

}
};

/* The shadow adjustment for IE is apparent by the Ext.isIE conditional -
don't know how this will behave in FF. */


I originally tried to fix this with CSS, but it seems as if it is not just a positioning problem, but also a sizing one, which I could not get css to fix.

I hope this helps, and I'd love to hear how you fare with it. Also, if it needs to be altered for FF.
Rich

ralf
15 Mar 2008, 4:38 AM
Wow,

I did not yet dig into the changes you made, but just tried it right away and it works quite good =D> . Thank you very much for sharing Rich.

For me it even works better with Firefox 2 than with IE7. IE7 shows some flickering when moving the mouse over a global dialog window positioned over a pdf panel. Also dragging the window is much smoother with FF. Do you experience that too?

richgoldmd
15 Mar 2008, 7:32 AM
ralf,

Did you have to make any changes for it to work in FF? If not, the only real change is (should be):

Ext.useShims=true;

I did make some changes to the layer code that apply in FF, but they should not have made a difference - unless I missed something. I'd like to know what happens in FF without the Layer code, unless you tried setting useShims to true already, and that did not work.

I do get some flicker in IE6 and 7.

Rich

ralf
15 Mar 2008, 2:05 PM
Rich,

I did not change anything. And indeed, just setting Ext.useShims=true; works fine too. I did not try that before. I don't see any difference with or without using your layer code (FF2 and IE7). But I do not use any shadows for the windows anyway.

Ralf

richgoldmd
15 Mar 2008, 4:03 PM
I originally just disabled shadows, too, but found that they are used in several places which require disabling, and found that I would have to fix it in many places to get the shim to work properly with the shadow. Where I ran into trouble, and what prompted me to change the Layer code, was Tootips (QuickTips) - These are shadowed by default. If you have any in your app that lay over the Media panel, I wonder how they would look.

Rich

ralf
16 Mar 2008, 4:56 AM
I have a tooltip which overlays the pdf. The tooltip's shadow is only displayed for the part not covering the pdf. This is the same for FF and IE with/without the extra layer code.
Ralf

richgoldmd
16 Mar 2008, 5:23 AM
That's basically the experience I have had. The Layer fix seems to adjust the shim so that window borders (e.g. ComboBox, Menu, Window, etc) show up properly. On IE7 I have noticed that with shadows enabled, the window borders are clipped, which the layer code seems to fix.

salvo
17 Mar 2008, 8:46 AM
Hi,

I'm facing an issue with a really simple tabPanel scenario. :">

Basically I want a PDF file to be automatically loaded in tab #5 when my viewport is rendered.
But my attempts are still unsuccessful: I can't get the PDF file from being called so the tab body remains empty. No trace of a call for the PDF file in Firebug.



Ext.onReady(function(){

...

tab5 = new Ext.ux.MediaPanel({
id:'tab-5',
renderTo:'center5',
title: 'tab #5',
iconCls : 'icon-prom',
bodyStyle:'padding:5px',
config:{
mediaType :'PDF',
url:'/controller/fileserver.cfm?did=p1', // <= never fired. why?
unsupportedText : notSupported['PDF']
}
});

...

var mainTabPanel = new Ext.TabPanel({
region: 'center',
margins: '0 0 0 0',
bodyStyle:'padding:0px',
activeTab: 0,
items: [ tab1 , tab2 , tab3 , tab4 , tab5 , tab6 ],
enableTabScroll:true, // scroll through tabs
plugins: new Ext.ux.TabCloseMenu() //tabs context menu
});



Also I noticed...


tab5.renderMedia();

... is no help, just nothing happens.

What Am I missing ? :-?

Thanks,
Salvo

salvo
17 Mar 2008, 9:33 AM
Replacing


config:{ ... }

taken from the Flash examples by


mediaCfg:{ ... }

from the doc solved this. I'm using 0.31

Thanks for this great plugin!
Salvo

Lobos
19 Mar 2008, 11:20 AM
Any idea why the flash shows in FF and not in IE? I checked the markup in firebug and pasted it into a html file and it brings up the flash in ie, but it won't from within ext???



var tplFlash = new Ext.Panel({
title: false,
border:false,
closable: true,
layout:'fit',
id:'tplFlash',
height:250,
items: [{
title : 'Template Preview',
border :false,
id : 'clockPanel',
xtype : 'mediapanel',
hideMode : 'visibility',
autoScroll: false,
autoHeight : true,
autoWidth: true,
mediaCfg : {
mediaType:'SWF',
url: Ext.getCmp('TPLimage').getValue(),
id: 'clock',
start : true,
controls :true,

params: {
wmode :'transparent',
scale :'exactfit',
salign :'t'
},
classid :"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
}}]
});



Ext.getCmp('mpanel').add(tplFlash);
Ext.getCmp('mpanel').doLayout();

hendricd
19 Mar 2008, 11:36 AM
Any idea why .....



var tplFlash = new Ext.Panel({
title: false,
border:false,
closable: true,
layout:'fit',
id:'tplFlash',
height:250,
items: [{
title : 'Template Preview',
border :false,
id : 'clockPanel',
xtype : 'mediapanel',
hideMode : 'visibility',
autoScroll: false,
autoHeight : true,
autoWidth: true,
mediaCfg : {
mediaType:'SWF',
url: Ext.getCmp('TPLimage').getValue(),
id: 'clock',
start : true,
controls :true,

params: {
wmode :'transparent',
scale :'exactfit',
salign :'t'
},classid:"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
}}]
});



Ext.getCmp('mpanel').add(tplFlash);
Ext.getCmp('mpanel').doLayout();
Try without the classid, mediaPanel manages that for you. ;)

Lobos
19 Mar 2008, 3:45 PM
yeah I know - that was there from my experiments. I did fix it - I think it was due to this:


//wmode :'transparent',

Lobos
20 Mar 2008, 6:52 PM
Hi there,

I was wondering if it is possible to change a swf displayed in the panel on the fly... my code looks like this:


{
region:'center',
bodyStyle:'border-right:0;border-top:0;border-bottom:0',
split:true,
title : 'Template Preview',
border :false,
id : 'templateDemo',
xtype : 'mediapanel',
hideMode : 'visibility',
autoScroll: false,
layout:'fit',
mediaCfg : {
mediaType:'SWF',
url: 'tpl2.swf',
id: 'clock',
start : true,
controls :true,
params: {
//wmode :'transparent',
scale :'exactfit',
salign :'t'
}
}
}

And I would like to update the swf showing in the panel from time to time, is this possible? i tried calling this below, but it doesn't change anything...

Ext.getCmp('templateDemo').renderMedia(Ext.apply(Ext.getCmp('templateDemo'),{
mediaCfg : {url: 'tpl6.swf' + '?' + (new Date()).getTime()}
}));

Ext.getCmp('templateDemo').renderMedia();

-Lobos

Lobos
20 Mar 2008, 7:44 PM
ok I got it to work, I had to remove the mediacfg portion of the panel and call it like this:


Ext.getCmp('templateDemo').renderMedia( {
mediaType:'SWF',
url: record.json.tplImage,
id: 'clock',
start : true,
controls :true,
params: {
scale :'exactfit',
salign :'t'
}
});

so how I had to removie it from the panel - wouldn't work otherwise...



{
region:'center',
bodyStyle:'border-right:0;border-top:0;border-bottom:0',
split:true,
title : 'Template Preview',
border :false,
id : 'templateDemo',
xtype : 'mediapanel',
hideMode : 'visibility',
autoScroll: false,
layout:'fit'/*,
mediaCfg : {
mediaType:'SWF',
url: 'tpl2.swf',
id: 'clock',
start : true,
controls :true,
params: {
//wmode :'transparent',
scale :'exactfit',
salign :'t'
}
}*/
}

hendricd
20 Mar 2008, 9:20 PM
@Lobos -- You can start out with the mediapanel empty or with a 'starting' mediaCfg. Since you're playing with SWF objects you should use the xtype:'flashpanel' instead because removing a Flash object on IE requires some care which the ux.MediaPanel.Flash handles for you when you call renderMedia on it:



items: [{
title : 'Template Preview',
border :false,
id : 'clockPanel',
xtype : 'flashpanel',
hideMode : 'visibility',
autoScroll: false,
autoHeight : true,
autoWidth: true,
mediaCfg : {

url: Ext.getCmp('TPLimage').getValue(),
id: 'clock',
start : true,
controls :true,

params: {
scale :'exactfit',
salign :'t'
}
}
}],....

To refresh the existing mediaCfg again just call .renderMedia again without any parameters and it re-uses the last one defined.


Ext.getCmp('clockPanel').renderMedia();or, you can replace it (safely) with another media configuration:


Ext.getCmp('clockPanel').renderMedia(
{
url: Ext.getCmp('TPLimage').getValue(),
id: 'clock',
start : true,
controls :true,
params: {
scale :'exactfit',
salign :'t'
}
});To clear the panel, just reset the body:

var c = Ext.getCmp('clockPanel');
c.clearMedia(); //Important on IE !
c.body.update('');Guess I need to work on those Wiki docs soon eh? ;)

urabus
4 Apr 2008, 12:00 AM
Hi,
I read this thread and MediaPanel seems a great component. Now I seem to be running into a problem with MP (IE vs. FF) in the next example:

Ext.onReady(function() {
var viewport = new Ext.Viewport({
id: 'main',
title: 'Main',
layout: 'fit',
items:[{
// layout: 'column',
// xtype: 'tabpanel',
items: [{
id: 'panel2',
title: 'Panel 2',
border: true,
columnWidth: .4,
html: '<h1>Panel2 content</h1>'
},{
id: 'panel1',
title: 'The flash movie',
border: true,
columnWidth: .6,
xtype: 'flashpanel',
hidemode: 'visibility',
mediaCfg: {
mediaType: 'SWF',
url: 'http://images2.flashkit.com/tutorials/Interactivity/Making_a-David_Be-543/dial_button.swf',
id: 'flashMovie',
start: false,
params: {
wmode: 'transparent',
scale: 'exactfit',
salign: 't'
}
}
}]
}]
});
});

When adding to tab to a tabpanel, I get the flash movie in IE and FF. Switching tabs resets the movie in FF, in IE state is preserved. When replacing xtype:'tabpanel' with layout:'column' (commented lines in code) to put the panels next to each other IE gives no problem, but FF does not display the flashmovie.

My intent is to have multiple tabs with one having a columnlayout containing the mediapanel. Can someone please explain the behavior I observed and maybe propose a solution in the direction of what I'm trying to accomplish?

hendricd
4 Apr 2008, 3:53 AM
@urabus -- Your layout wasn't quite right for your goal.
Given:
My intent is to have multiple tabs with one having a columnlayout containing the mediapanel. try this one:



Ext.onReady(function() {
var viewport = new Ext.Viewport({
id: 'main',
title: 'Main',
layout: 'fit',
items:[{
xtype: 'tabpanel',
/* important: All tabs must me hidden the same way on FF */
defaults: {hideMode: 'visibility'}, //for all its tabs (try 'offsets' too)

items: [{
id: 'panel2',
title: 'Panel 2', //ordinary Panel in tab 1
border: true,
html: '<h1>Panel2 content</h1>'
},{
id:'columns', //intermediate column layout panel required here
layout:'column',
items:[{
id: 'column1-movie',
title: 'The flash movie',
border: true,
columnWidth: .4,
xtype: 'flashpanel',
mediaCfg: {
mediaType: 'SWF',
url: 'http://images2.flashkit.com/tutorials/Interactivity/Making_a-David_Be-543/dial_button.swf',
id: 'flash1',
start: false,
params: {
wmode: 'transparent',
scale: 'exactfit',
salign: 't'
}
}
},
{
id: 'column2-movie',
title: 'The flash movie',
border: true,
columnWidth: .6,
xtype: 'flashpanel',
mediaCfg: {
mediaType: 'SWF',
url: 'http://images2.flashkit.com/tutorials/Interactivity/something_else.swf',
id: 'flash2',
start: false,
params: {
wmode: 'transparent',
scale: 'exactfit',
salign: 't'
}
}
}
]
}
}]
});
});


See this thread (http://extjs.com/forum/showthread.php?t=31461) on FF issues in general.

urabus
4 Apr 2008, 5:11 AM
Doug, the example you provide is indeed part of the layout I'm trying to get into my application (PS there's one square bracket missing near the end). My example was more to illustrate the not working of a flashmovie in the column layout.

With your example I indeed have two tabs, one containing two flashmovies in columns. IE does show them, but FF shows no flash (only the titles of the panels). Another thing I'm noticing with your example is that with hideMode: 'visibility' only the content of the first tab clicked is shown. SO when clicking "panel2" it shows it's (html)content, then clicking the second tab, that shows nothing (in IE and in FF). hideMode:'offsets' does correct this.

In the end is the resetting that firefox does to media types the last of my problems, as I can work around that. For now I don't even get flash at all using MP in this configuration.

hendricd
4 Apr 2008, 5:19 AM
You might try using one of the SWF objects included in the demoPack.zip to get the basics working first.

Then, you may have to consider adding:

allowScriptAccess:'always'

to your params config for access to foreign domains. (Flash enforces those too) ;)

urabus
4 Apr 2008, 6:25 AM
Doug, I went back to a basic exampl as you said. It is self contained and should run when placed in an extracted extjs distribution, assuming mediapanel.js is in ext-home/ux (which also contains a local swf file).

FF (2.0.0.13) does not display a flash movie, IE6 does.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="nl">
<head>
<title>Ext Demo</title>
<link type="text/css" rel="stylesheet" href="extjs/resources/css/ext-all.css" />
<link type="text/css" rel="stylesheet" href="extjs/resources/css/xtheme-gray.css" id="theme" />

<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="extjs/ux/mediapanel.js"></script>

<style type="text/css">
.placeholder { margin: 20px; height:300px; width:400px; }
</style>
<script type="text/javascript">
Ext.onReady(function() {
var panel2 = new Ext.Panel({
id: 'panel-2',
title: false,
border: false,
renderTo: 'panel2',
items: [{
defaults: {
hideMode: 'offsets'
},
id: 'flash-1',
title: 'Flash 1',
xtype: 'flashpanel',
mediaCfg: {
mediaType: 'SWF',
url: 'http://images2.flashkit.com/tutorials/Interactivity/Making_a-David_Be-543/dial_button.swf',
//url: 'ux/playerProductInstall.swf',
start: false,
unsupportedText: 'No flash support here',
params: {
allowScriptAccess: 'always',
wmode :'transparent',
scale :'exactfit',
salign :'t'
}
}
}]
});
});
</script>
</head>
<body>
<div id="panel1" class="placeholder"></div>
<div id="panel2" class="placeholder"></div>
</body>
</html>

hendricd
4 Apr 2008, 6:35 AM
I just tried my previous example (with the missing ]) here, works just fine on FF 2.0013. :-?

Are you using the latest mediapanel_31.zip ?

hendricd
4 Apr 2008, 6:37 AM
It's the DOCTYPE, remove it and try again.

urabus
4 Apr 2008, 6:53 AM
hmm I fear the browsers incompatibility :(
removing the doctype makes things work in FF, but then IE ... you get the point I think.

And the thing is that I will probably need to include the doctypes ( as per guidelines for the project ).

hendricd
4 Apr 2008, 7:06 AM
Ext's CSS definitions and framework already account for the box-model (and other) issues amoungst the browsers.

Thus, the recommended DOCTYPE for use with Ext is none.

hendricd
4 Apr 2008, 7:53 AM
@urabus -- My bad. I found the problem with regards to h/w with strict. I wasn't asserting the default unit (px, etc) on the both height and width ! Doh! /:)

I'll be posting the fix shortly.

Short term, you can also override the style of the <object> to suite your needs:



var panel = new Ext.ux.MediaPanel({
renderTo: 'panel1',
title: 'Flash 1',
collapsible : true,
hideMode: 'visibility',
height:300 //Give your panel height and width
width:400,
mediaCfg: {
mediaType: 'SWF',
url: 'http://images2.flashkit.com/tutorials/Interactivity/Making_a-David_Be-543/dial_button.swf',
start: false,
unsupportedText: 'No flash support here',
style: {width:'100%',height:'100%',display:'inline'},
params: {
allowScriptAccess: 'always',
wmode :'transparent',
scale :'exactfit',
salign :'t'
}
}
});
However, its seems you've still got some decisions to make as you get further into your project with regards to strict docTypes anyhow..

urabus
4 Apr 2008, 9:39 AM
Thanks for looking into this problem. The width/height specification for your post makes this example work on IE and FF. I also put back the strict doctype and it still works.

Regarding the doctype in the project: we need to comply with web accessibility standards, which among others state using doctype. On the other hand, it should work (limited) without javascript, what makes using Ext questionable. But that's a thing for another thread.

Marte
7 Apr 2008, 1:44 AM
Hi, all.

I use MediaPanel inside a panel with 'card' layout. When switching the panels to the one containing the MediaPanel I refresh its contents by using:
mp.renderMedia(cfg);

In all cases, MediaPanel fires up the PDF viewer successfully. But under Firefox 2 the PDF viewer shows in place while using IE the PDF viewer opens in a different window, thus leaving the MediaPanel empty.

IE can embed the PDF viewer inside HTML (I've seen this) as well as Firefox does. I've checked the HTML used to embed the viewer and it is the same as MediaPanel uses. So I ended up thinking that the problem may arise because of the layout. I tried the different 'hideMode' values in the panel with 'card' layout with no success.

Any tip?
Thanks! :)

hendricd
7 Apr 2008, 3:11 AM
n all cases, MediaPanel fires up the PDF viewer successfully. But under Firefox 2 the PDF viewer shows in place while using IE the PDF viewer opens in a different window, thus leaving the MediaPanel empty.

Is that 'in a different Ext.Window' or browser window?

In general, just calling renderMedia (without arguments) should re-render the last known mediaCfg.

Could you post your card panel and mediaCfg for that setup?

Marte
7 Apr 2008, 4:16 AM
Is that 'in a different Ext.Window' or browser window?

A new PDF Viewer's window. In my case, a new Acrobat Reader's window. Using FF, the acrobat plugin is kept embedded in the panel, in the initial browser window.


Could you post your card panel and mediaCfg for that setup?
Yes, well, it's a bit large, but I'll try to summarize (if you need more detail, just tell me).

Walking down the tree till the media panel:
Viewport (border layout) --> Center region is a main panel (card layout) with 4 items --> Item #3 is a panel as follows:



var metadataPanel = new Ext.Panel({
autoScroll: true,
layout: 'anchor',
region: 'north',
margins: '0 0 0 0',
border: false,
bodyStyle: 'padding:5px 5px',
split: true,
height: 128,
minSize: 64,
maxSize: 192
});

var mediaPanel = new Ext.ux.MediaPanel({
region: 'center',
border: false,
mediaCfg: {
mediaType: 'PDF',
unsupportedText: 'Acrobat Viewer is not available.'
}
});

RegDec.PreviewPanel.superclass.constructor.call(this, {
autoScroll: true,
layout: 'border',
tbar: [
searchAction,
'-',
editAction,
'->',
logoutAction
],
items: [
metadataPanel,
mediaPanel
]
});


Initially, MediaPanel has no URL. The media panel is refreshed by a selected record, when the user is able to do so. Then the main panel is instructed to show the PDF, thus refreshing the mediapanel. The the following occurs:

FF: the metadata panel reflects the HTML template with dates, subjects and comments.; the mediapanel shows the PDF; between them, a splitter allows the user to enlarge the desired area.

IE: the metadata panel reflects the data as in FF; the mediapanel shows an icon (some sort of loading icon) and few seconds after the acrobat opens a window with the PDF inside; then the mediapanel becomes blank; the splitter has no sense in this browser.

richgoldmd
7 Apr 2008, 4:43 AM
Have you checked to make sure that Acrobat Reader has the "Show PDF in Broswer" option enabled? FF may handle this differently than IE.

Marte
7 Apr 2008, 4:59 AM
Have you checked to make sure that Acrobat Reader has the "Show PDF in Broswer" option enabled? FF may handle this differently than IE.

Yes, I did. I found it in the "Internet" section of the preferences. Using the same browser (I mean, without altering the configuration of the browser nor the one in the acrobat reader) I was able to see embedded PDF files. This led me to investigate the HTML used and then to think about the layout.

hendricd
7 Apr 2008, 6:30 AM
Also, if you are generating the PDF stream on the server, ensure you are not setting any Content-Disposition headers in the response as this my coerce the IE-Acrobat plugin into launching something 'undesirable'.

Marte
8 Apr 2008, 12:23 AM
Also, if you are generating the PDF stream on the server, ensure you are not setting any Content-Disposition headers in the response as this my coerce the IE-Acrobat plugin into launching something 'undesirable'.

Yes, I generate the stream on the server and I was using Content-disposition to 'inline; filename="somefile.pdf"'. But I removed this header with no success. It still shows the acrobat viewer in place (in Firefox 2) and a new acrobat window (in IE). In this latter case the media panel is left blank.

crpatrick
10 Apr 2008, 12:16 PM
Hi there-

First, great job with the extension! I had it downloaded and working within a few minutes within my portal application.

Two quick questions on this though...I am embedding some flash charts into my portal. I still see the "Click to activate" messages within IE6 for the Flash object...does this extension provide a way to remove the activation message/border around the flash image?

Also, I notice that when a user switches a tab into the portal piece containing the charts, the screen/view under the tabs flickers quickly on IE6...again, I wasn't sure why the flicker occurs, and if there was a way to remove it.

Thanks again
Chris

hendricd
10 Apr 2008, 2:08 PM
@crpatrick --
I am embedding some flash charts into my portal. I still see the "Click to activate" messages within IE6 for the Flash object...does this extension provide a way to remove the activation message/border around the flash image?Yes, ux.Media* renders everything on the fly (so you'll likely never see any IE- activation-legal-mumbo-jumbo).


Also, I notice that when a user switches a tab into the portal piece containing the charts, the screen/view under the tabs flickers quickly on IE6...again, I wasn't sure why the flicker occurs, and if there was a way to remove it.It all depends on what the content is and what Element it's wrapped in.

ux.Media RC1 is just about ready, and solves many of the charting problems and rendering issues with Flash in complex Ext-managed layouts. Look for it soon.

Try to post your 'flickering' panels config, and I'll take a peek at it.

crpatrick
10 Apr 2008, 7:28 PM
I will definitely post these when back in the office. The weird thing is that I did think since the JavaScript is rendering the object, that the click to activate issue would be resolved. I have seen that it is resolved on most machines, but my IE6 still shows the click to activate. Any ideas if there are any other reasons this may not solve the click to activate on all browsers?

Thanks again, and will post my portal config in the morning.

hendricd
10 Apr 2008, 7:32 PM
@crpatrick -- Are you using any other (ie: SWFObject.js) libraries that may write their content early in the parge markup?

That would trigger it during page rendering.

crpatrick
10 Apr 2008, 7:42 PM
Nada...I do have two flash charts on one page (each in an individual portlet, streamed from individual jsp pages). I had noticed when trying the swfobject fix, or other fixes proposed from Adobe/MS, for some reason, my IE6 browser (and one other user) are the only ones to seem to not take the fix, and always need the user to "click to activate". Very strange issue.

So here is the Tab Panel Code:



// Define the Trade Tab
{
title: 'Tde',
layout: 'border',
autoScroll: true,
listeners: {'activate': function(obj) {
var userCapChartPanel = Ext.getCmp('trTrkUserCapPortlet');
if (userCapChartPanel) {
userCapChartPanel.getUpdater().refresh();
}

var transPerfChartPanel = Ext.getCmp('trTrkTransPerfPortlet');
if (transPerfChartPanel) {
transPerfChartPanel.getUpdater().refresh();
}
}},
id: 'trTrk',
items: [
{
region: 'north',
id: 'trTrkNorth',
html: '<div id="headerCell" class="headerTitle" style="background-position: 6px 0;padding-bottom:.2em;">Criteria Search</div><div id="trTrkNorthBody"></div>',
autoScroll: false,
height: 85
},
{
region: 'center',
id: 'trTrkView',
xtype: 'portal',
margins: '0 0 0 0',
autoScroll: false,
items:[

{

columnWidth: 1,
style: 'padding:10px 0 10px 10px',
items: [
{
title: 'Trans History',
layout: 'fit',
height: 310,
id: 'trTrkHistoryPortlet'
}
]

},
{

columnWidth: .25,
style: 'padding:10px 0px 10px 10px',
items: [

{
title: 'User Cap',
layout: 'fit',
height: 260,
id: 'trTrkUserCapPortlet',
autoScroll: true,
autoLoad: '/jsp/chart/userCap.jsp'
}
]
},
{
columnWidth: .75,
style: 'padding:10px 0px 10px 10px',
items: [

{
title: 'Performance Over Time',
layout: 'fit',
height: 260,
id: 'trTrkPortlet',
autoScroll: true,
//bodyStyle: 'padding-left:50px;',
autoLoad: '/jsp/chart/trPanelPerfOverTime.jsp'
}
]
}

]

},
{
region: 'east',
layout: 'fit',
width: 200,
id: 'trTrkLoader',
autoLoad: "/Tr.do?action=trTd"
}

] // End of Secondary Navigation / Panels Definition

}




The two jsps housing the charts are those in the autoload properties (highlighted above).

An example of how the charts are loaded (the jsp) is below...



<center>
<div id="userCapDiv"></div>
</center>
<script type="text/javascript">
var userCapChart = new Ext.ux.MediaPanel({

id: 'userCapChartPanel',
renderTo: 'userCapDiv',
height: 220,
width: 280,
border: false,
mediaCfg: {
mediaType: 'SWF',
url: '/jsp/chart/charts.swf?library_path=/jsp/chart/charts_library&xml_source=/SSA/servlet/ChartServiceHandler%3F<%= chartParams %>',
unsupportedText: 'The web browser must have the Flash player installed to view all Alpha League charts.',
controls: true,
start: true,
params: {
wmode: 'transparent'
}
}

});
</script>

hpet
12 Apr 2008, 2:04 AM
Facing the same problem with overlap (pdf).
What is the status on this? Is there a solution?

jarjar
14 Apr 2008, 3:59 AM
Hi,

I am new to Ext and I have been trying out the Desktop sample. I tried to use FlashPanel to create a Desktop Window that contains a SWF, but couldn't figure out how to do it.

This code works perfectly when used outside Desktop:



testwin = new Ext.Window({
layout:'fit',
plain:true,
x:100,
y:100,
width:300,
height:300,
title:'A title',
autoshow:false,
closeAction:'hide',
html:'<p>hello</p>',
items:[{
xtype : 'flashpanel'
,mediaCfg:{
mediaType : 'SWF'
,url : 'http://somesite/somefile.swf'
,start : true
,params:{wmode:'transparent'}
}
}]
});



But when I try to use it in Desktop like this:



MyDesktop.SomeModule = Ext.extend(Ext.app.Module, {
init : function(){
this.launcher = {
text: 'Some Module',
iconCls:'bogus',
handler : this.createWindow,
scope: this,
windowId:'somemodule'
}
},
createWindow : function(src){
var desktop = this.app.getDesktop();
var win = desktop.getWindow('somemodule');
if(!win){
win = desktop.createWindow({
id: 'somemodule',
title:'Some Module',
layout:'fit',
plain:true,
x:100,
y:100,
width:800,
height:600,
iconCls: 'bogus',
shim:false,
animCollapse:false,
constrainHeader:true,
autoshow:true,
html:'<p>hello</p>',
items: [{
xtype : 'flashpanel'
,mediaCfg:{
mediaType : 'SWF'
,url : 'http://somesite/somefile.swf'
,start : true
,params:{wmode:'transparent'}
}
}]

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


...the window shows up right, but the SWF apparently doesn't load. When I right click on the window the Flash Player menu says "Movie not loaded...".

I'd like to use FlashPanel because I don't want the SWF to reload when I minimize the window and open it again.

Thanks for any ideas.

hendricd
14 Apr 2008, 4:21 AM
@jarjar --

It's difficult to say why one works and not the other without seeing the rendered markup of the Desktop window. Firebug would allow you to Inspect the Window body for the <object> tag (and params) that gets rendered. What does that show you?


I'd like to use FlashPanel because I don't want the SWF to reload when I minimize the window and open it again.


this (http://extjs.com/forum/showthread.php?t=31461) post explains why the refresh occurs, but the new release of ux.Media RC1 finally solves that issue. Should be releasing in the next day or two.

gelleneu
14 Apr 2008, 5:16 AM
I have some question for the media panel:

I have a layout region with 'fit' layout and a media panel inside it. When I load a media object, I want to center it horizontally and vertical. It should show the original size, or fill the whole region / adds scroller to the region.

Then, I want to add resizer squares to every Media Object (they should include only the picture or video NOT the whole media panel).

Is that possible? Is someone here who already has done it?

hendricd
14 Apr 2008, 5:20 AM
@gelleneu -- You also should look for RC1. It adds media and flash classes as components, panels, and windows; managing all those resizing issues for you. (Coming soon) ;)

gelleneu
14 Apr 2008, 6:08 AM
Wow very, very cool. For those advantages I can wait a little :-).

hendricd
14 Apr 2008, 7:49 AM
This all new release replaces the previous experimental ux.MediaPanel with an entire suite of Media Classes including:

ux.Media (the base media class from which all others are derived)
ux.MediaComponent (media, uxmedia)
ux.MediaPanel (mediapanel)
ux.MediaWindow
ux.FlashComponent (uxflash)
ux.FlashPanel (flashpanel)
ux.FlashWindow

All ux.Media (Ext.Component-derived) classes use a new hideMode:'nosize', to prevent unwanted refreshes of media (movies, audio, flashObjects etc) when hidden/collapsed. To pull this off, Ext.Element was enhanced (when uxmedia.js is present) to support a third visibility option for elements:

mode can be:
: 1 (visibility:hidden)
: 2 (display:none), or now
: className

example:

someEl.setVisibilityMode( 'x-hide-nosize' );
someEl.hide();
Now when hidden, the classname (set with Element.setVisibilityMode) is added to Element and removed using the Element.show method.

Important: Animation effects are NOT compatible with this visibility mode, as the anim library moves the Element around in the DOM during animation.

This now means that you can remove all the "position:absolute, hideMode:visibility" workarounds required in the past from your existing media/flash-Panels. The classes now manage that for you.

This is the CSS Rule created automatically to handle the display:none issue on all browsers except IE (go figure ;) ):

'.x-hide-nosize,.x-hide-nosize .x-media {height:0!important;width:0!important;border:none!important;}All new goodies are in the new mediaDemo.zip.

mystix
14 Apr 2008, 8:44 AM
read your stickied thread on flash rewinds in FF. thanks for the heads up :)

one thing i'm curious about though is this animation thing.
what happens when the Element is moved around the DOM?
is a browser reflow triggered, hence causing a rewind of all swfs?

hendricd
14 Apr 2008, 9:11 AM
@mystix: Yes, lib.Fx switches the element to position:absolute and display:none (briefly) for precise movement (triggering reflow)

gelleneu
15 Apr 2008, 11:08 PM
I have tried the new components and they are really cool. But my main problems are not solved yet (or better: i don't know how...)

I have a border-region with 'fit' layout and a media component inside it. When I set the width and height of the mediaComponent manually, it's size is correct. When I don't set width and height, the size of the media will be as big as the layout region.

BUT: my goal is, to upload a Picture (f.E.) show this picture in (automatically detected?) ORGINAL-SIZE in the layout region,
with an alignment horizontally AND vertically CENTERED ...

...and with added resizer-handles (that already works fine)

Is it possible to detect the original media size or hide the width and height attributes of the media <img> tag?

Do you have a little workaround to place the image in the middle of a region, or do I have
to calculate it manually?

hendricd
16 Apr 2008, 3:32 AM
@gelleneu -- ux.Media assigns two or more CSS classnames to all media it renders:

For images they are:

x-media
x-media-img
x-media-jpg (if a JPEG), gif, etc....

You can create very specific style rules for your media this way (center, size, borders, etc).

Style can also be overriden in the mediaCfg as well:


mediaCfg:
{ mediaType :'JPEG'
,url :'uploaded.jpg'
,id :'img_preview'
,style: { width:'auto', height:'auto' }
,height :380
,width :600
}
}In fact, you'll notice in Firebug, that images are actually rendered with <IMG> tag rather that <objects> as the image tag will size itself accordingly if you let it.

Without knowing the geometry of the image, 'auto' is likely the way to go in your case. There are server-side scripts (PHP, ASP) that determine width/height of most images for use in your markup.

gelleneu
16 Apr 2008, 4:27 AM
Ah thanks, OK, I didn't realized the existence of the style property, I think it will solve my problems.

The other way, (over php) will be as good as this one, but I think it's a little more complicated.

gelleneu
23 Apr 2008, 1:25 AM
Hello again,

I have now extended your great ux.MediaPanel and added some methods, which detect
the media config of a file automatically (from the file extension). The background is, that, when I upload a file, the Panel should detect the file extension and create automatically the correct mediaCfg data.

That looks similiar like this (pseudo code):


Ext.my.MediaPanel extends Ext.ux.MediaPanel

this.renderMedium: function(file) {

Ext.my.MediaPanel.superclass.mediaCfg = this.getMediaCfg(myFile);
Ext.my.MediaPanel.superclass.renderMedia();

}

this.getMediaCfg(file) {

....look for file extension... return config object

}

I putted such a MediaPanel in a window. After uploading the file,
the renderMedium function will be executed, but nothing appears on the mediaPanel.
I have to close the window, and open it again, then the uploaded mediaFile appears correctly... What's the problem? Is there a panel.refresh function or similiar?

gelleneu
24 Apr 2008, 5:32 AM
OK, my problem in other words:

I create a window with an empty media panel (no mediaCfg).

I want to upload a media file and show this file in the mediapanel.

For that, I need to refresh the new media Panel with a new MediaCfg...
That all works fine, mediaCfg will be created but nothing is shown in the mediapanel.

When I then close the window (not hiding but destroying), and open it again, the empty Media Panel will be filled with the last mediaCfg, and the image/video is shown correctly.

So I have a really bad solution: after uploading, the window will be closed and reopened automatically. But that can't be the best way?

hendricd
25 Apr 2008, 9:51 AM
@gelleneu -- To re-render (without closing down the containing component), just make a call to renderMedia, with (or without -- implies "use the last known mediaCfg") a new mediaCfg.


var uploadComplete = function(mediaUrl){
mediaViewer.renderMedia(
{ mediaType :'JPEG'
,style: { width:'auto', height:'auto' }
,url :mediaUrl
,id :'preview'
});
}

egs
9 May 2008, 3:45 AM
Hi,

There seems to be something wrong with the downloadable files on page 1.

"Cannot open file: it does not appear to be a valid archive.."

Please update. Tnx !

/petter

hendricd
9 May 2008, 4:30 AM
@egs -- I just downloaded it (to test) and opened it just fine.

egs
14 May 2008, 11:54 PM
Hi,

I'm using Ext.ux.Media with a tabpanel to display PDF files.
This works great using FF. Not so well using IE..

However, there seems to be an issue with z-index when using FF also.

In my west region I have a treepanel with tooltip on the nodes. This tooltip messagebox is
displayed "under" the ux.Media layer. I'm also using Ext.ux.TabCloseMenu and the issue is present there also when using ux.Media.

I have enclosed some screenshots to clarify this issue. DR1.jpg + DR3.jpg shows how this works using a grid in a tab. DR2.jpg + DR4.jpg shows how it's not working using the ux.Media.


Question 1 : How can I modify this z-index and where ?

Question 2: Is it possible to display a loading mask until the PDF is fully loaded (eg when the filesize of the PDF is large..) ?


Thanks !


regards,
Petter

hendricd
15 May 2008, 5:41 AM
@egs --


Question 1 : How can I modify this z-index and where ?
Unfortunately Adobe sees fit to ensure that it's browser object get top billing on a page. It's as-rendered z-index can be very high, so you'll have to adjust the z-Index of Ext generated Layers until it wins.


Ext.override(Ext.menu.Menu, {
createEl : function(){
return new Ext.Layer({
cls: "x-menu",
shadow:this.shadow,
constrain: false,
parentEl: this.parentEl || document.body,
zindex: Ext.isIE ? 50000: 15000 // adjust UP, UP, and away !!
});
}
});
and:

Ext.override ( Ext.Tip, {
floating:{shadow:true,shim:true,useDisplay:true,constrain:false, zindex:Ext.isIE ? 50000 : null}
});When you figure out the optimum zindex, please let us know!

Question 2: Is it possible to display a loading mask until the PDF is fully loaded (eg when the filesize of the PDF is large..) ?

No, the Acrobat plugin does not provide sufficient event feedback to manage a loadMask. You could try this (http://extjs.com/forum/showthread.php?t=28894)component plugin, but you would need to decide(guess) yourself when to remove the mask.

'At the mercy of media.' ;)

egs
15 May 2008, 12:06 PM
Hi,

I have done some googling and found this article: How the Z-index Attribute Works for HTML Elements (http://support.microsoft.com/default.aspx?scid=kb;en-us;177378)

It's an old article, but seems to apply.

The article states:

<OBJECT> tag elements are windowed elements,and as such, appears on top of all other elements...


All windowed elements paint themselves on top of all windowless elements, despite the wishes of their container. However, windowed elements do follow the z-index attribute with respect to each other, just as windowless elements follow the z-index attribute with respect to each other.


NOTE ActiveX controls are implemented as windowless and actually fall into the windowless category. By default, Microsoft Visual Basic and Microsoft Foundation Class (MFC) controls are windowed, but Active Template Library (ATL) controls are windowless.

However, there seems to be a solution for Flash: Flash Object And Z-Index: How To Make Them Play Nicely Together (http://www.fruitnotes.com/blogs/Flash_Object_And_Z-Index_How_To_Make_Them_Play_Nicely_Together_759)

But, the solution doesn't seem to work for PDF's..

Would it be possible to open the PDF using the Acrobat ActiveX or in an iframe instead of using OBJECT tags ?

So, no luck.. If anyone has a solution, please share :)


regards,
Petter

FlexIDX
15 May 2008, 9:00 PM
will this be made to work with 2.1?

Thanks

hendricd
16 May 2008, 4:04 AM
@egs --
Would it be possible to open the PDF using the Acrobat ActiveX or in an iframe instead of using OBJECT tags ?Indeed you can use an Iframe, and many implementations do. ManagedIframe (see my sig below) might be a good alternative for hosting the PDF.

After reviewing the URL you posted earlier, I've been skimming the OLE TypeLib for Acrobat to see if an alternate interface (windowless) might be practical for IE, but it does not appear Adobe built ATL-based OLE components for browser plugins. ;)

@FlexIdx -- Yes, Release 2.0 of ux.Media/Flash (and derivatives) will be released for Ext 2.1 and higher, and final version 1.0 will be released for 2.0.x shortly.

Lobos
16 May 2008, 5:51 PM
Hi there,

first off, i just want to say that (i think i did before as well lol) that this is imo the best user extension for ext... but anyway I am having trouble getting jpeg to show with ie, ff works fine ie just shows a box with blank scrollbars :(

can you see something wrong with this?

var jpeg = new Ext.ux.MediaPanel({
renderTo:'horizontal_sort3',
title : false,
border :false,
hideMode : 'visibility',
autoScroll: false,
layout:'fit',
mediaCfg : {
mediaType:'JPEG'
,url:'http://www.dpreview.com/Learn/Articles/Glossary/Optical/images/123di_perspec_wide_far.jpg'
,style : Ext.isIE?{width:'100%', height:'100%'}:{height:156,width:88}
}
});

thanks

Mr-T
17 May 2008, 12:04 AM
i am trying to center the video in mediaWindow but it appears on the top left.
the code is:


var mConfig = {
mediaType :'WMV'
,url :'video/vid.wmv'
,height :300
,width :250
,id :'wmv'
,unsupportedText : not['WMV']
,controls :false
,start :true};

new Ext.ux.MediaWindow
({id :'viewWin'
,height : 400
,width : 400
,collapsible:false
,mediaCfg : mConfig
,autoScroll : true
}).show();

how can i center it in the window?

Lobos
17 May 2008, 4:26 AM
i am trying to center the video in mediaWindow but it appears on the top left.

This is more of a positioning question and relates to panels in general as opposed to media panel. You would have a better chance of an answer by posting this as a separate thread.

hendricd
17 May 2008, 4:35 AM
i am trying to center the video in mediaWindow but it appears on the top left.
how can i center it in the window?

WinMediaPlayer is a bit of a pain to manage because resizing the <object> container does not change the movie geometry at all (unless your call renderMedia again after the Window is resized, but then your movie would start over again).

Placing it in a MediaWindow is fine, but you need to think about what they may do to it (ie resizing). To start off, I would recommend resizable:false on the Window and use autoSize for the players' container. That would center everything for you:



var mConfig = {
mediaType :'WMV'
,url :'video/vid.wmv'
,height :300
,width :250
,autoSize : true
,id :'wmv'
,unsupportedText : not['WMV']
,controls :false
,start :true};

new Ext.ux.MediaWindow
({id :'viewWin'
,height : 400
,width : 400
,resizable : false
,collapsible:false
,mediaCfg : mConfig
,autoScroll : false //dont want scroll bars around it.
}).show();

hendricd
17 May 2008, 4:44 AM
@Lobos -- Make sure you're using RC1, and simplify things a bit:

If jpeg is going into a layout, you have some decisions to make. To start, trying using
style as shown below:


var jpeg = new Ext.ux.MediaPanel({
renderTo:'horizontal_sort3',
title : false,
border :false,

autoHeight: true, autoWidth: true, //try this, if not in an Ext.layout
height : 360, width : 480, // or the actual dimens of that image

autoScroll: false,
mediaCfg : {
mediaType:'JPEG',
style:{width:'auto',height:'auto'}, //let the browser query the image for size
// autoSize: true, //OR, just fill the panel.body with it
url:'http://www.dpreview.com/Learn/Articles/Glossary/Optical/images/123di_perspec_wide_far.jpg'

}
});Thanks for the kudos. ;)

Eric24
17 May 2008, 9:37 AM
Very cool component! Is it possible to use it to embed a Flash object in a grid cell (either in a cell by itself, as in a column of Flash objects, or in a cell with other text, like Saki's CellAction demos)? Thanks!

hendricd
17 May 2008, 9:45 AM
Probably, what type of Flash object is it? What does it do?

Might be expensive for many rows. Are you using paging?

Eric24
17 May 2008, 9:50 AM
Thanks for the quick response! What I have is a grid that contains information on audio files that I want to embed a very small Flash object which is an audio player. There may be many files (and thus grid rows and Flash object instances), but they are all the same object. The purpose of wanting to embed the object is to allow the audio file to be played on mouseover, rather than having to click and launch a separate audio player.

I've also considered having one Flash player object on the page, and using a simple icon (and Saki's CellAction extension) to send play messages on mouseover to the Flash player (I assume this is possible from a Flash standpoint, but I haven't investigated).

Any feedback or guidance on either or both approaches is greatly appreciated.
--Eric

hendricd
17 May 2008, 10:05 AM
@Eric24 -- I would recommend a single player, but if you want to try it, all ux.Media and sub-classes return the actual markup used when instantiated for inline rendering:




someColumnRenderer : function(value, p, record ){
return String( new Ext.ux.Media(
{
mediaCfg:{
mediaType : 'SWF'
,url : 'somePlayer.swf'
,id : 'playObj_' + record.get('id')
,style : {display:'inline', width:'100%',height:'30px'}
,autoSize : true // may need this instead ??
,start : false
,loop : false
,controls :false
,params: {
wmode :'opaque'
,scale :'exactfit'
,salign :'t'
}
}
}));
},
Using the ID convention I posted, you could do this


Ext.get('playerObj_'+someId).dom.play(); //if the player supports that actionTweak it!

franklt69
17 May 2008, 10:34 AM
am playing with this extension but I have a trouble, and don't understand what is wrong so a hand is welcome


I am doing it:


this.tabs = Ext.getCmp('demoTabs');
tab = this.tabs.add({
//title: 'Windows Media'
text:'Windows Media'
,id:'\/video\/wmedia'
,xtype :'mediapanel'
,config:{
mediaType :'WMV'
,url :'/lib/ux/mediademo/So32v64-56k.wmv'
,height :300
,width :250
,id :'wmv'
,unsupportedText : not['WMV']
,controls :false
,start :true}
});
this.tabs.doLayout();
this.tabs.setActiveTab(tab);
}

and appear a new tab but not the media player, I watch using Firefox the mediademo.html and appear the object (player) inserted inside a div, but in my case don't appear, I was debugging in mediademo.html is trigger the event
onBeforeMedia : function(mediaCfg, ct, domPosition ){...} in my example

this event is trigger:

onRender : function(){
debugger
ux.Panel.superclass.onRender.apply(this, arguments);
this.adjustVisibility ([this[this.collapseEl],this.floating? null: this.getActionEl()]);

}

but never is trigger onBeforeMedia

any help, about some reason to don't appear the player is welcome

regards
Frank

hendricd
17 May 2008, 1:20 PM
I think you pasted over a bit much from the demo tree.




this.tabs = Ext.getCmp('demoTabs');
tab = this.tabs.add({
title: 'Windows Media'
text:'Windows Media'
,id:'\/video\/wmedia'
,xtype :'mediapanel'
,config mediaCfg:{
mediaType :'WMV'
,url :'/lib/ux/mediademo/So32v64-56k.wmv'
,height :300
,width :250
,id :'wmv'
,unsupportedText : not['WMV'] //got this defined?
,controls :false
,start :true}
});
this.tabs.doLayout();
this.tabs.setActiveTab(tab);
}

Eric24
17 May 2008, 2:58 PM
Thanks for the input! I'll play with both versions.
--Eric

bobringer
17 May 2008, 8:14 PM
Interesting... One would think that Safari would "just work" on OSX and Firefox would have the QuickTime problems.

Is anybody else experiencing issues with QTMP3? In Safari I just get a quicktime logo where they plugin should be. No player.

This happens in the examples as well.

Just an FYI, this happens both in Safari 3.1 and a recent WebKit nightly (I use the WK nightly as my primary browser).

Anybody else?

Mr-T
18 May 2008, 2:43 AM
WinMediaPlayer is a bit of a pain to manage because resizing the <object> container does not change the movie geometry at all (unless your call renderMedia again after the Window is resized, but then your movie would start over again).

Placing it in a MediaWindow is fine, but you need to think about what they may do to it (ie resizing). To start off, I would recommend resizable:false on the Window and use autoSize for the players' container. That would center everything for you:



var mConfig = {
mediaType :'WMV'
,url :'video/vid.wmv'
,height :300
,width :250
,autoSize : true
,id :'wmv'
,unsupportedText : not['WMV']
,controls :false
,start :true};

new Ext.ux.MediaWindow
({id :'viewWin'
,height : 400
,width : 400
,resizable : false
,collapsible:false
,mediaCfg : mConfig
,autoScroll : false //dont want scroll bars around it.
}).show();


Thanks Doug,
This helped alot, the window does resize to the size of the player. This although happens when the height and width of the media window is smaller, for example if the video is 340 x 240 and the mediawindow size is 100x100 then the window will resize to 340x240. The problem with this is that it does not show the controls. Is there a way to get the size of the video screen before setting the window size and then to set the size of the mediawindow?

hendricd
19 May 2008, 4:19 AM
Is there a way to get the size of the video screen before setting the window size and then to set the size of the mediawindow?

Unfortunately you'll need to know the actual video geometry in advance before you can make those sizing guesses.

I don't know of client-side support for reading the movie (and getting sizes) before you render the player.

Lobos
20 May 2008, 10:11 AM
@Lobos -- Make sure you're using RC1, and simplify things a bit:


thanks, but there is one problem with this, i have a lot of flash panels based on the old ux and the new one breaks them all... maybe i twould be a good idea to have backwards compatiblity or change the name of the ux and associated classes so people can upgrade without breaking there applications?

so i dunno what to do now - i think i iwll have to go thru and change the class naming in the uxmedia.js file so i can use it with the flash :(

hendricd
20 May 2008, 11:06 AM
Eeks. The pre-RC1 code was considered very experimental and lacks MUCH from RC1. (Had no idea it had that sort of depth yet. :> )

RC1 goes a long way to solving the flash refresh problems your gonna have without it.

The API hasn't changed all that much (added a few new members tho). What was it barking about when you tried RC1?

Lobos
20 May 2008, 4:41 PM
Eeks. The pre-RC1 code was considered very experimental and lacks MUCH from RC1. (Had no idea it had that sort of depth yet. :> )

RC1 goes a long way to solving the flash refresh problems your gonna have without it.

The API hasn't changed all that much (added a few new members tho). What was it barking about when you tried RC1?

I can't really remember what the exact errors where, but they were obscure enough for me not to want to mess around changing things - the system is bascially balanced on a knife edge here... lol code on top of code as people changed their minds over and over again.

Anyway I only had to change a few instances of the name it seems - well i haven't tested yet but i hope to god it won't clash...

even your "experimental" version was very good, it did the job for me so it is worth thinking about the fact that some of us are happy to use something the "just works", experimental or no lol.

Thanks

Lobos
21 May 2008, 10:53 AM
got is all working now :) Oh i just wanted to make a request as well:

why not make mediaType mimeType and use the proper mimeTypes? eg


mediaCfg : {
mimeType:'image/jpeg',
url:'http://www.dpreview.com/Learn/Articles/Glossary/Optical/images/123di_perspec_wide_far.jpg'

}

http://www.iana.org/assignments/media-types/

ps: mainly cuase i am lazy and i don't want to have to so lots of conditionals with the value from the upload lol

Lobos
21 May 2008, 11:46 AM
did you notice problems with palying the avi files? i didn't see support for then in the code os i added a funciton to do this:


,"AVI" : Ext.apply(
{tag :'object'
,cls : 'x-media x-media-avi'
,type :'video/x-msvideo'
,data : "@url"
,params : {
src : "@url"
,url : "@url"
,autostart : "@start"
,showcontrols : "@controls"
}
},Ext.isIE?{classid :"CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"}:false)

but it won't work any ideas? that seem sto be the right mime type as well...

hendricd
21 May 2008, 1:28 PM
The existing WMV should be fine.

hendricd
21 May 2008, 1:35 PM
why not make mediaType mimeType and use the proper mimeTypes? eg


mediaCfg : {
mimeType:'image/jpeg',
url:'http://www.dpreview.com/Learn/Articles/Glossary/Optical/images/123di_perspec_wide_far.jpg'

}


That would be fine for all browsers, except IE. It requires an ActiveX/OLE hint.

That's why the canned profiles are layed out the way they are. ;)

..and, you might want to play certain WMV/AVI on Quicktime. This affords you that choice.

Lobos
22 May 2008, 7:44 AM
That would be fine for all browsers, except IE. It requires an ActiveX/OLE hint.

That's why the canned profiles are layed out the way they are. ;)


And thats why i love having a layer looking after these type of things :)

devnull
22 May 2008, 12:44 PM
Any hints on flash object/javascript interaction? In particular, I am wanting to send commands to the JW media player (load file, play/pause), but have no idea where to start and cant find anything in the examples.

hendricd
22 May 2008, 12:56 PM
A JW media player demo is included in the demoPack.zip.

You'll need to load both uxmedia and uxflash.

WHen the Component is rendered:

comp.getInterface() exposes the SWF object directly. You can drive from there.

devnull
22 May 2008, 1:36 PM
Perfect, thats what I was looking for.
Now I just have to figure out why it will play a dynamically generated file when the 'file' flashVar is used, but not when calling loadFile... which is a JWP issue and not yours :)

*edit*
figured that out too, needed to re-specify the 'type' in the file object.
Thanks to mediaPanel and Ext, I now have a proof of concept app all finished up for my project :)

chemist458
10 Jun 2008, 7:38 PM
Dear Doug,
Love the plugin, its helped me no end.
But sadly, I am getting a huge crashing problem with Firefox when I close a MediaWindow.
here is my code


var mConfig = {
mediaType :'WMV'
,url :'http://www.casinotools.co.uk/images/CasinoToolsTutorial-Final.wmv'
,autoSize : true
,id :'wmv'
,unsupportedText : 'Please download the Windows Media Player plugin'
,controls :true
,start :true};

var tutwindow = new Ext.ux.MediaWindow ({id :'viewWin'
,height : 508
,width : 655
,title: 'Casino Tools Tutorial'
,iconCls: 'movie'
,resizable : false
,collapsible:false
,constrain: true
,mediaCfg : mConfig
,autoScroll : false //dont want scroll bars around it.
});

Everything works perfectly in IE, yet in FF it plays and shows the movie fine, but when I close the MediaWindow using the close button, it crashes FF, the window removes the movie, but then FF crashes and you can not do anything except close it, it crashes that badly that you have to remove the process in task manager just to restart it.
I know IE and FF deal with media differently, but this does seem a bit extreme.
Thanks,
George

hendricd
10 Jun 2008, 7:54 PM
@chemist458 -- Try changing lines ~489-494 of uxmedia.js (RC-1 only) to:


//Remove an existing mediaObject from the DOM.
,clearMedia : function(){
if(Ext.isReady && this.mediaObject){
// Ext.destroy(this.mediaObject);
this.mediaObject.removeAllListeners();
this.mediaObject.remove();
}
this.mediaObject = null;
}
and let me know how it goes. ;)

chemist458
10 Jun 2008, 8:14 PM
Dear Doug,
You deserve a medal, I asked you a question ten minutes ago, if that, and I got a correct answer!!
Worked a treat,
Thats service for you,
Cheers mate,
George

hendricd
11 Jun 2008, 12:10 PM
Post #201 has been updated for a fix.

chemist458
11 Jun 2008, 3:43 PM
Dear Doug,
I dont know why but the crashing is back in FF, yet I have not touched the page in question, so I am mystified, I have used both your first fix, and your second both crash FF massively as I described before, the square background of the window is stuck there, and the browser has to be restarted.
George

hendricd
11 Jun 2008, 6:18 PM
@chemist458 -- Make sure you don't have any conflicting(duplicate) DOM id's in your mediaCfg or elsewhere and try the attached version of the base classes: uxmedia.js (upcoming 1.0 release) (this version seems very well-behaved for me).

Lemme know.

chemist458
12 Jun 2008, 3:16 PM
As I read your reply, I thought to myself that the media windows are being added form two js pages, and Im sure that there is a id conflict.
Silly me,
George

chemist458
12 Jun 2008, 5:39 PM
Dear Doug,
I have gone through all the IDs on the page, and I can not see any clashing, there was one clash, but it still hasn't cured the problem.
The crashing aslo seems to be different on certain systems, as I got a friend to check on two PCs one played both movies a couple of times then crashed, the other, like mine crashed on close first time.
George

chemist458
12 Jun 2008, 6:07 PM
Dear Doug,
I have now tried the new version and again IE is perfect, but this time FF plays the sound but you see no video, and it still crashes on me.
I will now include everything on my page to see if it helps
html page

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Casino Tools - Put the odds in your favour</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="ext-2.1/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<link href="ext-2.1/SlicknessTheme/css/xtheme-slickness.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="ext-2.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-2.1/ext-all.js"></script>
<script type="text/javascript" src="js/uxmedia.js"></script>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<style type="text/css">
<!--
.style1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #FFFFFF;
}
.style2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
font-weight: bold;
}
-->
</style>
<script type="text/javascript" src="js/friend.js"></script>
<script type="text/javascript" src="js/tutorial.js"></script>
<script type="text/javascript" src="js/advert.js"></script>
</head>
<body onload="MM_preloadImages('images/BTN-Advert2.png','images/BTN-Tutorial2.png','images/BTN-Contact2.png','images/BTN-LiveHelp2.png','images/BTN-Login2.png','images/BTN-Register2.png','images/BTN-Tell2.png')">
<!--header paer start -->
<div id="headerPan">
<ul>
<li><a href="index.html">home</a></li>
<li><a href="#" id="adTop">advert</a></li>
<li><a href="#" id="tutTop">tutorial</a></li>
<li><a href="login.php">login</a></li>
<li><a href="register.php">register</a></li>
<li><a href="#" id="tellTop">tell</a></li>
<li><a href="contact.htm">contact</a></li>
</ul>

</div>
<!--header part end -->
<!--body part start -->
<div id="mainBody">
<!--left side start -->
<!--left side end -->
<!--right side start -->

<div align="center"><br />
<a href="login.php" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('Login','','images/BTN-Login2.png',1);"><img src="images/BTN-Login.png" name="Login" width="155" height="144" border="0" id="Login" /></a>
<a href="register.php" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('Register','','images/BTN-Register2.png',1);"><img src="images/BTN-Register.png" name="Register" width="155" height="144" border="0" id="Register" /></a>
<a href="#" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('TellFriend','','images/BTN-Tell2.png',1);"><img src="images/BTN-Tell.png" name="TellFriend" width="155" height="144" border="0" id="TellFriend" /></a>
<h3 class="style1">Put the odds in your favour with a range of free calculators, tutorials, and bonuses. This website allows our members access to information that the casinos would rather you not know.</h3>
<br />
<table border="0" style="border-collapse:collapse;"><tr>
<td valign="top"><a href="#" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('advert_img','','images/BTN-Advert2.png',1);"><img src="images/BTN-Advert.png" name="advert_img" width="155" height="144" border="0" id="advert_img" /></a></td>
<td valign="top"><a href="#" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('tutorial_img','','images/BTN-Tutorial2.png',1);"><img src="images/BTN-Tutorial.png" name="tutorial_img" width="155" height="144" border="0" id="tutorial_img" /></a>
</td>
<td valign="top"><a href="contact.php" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('Contact','','images/BTN-Contact2.png',1);"><img src="images/BTN-Contact.png" name="Contact" width="155" height="144" border="0" id="Contact" /></a></td>
<td><div align='center' id='VolusionLiveChat' style="width:155px;float:left;"><a href='http://www.volusion.com/livechat_software.asp'>Free Live Chat Software</a></div>
<script defer type='text/javascript' src='https://livechat.volusion.com/script.aspx?id=99665' ></script>
</td></tr></table>
<br />
<br />
</div>
<div align="center"><br />
<table cellspacing="1" cellpadding="1" unselectable="on">
<tbody>
<tr>
<td class="sbmText style2">Share this page : </td>
<td class="sbmDim"><a class="sbmDim" title="Post it to backflip" href="http://www.backflip.com/add_page_pop.ihtml?url=http://www.casinotools.co.uk/&amp;title=CasinoTools" target="_blank"><img src="http://blogs.msdn.com/blogfiles/rahulso/WindowsLiveWriter/IconsfordifferentSocialBookmarkingSites_B387/backflip4.png" border="0"></a></td>
<td class="sbmDim"><a class="sbmDim" title="Post it to blinkbits!" href="http://www.blinkbits.com/bookmarklets/save.php?v=1&amp;source_url=http://www.casinotools.co.uk/&amp;title=CasinoTools" target="_blank"><img src="http://blogs.msdn.com/blogfiles/rahulso/WindowsLiveWriter/IconsfordifferentSocialBookmarkingSites_B387/blinkbit4.png" border="0"></a></td>
<td class="sbmDim"><a class="sbmDim" title="Post it to blogmemes" href="http://www.blogmemes.net/post.php?url=http://www.casinotools.co.uk/&amp;title=CasinoTools" target="_blank"><img src="http://blogs.msdn.com/blogfiles/rahulso/WindowsLiveWriter/IconsfordifferentSocialBookmarkingSites_B387/blogmemes4.png" border="0"></a></td>
<td class="sbmDim"><a class="sbmDim" title="Post it to buddymark" href="http://buddymarks.com/s_add_bookmark.php?bookmark_url=http://www.casinotools.co.uk/&amp;bookmark_title=CasinoTools" target="_blank"><img src="http://blogs.msdn.com/blogfiles/rahulso/WindowsLiveWriter/IconsfordifferentSocialBookmarkingSites_B387/buddymar4.png" border="0"></a></td>
<td class="sbmDim"><a class="sbmDim" title="Post it to complore" href="http://complore.com?q=node/add/flexinode-5&amp;url=http://www.casinotools.co.uk/&amp;title=CasinoTools" target="_blank"><img src="http://blogs.msdn.com/blogfiles/rahulso/WindowsLiveWriter/IconsfordifferentSocialBookmarkingSites_B387/complore4.png" border="0"></a></td>
<td class="sbmDim"><a class="sbmDim" title="Post it to del.icio.us" href="http://del.icio.us/post?url=http://www.casinotools.co.uk/&amp;;title=CasinoTools" target="_blank"><img src="http://blogs.msdn.com/blogfiles/rahulso/WindowsLiveWriter/IconsfordifferentSocialBookmarkingSites_B387/deliciou4.png" border="0"></a></td>
<td class="sbmDim"><a class="sbmDim" title="Post it to del.iri.ous!" href="http://de.lirio.us/bookmarks/sbmtool?action=add&amp;address=http://www.casinotools.co.uk/&amp;title=CasinoTools" target="_blank"><img src="http://blogs.msdn.com/blogfiles/rahulso/WindowsLiveWriter/IconsfordifferentSocialBookmarkingSites_B387/deliriou4.png" border="0"></a></td>
<td class="sbmDim"><a class="sbmDim" title="Post it to digg" href="http://digg.com/submit?phase=2&amp;url=http://www.casinotools.co.uk/&amp;title=CasinoTools" target="_blank"><img src="http://blogs.msdn.com/blogfiles/rahulso/WindowsLiveWriter/IconsfordifferentSocialBookmarkingSites_B387/digg14.png" border="0"></a></td>
<td class="sbmDim"><a class="sbmDim" title="Post it to dotnetkicks" href="http://www.dotnetkicks.com/kick/?url=http://www.casinotools.co.uk/&amp;title=CasinoTools" target="_blank"><img src="http://blogs.msdn.com/blogfiles/rahulso/WindowsLiveWriter/IconsfordifferentSocialBookmarkingSites_B387/CropperCapture154.jpg" border="0"></a></td>
<td class="sbmDim"><a class="sbmDim" title="Post it to furl" href="http://www.furl.net/store?s=f&amp;to=0&amp;u=http://www.casinotools.co.uk/&amp;ti=ToC Gaming News" target="_blank"><img src="http://blogs.msdn.com/blogfiles/rahulso/WindowsLiveWriter/IconsfordifferentSocialBookmarkingSites_B387/furl4.png" border="0"></a></td>
<td class="sbmDim"><a class="sbmDim" title="Post it to live" href="https://favorites.live.com/quickadd.aspx?marklet=1&amp;mkt=en-us&amp;url=http://www.casinotools.co.uk/&amp;title=CasinoTools" target="_blank"><img src="http://blogs.msdn.com/blogfiles/rahulso/WindowsLiveWriter/IconsfordifferentSocialBookmarkingSites_B387/live4.png" border="0"></a></td>
<td class="sbmDim"><a class="sbmDim" title="Post it to magnolia!" href="http://ma.gnolia.com/bookmarklet/add?url=http://www.casinotools.co.uk/&amp;title=CasinoTools" target="_blank"><img src="http://blogs.msdn.com/blogfiles/rahulso/WindowsLiveWriter/IconsfordifferentSocialBookmarkingSites_B387/magnolia4.png" border="0"></a></td>
<td class="sbmDim"><a class="sbmDim" title="Post it to netvouz!" href="http://netvouz.com/action/submitBookmark?url=http://www.casinotools.co.uk/&amp;title=CasinoTools" target="_blank"><img src="http://blogs.msdn.com/blogfiles/rahulso/WindowsLiveWriter/IconsfordifferentSocialBookmarkingSites_B387/netvouz4.png" border="0"></a></td>
<td class="sbmDim"><a class="sbmDim" title="Post it to reddit!" href="http://reddit.com/submit?url=http://www.casinotools.co.uk/&amp;title=CasinoTools" target="_blank"><img src="http://blogs.msdn.com/blogfiles/rahulso/WindowsLiveWriter/IconsfordifferentSocialBookmarkingSites_B387/reddit4.png" border="0"></a></td>
<td class="sbmDim"><a class="sbmDim" title="Post it to shadow" href="http://www.shadows.com/bookmark/saveLink.rails?page=http://www.casinotools.co.uk/&amp;title=CasinoTools" target="_blank"><img src="http://blogs.msdn.com/blogfiles/rahulso/WindowsLiveWriter/IconsfordifferentSocialBookmarkingSites_B387/shadows6.png" border="0"></a></td>
<td class="sbmDim"><a class="sbmDim" title="Post it to spurl" href="http://www.spurl.net/spurl.php?v=3&amp;url=http://www.casinotools.co.uk/&amp;title=CasinoTools" target="_blank"><img src="http://blogs.msdn.com/blogfiles/rahulso/WindowsLiveWriter/IconsfordifferentSocialBookmarkingSites_B387/spurl8.png" border="0"></a></td>
<td class="sbmDim"><a class="sbmDim" title="Post it to technorati!" href="http://technorati.com/faves/?add=http://www.casinotools.co.uk/&amp;title=CasinoTools" target="_blank"><img src="http://blogs.msdn.com/blogfiles/rahulso/WindowsLiveWriter/IconsfordifferentSocialBookmarkingSites_B387/technora4.png" border="0"></a></td>
<td class="sbmDim"><a class="sbmDim" title="Post it to wists" href="http://www.wists.com/?action=add&amp;url=http://www.casinotools.co.uk/&amp;title=CasinoTools" target="_blank"><img src="http://blogs.msdn.com/blogfiles/rahulso/WindowsLiveWriter/IconsfordifferentSocialBookmarkingSites_B387/wists9.png" border="0"></a></td>
<td class="sbmDim"><a class="sbmDim" title="Post it to yahoo!" href="http://myweb.yahoo.com/myresults/bookmarklet?u=http://www.casinotools.co.uk/&amp;t=CasinoTools" target="_blank"><img src="http://blogs.msdn.com/blogfiles/rahulso/WindowsLiveWriter/IconsfordifferentSocialBookmarkingSites_B387/yahoo9.png" border="0"></a></td>
<td class="sbmDim"><script type="text/javascript">
digg_url = 'http://www.casinotools.co.uk/';
digg_skin = 'compact';
</script>
<script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script></td>
</tr></tbody></table>

</div>
</div>
<!--body part end -->
<!--footer start -->

<div id="footerMain">
<div id="footer">
<ul>
<li><a href="index.html">home</a>|</li>
<li><a href="#" id="adBtm">advert</a>|</li>
<li><a href="#" id="tutBtm">tutorial</a>|</li>
<li><a href="login.php">login</a>|</li>
<li><a href="register.php">register</a>|</li>
<li><a href="#" id="tellBtm">tell</a>|</li>
<li><a href="contact.php">contact</a></li>
</ul>
<p>&copy; Copyright Monkey Marketing. All rights reserved.</p>

</div>
</div>
<!--footer end -->
</body>
</html>

My first advert movie page

/**
* @author George Miller
*/
Ext.onReady(function(){
//initalize the quicktips
Ext.QuickTips.init();
//reference the default image
Ext.BLANK_IMAGE_URL = 'ext-2.1/resources/images/default/s.gif';


function createAdvertWindow(){
var check = Ext.getCmp('adwindow');
if(!check){

var mConfigAd = {
mediaType :'WMV'
,url :'http://www.casinotools.co.uk/images/CasinoToolsAdvert.wmv'
,autoSize : true
,id :'admovie'
,unsupportedText : 'Please download the Windows Media Player plugin'
,controls :true
,start :true};

var adwindow = new Ext.ux.MediaWindow ({id:'movieAd'
,height : 508
,width : 655
,title: 'Casino Tools Advert'
,iconCls: 'movie'
,resizable : false
,collapsible:false
,constrain: true
,mediaCfg : mConfigAd
,autoScroll : false //dont want scroll bars around it.
});
}
adwindow.show();

}
Ext.get('advert_img').on('click', function(){
createAdvertWindow()
});
Ext.get('adTop').on('click', function(){
createAdvertWindow()
});
Ext.get('adBtm').on('click', function(){
createAdvertWindow()
});
});


and the other movie page

/**
* @author George Miller
*/
Ext.onReady(function(){
//initalize the quicktips
Ext.QuickTips.init();
//reference the default image
Ext.BLANK_IMAGE_URL = 'ext-2.1/resources/images/default/s.gif';


function createTutorialWindow(){
var check = Ext.getCmp('tutwindow');
if(!check){

var mConfig = {
mediaType :'WMV'
,url :'http://www.casinotools.co.uk/images/CasinoToolsTutorial-Final.wmv'
,autoSize : true
,id :'tutmovie'
,unsupportedText : 'Please download the Windows Media Player plugin'
,controls :true
,start :true};

var tutwindow = new Ext.ux.MediaWindow ({id:'movieTut'
,height : 508
,width : 655
,title: 'Casino Tools Tutorial'
,iconCls: 'movie'
,resizable : false
,collapsible:false
,constrain: true
,mediaCfg : mConfig
,autoScroll : false //dont want scroll bars around it.
});
}
tutwindow.show();

}
Ext.get('tutorial_img').on('click', function(){
createTutorialWindow()
});
Ext.get('tutTop').on('click', function(){
createTutorialWindow()
});
Ext.get('tutBtm').on('click', function(){
createTutorialWindow()
});
});


Hope fully its me being stupid and missing something obvious.
Thanks for all the help so far,
George

hendricd
12 Jun 2008, 7:21 PM
@chemist458 -- does the demoPack behave that way when you close the WMV?

wsn24x7
16 Jun 2008, 4:05 PM
Wow! excellent work. Thanks for sharing.
I found one error message "MSOffice Is not installed", when I click on Documents->Excel. Any ideas why?
I have MS Office 2003 installed in my laptop. My OS is Windows Vista.
Thanks.

hendricd
16 Jun 2008, 6:26 PM
At this point, that mediaCfg is 'experimental'. I'm still toying with a proper default config for that (and I suspect its going to be IE only). ;)

crpatrick
24 Jun 2008, 12:26 PM
Hi there-

Thanks again for this component...it works very well for our application. One question. I have setup a ComboBox with a listener. When the user selects an option from the ComboBox, I would like to use the value to change the URL and update a flash chart. Initially, my flash chart appears as expected, but on the refresh (I am using renderMedia for this), the flash is suddenly blank. Any ideas how to go about just changing the config url and refreshing properly?

Thanks for any help.
Chris

MediaPanel


var performanceChart = new Ext.ux.MediaPanel({

id: 'perfOverTimeChartPanel',
renderTo: 'performanceOverTimeDiv',
height: 210,
width: 900,
border: false,

mediaCfg: {
mediaType: 'SWF',
url: 'charts.swf?&library_path=/chart/charts_library&xml_source=/ChartServiceHandler%3F'+perfHistChartParam,
unsupportedText: 'The web browser must have the Flash player installed to view all charts.',
controls: true,
start: true,
params: {
wmode: 'transparent'
}
}
});


ComboBox listener:



listeners : {
'select' : function(combo, record, index) {
var newParams = "";

if (this.getValue() == 0)
newParams = newParams
else
newParams = "%26periodInd%3D"+this.getValue();

performanceChart.mediaCfg.url = perfHistChartParam+newParams;
performanceChart.renderMedia(performanceChart.mediaCfg);
}
}

hendricd
24 Jun 2008, 1:55 PM
...Any ideas how to go about just changing the config url and refreshing properly?

Since you're using a complex Flash object use the FlashPanel class instead (and you were mangling the URL on combo change):



var baseUrl = 'charts.swf?&library_path=/chart/charts_library&xml_source=/ChartServiceHandler=' ;
var performanceChart = new Ext.ux.FlashPanel({

id: 'perfOverTimeChartPanel',
renderTo: 'performanceOverTimeDiv',
height: 210,
width: 900,
border: false,

mediaCfg: {
requiredVersion : 8, //required Flash version?
url: baseUrl + perfHistChartParam,
unsupportedText: 'The web browser must have the Flash player installed to view all charts.', //the default is better.
controls: true,
start: true,
params: {
wmode: 'transparent'
}
}
});
ComboBox listener:



listeners : {
'select' : function(combo, record, index) {
var newParams = "";

if (this.getValue() == 0)
newParams = newParams
else
newParams = "&periodInd="+this.getValue();

performanceChart.mediaCfg.url = baseUrl + perfHistChartParam+newParams;
performanceChart.renderMedia();
}
}

Try that out. ;)

crpatrick
25 Jun 2008, 5:43 AM
Perfect...thanks very much for the help!

btw...didn't see there was default text for the unsupported text. :)

hendricd
25 Jun 2008, 5:48 AM
btw...didn't see there was default text for the unsupported text. :)

Ext.ux.FlashPanel has one for Flash object, Ext.ux.Media* are more generic classes.

junkzilla
8 Jul 2008, 7:12 AM
I put a Ext.ux.FlashPanel inside a TabPanel, this TabPanel is contained another TabPanel:

1) With FF everytime you change tab and go back Flash is reloaded.

2) Our flash movie has Fullscreen availability but when you click to see in Fullscreen is shown during 1 sec inside container.

Any idea?

Many thanks :)

hendricd
8 Jul 2008, 7:42 AM
I put a Ext.ux.FlashPanel inside a TabPanel, this TabPanel is contained another TabPanel:
1) With FF everytime you change tab and go back Flash is reloaded.
You'll need to add this to any upstream Panel config that gets hidden as a result of a parent tabChange:


hideMode : !Ext.isIE?'nosize':'display',
autoScroll : false,

2) Our flash movie has Fullscreen availability but when you click to see in Fullscreen is shown during 1 sec inside container.Much depends on the player you are using. I have little control over that behavior (whatever that is). ;)

Eric24
8 Jul 2008, 7:14 PM
Great component Doug! I just started playing with these (they've been on my list for a while) and I have an observation and a question:

1) In FF2, the size of the Flash component seems to always be a little bigger than the window (i.e., you can't enlarge the window to get it to show the whole Flash component) and if you shrink the window and scroll the scrollbars, you see a lot of empty space around the Flash component.

2) Do you happen to have any examples (or tips) for how a Flash/Flex application would invoke an Ext event? You mention that this is possible with flashpanel, but I couldn't find any further mention of it in the forums or in your example. This is specifically something I'm needing to do.

Thanks!
Eric

hendricd
8 Jul 2008, 7:36 PM
..and I have an observation and a question:

1) In FF2, the size of the Flash component seems to always be a little bigger than the window (i.e., you can't enlarge the window to get it to show the whole Flash component) and if you shrink the window and scroll the scrollbars, you see a lot of empty space around the Flash component.You are entirely at the mercy of the Flash/Flex developer. Most Flash video players have yet-another coordinate system for the actual video stream rendering area seperate from the DOM rendering boundaries (if that makes any sense). The YouTube player (see the mediaDemo.zip:"Police vs Fireman" for an example) will resize the rendered video when it's container size changes. Most others will not. Which is why the renderOnResize config option is available (but that reinitializes the entire Flash object and it starts over again :( ). For RIA, choose your player wisely.

2) Do you happen to have any examples (or tips) for how a Flash/Flex application would invoke an Ext event? You mention that this is possible with flashpanel, but I couldn't find any further mention of it in the forums or in your example. This is specifically something I'm needing to do.

The ux.Chart.Fusion classes demonstrate attaching standard Ext listeners to DOM events raised by a Flash object (but, it again depends on what events the developer has exposed to the DOM). Do a little research on Flash:ExternalInterfaces (old-school these days). But, ux.Flash* does support an event synch, but I have yet to find a mainstream Flash component worthy (except maybe YUI Chart Object) to show that off just yet. Still building my new Demo site. I'll see what I can do... ;)

And, keep in mind: Most (non-commercial ) Flash objects developed in the past were designed for static page layouts, not containers that move around/resize.

junkzilla
8 Jul 2008, 11:16 PM
Many thanks Hendricd :P

The hidMode solution was very good! But I couldn't apply autoScroll to false cause TabPanel parent needs scrolling.

About second part of your answer I didn't understand quite well. Could the problem be a old version of Flash Player ?

Thanks :)


You'll need to add this to any upstream Panel config that gets hidden as a result of a parent tabChange:


hideMode : !Ext.isIE?'nosize':'display',
autoScroll : false,
Much depends on the player you are using. I have little control over that behavior (whatever that is). ;)

hendricd
9 Jul 2008, 2:25 AM
About second part of your answer I didn't understand quite well. Could the problem be a old version of Flash Player ?
:) What player is it (and what Flash version is installed)?

dias
10 Jul 2008, 8:55 AM
I try to download this extension... but the mediademo.zip is damaged.

Can someone help me?


Thanks in advance

Paulo

hendricd
10 Jul 2008, 9:12 AM
IE downloads of zip files from vBulletin seem to be a problem FF works fine tho.

dias
10 Jul 2008, 9:24 AM
Thanks

Paulo

junkzilla
11 Jul 2008, 1:33 AM
:) What player is it (and what Flash version is installed)?

My version is Flash player: 9,0,124,0 and Flash movie version 9

:?

hendricd
11 Jul 2008, 3:46 AM
2) Our flash movie has Fullscreen availability but when you click to see in Fullscreen is shown during 1 sec inside container.
Any idea?


@junkzilla -- I have always noticed a slight delay when Flash switches to full-screen. I believe this is the Player's behaviour and we have little control over it. :-?

junkzilla
11 Jul 2008, 5:00 AM
@junkzilla -- I have always noticed a slight delay when Flash switches to full-screen. I believe this is the Player's behaviour and we have little control over it. :-?

Hi Hendricd,

We didn't understand. I 've uploaded 2 pictures of my problem normal behaviour and fullscreen issue.

Fullscreen is not showing in a real fullscreen.

:?

Thanks!

hendricd
11 Jul 2008, 5:14 AM
We didn't understand.

You're right, we don't, and those images aren't very useful.

What does full-screen mean to you?

You have a public URL to look at?

hat27533
11 Jul 2008, 7:22 AM
great plugin...

I read earlier on that someone wanted to be able to post parameters on the url using the 'POST' method.

I could do with doing posts instead of gets too.

Has any one figured out an overide for this or is it just not possible?

hendricd
11 Jul 2008, 7:29 AM
great plugin...

I read earlier on that someone wanted to be able to post parameters on the url using the 'POST' method.

I could do with doing posts instead of gets too.

Has any one figured out an overide for this or is it just not possible?

That's going to depend on who (media/Flash object) the consumer of the response is and who is making the GET/POST request.

Did you have a example use-case in mind?

hat27533
11 Jul 2008, 7:39 AM
Hi, I think I can answer my own question here regarding using the 'POST' method. As the mediapanel is using an updater object, I can simply :-



mymediapanel.getUpdater().update({
url:myurl,
method:'POST',
params:{param1:'foo',param2:'bar'}
});


From the api if you use the update() method and parameters are present the 'POST' method is used or you can set the methodas above.

I have not tried this yet....;)

hat27533
11 Jul 2008, 7:45 AM
I am serving up a pdf via itext/servlet to a print preview window:-

This is the client side code and it works fine but uses the get method.


var params = server + "/PDFPrinter.pdf?employee=" + empNo.getValue();
params += "&week_number=" + Timesheet.wn.getValue();
params += "&year_required=2008";
params += "&t=" + new Date().getTime();

var pdfViewer = new Ext.ux.MediaPanel({
id: 'pdfViewer',
renderTo: document.body,
loadMask : {msg:'Preparing print preview please wait...'},
mediaCfg: {
mediaType: 'PDF',
url: params,
unsupportedText: 'Acrobat Viewer is not installed',
controls: false
}
});

var win = new Ext.Window({
title: 'Timesheet Print Preview',
layout: 'fit',
height: 500,
width: 700,
items: pdfViewer ,
maximizable:true,
minimizable:false
});

win.show();


I think I can set the updater method to 'POST' using the update() method, see my other post about this

hat27533
11 Jul 2008, 7:55 AM
Yep it works a treat now, I have modified my code and it now gets my pdf from the server with the 'POST' method :-



var pdfViewer = new Ext.ux.MediaPanel({
id: 'pdfViewer',
renderTo: document.body,
loadMask : {msg:'Preparing print preview please wait...'},
mediaCfg: {
mediaType: 'PDF',
//url: params,
unsupportedText: 'Acrobat Viewer is not installed',
controls: false
}
});

var win = new Ext.Window({
title: 'Timesheet Print Preview',
layout: 'fit',
height: 500,
width: 700,
items: pdfViewer ,
maximizable:true,
minimizable:false
});

var pdfViewerUpdater = pdfViewer.getUpdater();

win.show();

pdfViewerUpdater.update({
url:server + "/PDFPrinter.pdf",
method:'POST',
params:{employee:27533,year_required:2008,week_number:23}
});

hendricd
11 Jul 2008, 7:58 AM
The ux.Media classes (and sub-classes) deal exclusively with mediaCfg objects, not markup returned by an Updater.load call.

In fact, autoLoad is disabled on mediaPanels and Windows as doing that would wipe out the rendered media.

Version 2.0 of ux.Media classes will support autoLoad/ load (POST, GET, etc), but it will be expecting a mediaCfg object response only, rather than markup.

But, you could override the load and autoLoad methods currently and do the same thing, calling

.renderMedia(Ext.decode(response.responseText))yourself. ;)
And, you can still currently use other methods (like ux.RemoteComponent etc) to lazy load a full mediaPanel (with the desired mediaCfg defined in it).

hendricd
11 Jul 2008, 8:00 AM
Ah, I see you took yet another approach. ;)

hendricd
11 Jul 2008, 8:05 AM
In fact, by using Updater, you are wiping out the content that mediaPanel renders for you. You dont even need it, doing it that way. Your approach also assumes the user's browser is configured for inline PDF viewing (it may not work just rendering a stream like that).

Just use a single window and update its body instead.

hat27533
11 Jul 2008, 8:11 AM
Doh, it doesnt work I just get rubarb garbage displayed.

I am not sure now how to do this, I would like to stick with the mediaPanel ....:(:

hendricd
11 Jul 2008, 8:19 AM
@hat27533 -- The Acrobat browser plugin loads the url you request (with params) but does not support POST.

You would need to generate a (saved) PDF file on your server based on your post, and return a url to that,so that the browser plugin can load it.

dias
12 Jul 2008, 6:34 PM
Hello i try this code



var movie = new Ext.ux.MediaPanel({
renderTo: 'movie',
title: false,
border: false,
height: 200,
width : 200,
autoScroll: false,
mediaCfg: {
mediaType: 'WMV',
start: true,
autoSize: true,
url: 'teste.wmv'
}
});


In "renderTo:" movie is a DIV


But the movie is not show...


What i'm doing wrong!!


Thanks in advance

Paulo

junkzilla
13 Jul 2008, 10:54 PM
You're right, we don't, and those images aren't very useful.

What does full-screen mean to you?

You have a public URL to look at?


With "Flash Full-screen" I mean a method that covers all your screen with the flash movie. It's the same function has YouTube on right corner.

Actually It's not available to a public URL maybe at end of next week.

dias
16 Jul 2008, 10:22 AM
Hello,

I try this code to show a pdf...



var pdf = new Ext.ux.MediaPanel({
id: 'pdf1',
renderTo: 'content',
title: 'PDF - LS1',
border: true,
frame: true,
mediaCfg: {
mediaType: 'PDF',
url: 'ls1.pdf',
unsupportedText : not['PDF']
}
});


'content' is a DIV

But the PDF is not show....

What i'm doing wrong...

Thanks in advance

Paulo

hendricd
16 Jul 2008, 11:08 AM
Hello,

I try this code to show a pdf...
I try this code to show a WMV...



@Dias -- How does the mediaDemo.zip package behave? Does it render either the PDF or WMV? If it does, you've probably copy/pasted too much/little to your project from there.

Sadhana X Punuru
16 Jul 2008, 11:52 AM
Hi ,

how can i get the event that a flash files finished running on html page.The flash file sits locally on my machine.

I need to know how can i catch the event of flash file compleated running.
will Ext.ux.MediaPanel.Flash.eventSynch help in catching this functionality.

I'm new user of ext js and will continue working on it ..

can any one help me with this

Thanks in advance

S

dias
16 Jul 2008, 2:47 PM
Hello...

The problem (if it is a problem) was the height and width... if i define it... works.

Thanks

hendricd
17 Jul 2008, 3:27 AM
Hi ,

how can i get the event that a flash files finished running on html page.The flash file sits locally on my machine.

I need to know how can i catch the event of flash file compleated running.
will Ext.ux.MediaPanel.Flash.eventSynch help in catching this functionality.


@Sadhana-- Much depends on the capabilities of your player. The eventSynch implementation of ux.Flash* permits conversion of custom callbacks from Flash Components to a normalized Ext event. But the Flash Component must written in such a way to use it properly.

Note: I do not yet have a reference sample that fully demonstrates its use yet. There are so many potential examples.

You may not even need to use it depending on which player you've chosen. Many support alternate methods (often simpler) of reporting player state.

Which are you using?

junkzilla
17 Jul 2008, 6:13 AM
Hi Doug ;)

I'll try to demonstrate how Ext.Media doesn't work in fullscreen mode or how I'm doing it bad :P

First I rewrite a piece of your demo code. At 82 line of medpanel.js change for this:


,params:{wmode:'opaque'
,allowscriptaccess : 'always'
,flashVars:{
file : 'http://media.mdpixx.com/0/317_pULs4OFb6UJjTV.flv'
,width:380
,height:280
,recommendations : 'http://mdpixx.com/newxml/detail2.php?resourceid=317'
,logo :'http://mdpixx.com/player/logo.png'
,link :'http://mdpixx.com/atlas/view.php?id=317'
}
}
We will change "Fire vs Police" movie to Mdpixx movie that allows fullscreen :P

Then we reload the page and a new video will be load from Mdpixx, you click play and then click full screen at right corner. This doesn't work, why? I don't know... Maybe some div :?

However if you have a blank Html and you add:


<embed src="http://mdpixx.com/player/mediaplayer.swf" width="480" height="380" allowscriptaccess="always" allowfullscreen="true" flashvars="width=480&height=380&file=http://media.mdpixx.com/0/317_pULs4OFb6UJjTV.flv&recommendations=http://mdpixx.com/newxml/detail2.php?resourceid=317&logo=http://mdpixx.com/player/logo.png&link=http://mdpixx.com/atlas/view.php?id=317" />
You can watch the movie and when you click on fullscreen button it will be shown in fullscreen mode

hendricd
17 Jul 2008, 6:41 AM
@junkzilla -- Review this (http://blog.deconcept.com/swfobject/forum/discussion/813/soaddparamallowfullscreen-true/)further, and try it this way (if you have the correct version of the player installed):



...
,url : 'http://media.mdpixx.com/0/317_pULs4OFb6UJjTV.flv'
,width:380
,height:280
,params:{ wmode:null //disable this option
,allowfullscreen : true
,allowscriptaccess : 'always'
,flashVars:{
width : '@width'
,height : '@height'
,recommendations : 'http://mdpixx.com/newxml/detail2.php?resourceid=317'
,logo :'http://mdpixx.com/player/logo.png'
,link :'http://mdpixx.com/atlas/view.php?id=317'
}
}

Sadhana X Punuru
17 Jul 2008, 10:02 AM
@Sadhana-- Much depends on the capabilities of your player. The eventSynch implementation of ux.Flash* permits conversion of custom callbacks from Flash Components to a normalized Ext event. But the Flash Component must written in such a way to use it properly.

Note: I do not yet have a reference sample that fully demonstrates its use yet. There are so many potential examples.

You may not even need to use it depending on which player you've chosen. Many support alternate methods (often simpler) of reporting player state.

Which are you using?


Thanks hendricd for the reply.
I'm using Abode Flash Player ..can you please help me which player would be good to go ...this will be so helpful for me to start up , also please give me few more suggestion and direction how can do get this functionality of get going of catching the events from a flash file..

Thanks in advance

hendricd
17 Jul 2008, 10:09 AM
Have a look at this (http://extjs.com/forum/showthread.php?t=30352) ux. I might support the events you're looking for.

hat27533
17 Jul 2008, 2:16 PM
Hi Doug,

I have been having fun and games with the MediaPanel displaying a PDF. It all works fine now and I am able to display my servlet generated docs.

There is an anomoly with IE7, if you zoom the doc then move the MediaPanels parent Ext.Window object the Mediapanel and its contents disapear. This only happens with IE7.

Firefox, opera and safari are OK (Windows machine).



var pdfViewer = new Ext.ux.MediaPanel({
id: 'pdfViewer',
renderTo: document.body,
loadMask : {msg:'Preparing print preview please wait...'},
mediaCfg: {
mediaType: 'PDF',
url: params,
unsupportedText: 'Acrobat Viewer is not installed',
controls: false
}
});

win = new Ext.Window({
title: 'Timesheet Print Preview',
layout: 'fit',
height: 500,
width: 700,
items: pdfViewer ,
stateful:false,
maximizable:true,
minimizable:false,
closable:true,
closeAction:'close'
});