PDA

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



Pages : 1 [2] 3 4

hendricd
17 Jul 2008, 5:08 PM
@hat27533-- Try it this way:



var pdfViewer = new Ext.ux.MediaPanelWindow({
id: 'pdfViewer',
renderTo: document.body,
height: 500,
width: 700,
stateful:false,
maximizable:true,
minimizable:false,
closable:true,
closeAction:'close',
loadMask : {msg:'Preparing print preview please wait...'},
mediaCfg: {
mediaType: 'PDF',
url: params, // ?????
unsupportedText: 'Acrobat Viewer is not installed',
controls: false
}
});

IT100
20 Jul 2008, 5:51 AM
Great job!!!!

FYI: http://www.bobbyvandersluis.com

Did a terrific job implementing flash using his "ufo" solution which is compliant across all major browsers.

Just add the ufo.js (download from www.bobbyvandersluis.com (http://www.bobbyvandersluis.com))

Parameters:

var FO = { movie:"swfs/media.swf", width:"100%", height:"100%", majorversion:"6", build:"0" };

Write the div:

UFO.create(FO, "media");

( <div id="media"> </div> )


Works very nice on extjs panels, Windows etc...

Very sophisticated ways of communication or special needs for the flashplayer are possible, Check it out!

Regards,
Chris.

tinakonda
20 Jul 2008, 7:54 PM
Hi,
Is there a way in ux.media to check the event of .swf video has been stopped.Capturing events of flash file of video stop. I could able to capture video event by using flash_DoFSCommand(command, args) in javascript of SWFObject. IS there a way to to samethign like DoFSCommand in ux.media or any other working example would be appreciated.Does swiff support anything like that .

Earlier, it was mentioned that ux.media supports controls, but I want something like DoFSCommand where I can use in extjs directly.


Thank you,
Tina.

userofit
21 Jul 2008, 6:15 AM
Hi, Doug, the files cannot be unzipped.

hendricd
21 Jul 2008, 6:17 AM
Download with Firefox instead. IE has issues with vBulletin (it seems).

smit_al
22 Jul 2008, 11:48 AM
I've been using MediaPanel for a while now with PDF's. I attempted today to add the ability to view XLS files. I can't get the file to open in Firefox or IE.

When I attempt to open it in FireFox I get the error "Additional plugins are required to display all the media on this page.", when I click the option to install plugins it doesn't find a valid one.

When I attempt to open it in IE I can see EXCEL.EXE running in Task Manager with a high CPU, then it goes away and doesn't open the spreadsheet.

I'm pasting code below.

Any ideas?

BTW, very nice plugin!


var SummaryReport = new Ext.ux.MediaPanel({
id : 'SummaryReportPanel',
height : 400,
width : 600,
mediaCfg : {
mediaType : '',
url : '',
unsupportedText : ''
}
});

I then update the mediaType, url, and unsupportedText based on the users selection.


success : function(form, action) {
var xml = form.errorReader.xmlData;
var link = Ext.DomQuery.selectValue('response/report/link',
xml);
var outputtype = Ext.DomQuery.selectValue(
'response/report/outputtype', xml);
SummaryReport.mediaCfg.url = link;
SummaryReport.mediaCfg.mediaType = outputtype;
if (outputtype == 'PDF') {
SummaryReport.mediaCfg.unsupportedText = 'Acrobat viewer is not installed!';
}
if (outputtype == 'XLS') {
SummaryReport.mediaCfg.unsupportedText = 'Spreadsheet viewer is not installed!';
}
SummaryReport.renderMedia();

hendricd
23 Jul 2008, 8:15 AM
@smit_al -- I too, have had difficulty (frankly lack of interest with MS) with the Office suite, but try adding this mediaType and try it:



Ext.ux.Media.mediaTypes.XLS = {
tag : 'object'
,cls : 'x-media x-media-xls'
,type :"application/vnd.xls" //or 'application/vnd.ms-excel'
,data : "@url"
};

..instead of the generic 'OFFICE' config.

smit_al
23 Jul 2008, 10:57 AM
Doug,

Thanks for the reply. That type gave the same results. Although, I did try changing the type to "text/plain" and it opens the spreadsheet. Of course the behavior is different in Firefox and IE: Firefox opens Excel externally with the spreadsheet and IE opens Excel in the browser replacing my application.


"_XLS" : {
tag : "object",
cls : "x-media x-media-excel",
type : "text/plain",
data : "@url"
},

What do you use to display spreadsheets? Do they display in the MediaPanel?

Thanks

hendricd
23 Jul 2008, 11:29 AM
Try this one:

Ext.ux.Media.mediaTypes["OWC:XLS"] = Ext.apply({ //experimental IE only
tag : 'object'
,cls : 'x-media x-media-xls'
,type :"application/vnd.ms-excel"
,controltype: "excel"
,params : {
DataType : "CSVURL"
,CSVURL : '@url'
,DisplayTitleBar : true
,AutoFit : true
}
},Ext.isIE?{
codebase: "file:msowc.cab"
,classid :"CLSID:0002E510-0000-0000-C000-000000000046" //owc9
//classid :"CLSID:0002E550-0000-0000-C000-000000000046" //owc10
//classid :"CLSID:0002E559-0000-0000-C000-000000000046" //owc11

}:false)And a demo mediaCfg:


mediaCfg: {
mediaType :'OWC:XLS'
,url :'getData.asp'
,unsupportedText : 'OWC Components are not available.'
,id :'sampleSheet'
,params: {
HTMLUrl : null
,CSVURL : '@url'
,DataType : "CSVURL"
,AutoFit : true
,DisplayColHeaders :true
,DisplayGridlines : true
,DisplayHorizontalScrollBar : true
,DisplayRowHeaders : true
,DisplayTitleBar: true
,DisplayToolbar:true
,DisplayVerticalScrollBar:true
,EnableAutoCalculate:true
,EnableEvents:true
,MoveAfterReturn:true
,MoveAfterReturnDirection: false
,RightToLeft : 0
,ViewableRange :"A1:I30"
}
}
getData.asp:

<%@ Language=VBScript %>
<%

Option Explicit

Response.Buffer = True

Dim ct, Max, Min
Dim anValues(50)

'Initialize the random number generator

Randomize

Max = 20
Min = 5

'Loop creating 50 random values

for ct = 0 to 49
anValues(ct) = Int((Max - Min + 1) * Rnd + Min)
next

For ct = 0 To 19 Step 2
Response.Write "Value = " & anValues(ct) & ",Value = " & anValues(ct+1) & Chr(13) & Chr(10)

Next
%>I don't think you'll have much luck on non-IE browsers tho unless they have OpenOffice plugins installed.

Try might setting your Content-Disposition headers to(or not) 'inline' and return the same Content-Type as above.

BTW: I do not use MSOffice(boo). OpenOffice is for me. ;)

deltron0
24 Jul 2008, 12:27 PM
i am having a problem with my application, implemented using javascript/ext js and flex; the flex apps are embedded using MediaPanel. the problem is that scrolling using the mousewheel only on the flex app in the north panel of a border layout. the flex app in the center will not scroll unless the north panel is collapsed.

i have verified that scrolling works with both apps on a web page using html generated by the flex builder ide. the difference b/w that markup and the code from media panel seems to be a large number of <PARAM> child elements on the <OBJECT> tag.

can someone give me guidance to get both of my flex apps scrolling while using MediaPanel?

thanks

hendricd
25 Jul 2008, 4:35 AM
... the difference b/w that markup and the code from media panel seems to be a large number of <PARAM> child elements on the <OBJECT> tag.


@deltron0 -- Difficult to say without seeing your mediaCfg(s). You may need to include those extra params
that the Flex IDE includes as well.

Can you post more of both <OBJECT> tags and your layout? Public URL to look at?

dolittle
25 Jul 2008, 4:47 AM
Hi,

I'm trying to have a collapsible tabPanel with flash content on the tabs.
When I change tabs the 'nosize' is used correctly and the falsh behave properly.
When I collapse the tabPanel Ext uses display:none and the flash refreshes.
How can I make the tabPanel use 'nosize'?

Here is a simplified example:

var fp = new Ext.TabPanel({
collapsible: true,
titleCollapse: true,
animCollapse: false,
hideMode : !Ext.isIE?'nosize':'display',
autoScroll : false,
width: 400,
height:340,
renderTo: 'flash-wrap',

items: [{
title: 'tab1',
xtype: 'flashpanel',
hideMode : !Ext.isIE?'nosize':'display',
autoScroll : false,
mediaCfg: {
url :'http://www.youtube.com/v/Jr8n0ww3pio&rel=1',
installUrl:'playerProductInstall.swf',
requiredVersion : '8.0.0',
params:{wmode:'transparent'}
}
},{
title: 'tab2',
hideMode : !Ext.isIE?'nosize':'display',
autoScroll : false
}]

});

Thanks

deltron0
25 Jul 2008, 5:45 AM
@deltron0 -- Difficult to say without seeing your mediaCfg(s). You may need to include those extra params
that the Flex IDE includes as well.

Can you post more of both <OBJECT> tags and your layout? Public URL to look at?

here are my mediaCfgs for the flex apps that scroll and do not scroll, respectively:



mediaCfg: {
mediaType:'SWF',
url: 'flex/SearchResultGrid.swf',
controls: true,
start: true,
id: 'srgrid',
params: {
wmode: 'transparent',
quality: 'high',
width: '1275',
height: '260',
allowscriptaccess: 'always'
}
}




mediaCfg: {
mediaType:'SWF',
url: 'flex/WorkingBlotterGrid.swf',
controls: true,
start: true,
id: 'wbgrid',
params: {
wmode: 'transparent',
quality: 'high',
width: '1275',
height: '260',
allowscriptaccess: 'always'
}
}


and here is the generated markup from media panel and flex:



<OBJECT class="x-media x-media-swf"
id="srgrid"
style="WIDTH: 100%; HEIGHT: 100%"
codeBase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"
type="application/x-shockwave-flash"
data="flex/SearchResultGrid.swf"
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
</OBJECT>




<OBJECT id="srgrid"
codeBase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"
type="application/x-shockwave-flash"
height="50%"
width="100%"
align="middle"
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" name="srgrid">
<PARAM NAME="_cx" VALUE="32385">
<PARAM NAME="_cy" VALUE="11033">
<PARAM NAME="FlashVars" VALUE="">
<PARAM NAME="Movie" VALUE="flex/SearchResultGrid.swf">
<PARAM NAME="Src" VALUE="flex/SearchResultGrid.swf">
<PARAM NAME="WMode" VALUE="Window">
<PARAM NAME="Play" VALUE="0">
<PARAM NAME="Loop" VALUE="-1">
<PARAM NAME="Quality" VALUE="High">
<PARAM NAME="SAlign" VALUE="LT">
<PARAM NAME="Menu" VALUE="-1">
<PARAM NAME="Base" VALUE="">
<PARAM NAME="AllowScriptAccess" VALUE="sameDomain">
<PARAM NAME="Scale" VALUE="NoScale">
<PARAM NAME="DeviceFont" VALUE="0">
<PARAM NAME="EmbedMovie" VALUE="0">
<PARAM NAME="BGColor" VALUE="869CA7">
<PARAM NAME="SWRemote" VALUE="">
<PARAM NAME="MovieData" VALUE="">
<PARAM NAME="SeamlessTabbing" VALUE="1">
<PARAM NAME="Profile" VALUE="0">
<PARAM NAME="ProfileAddress" VALUE="">
<PARAM NAME="ProfilePort" VALUE="0">
<PARAM NAME="AllowNetworking" VALUE="all">
<PARAM NAME="AllowFullScreen" VALUE="false">
</OBJECT>

kpandey
25 Jul 2008, 6:54 AM
Thanks for this well thought our component.

In my quest to move chart rendering to flash, I'm encountering lots of outstanding bugs pertaining to flex chart as well as flex sdk (version 3) resulting in memory leaks on both FF and IE. (see the following bugs on bugs.adobe.com SDK-15710, FLEXDMV-1686)

So, I thought for the time being I could get around to this by periodically re-loading flash using renderMedia().

This works great on FF but on IE memory is not cleaning up and keeps increasing.

I'm using the FlashPanel on a portlet.
Here's the code I use to re-load flash. right now invoked from a tool bar icon on the portlet.


var tools = [{
id:'gear',
handler: function(){
//Ext.Msg.alert('Message', 'refresh flash');
refresh();
}
}]
Ext.onReady(function() {

var p = new Ext.Panel({
title: 'Fit Layout',
id:'mainPanel',
layout:'fit',
width:'auto',
height:500,
tools: tools,
renderTo: Ext.getBody(),
itesm:[]
});
Ext.getCmp('mainPanel').add(
{
id:'flashPanelId',
xtype: 'flashpanel',
title: 'Flash title',
hideMode : !Ext.isIE?'nosize':'display',
height :'100%',
width: '100%',
collapsible:false,
border:true,
mediaCfg:{
mediaType:'SWF'
,url: 'PieChart.swf'
,controls:true
,start:true
,params: { wmode : 'transparent'
,scale :'exactfit'
,salign :'t'
,flashVars:{sessionid:'mysessionId', reportId:'2',vteamId:'4'}
}}
}
)
p.doLayout();
})
var refresh = function(){ var c=Ext.getCmp('flashPanelId').renderMedia();};


Any pointers on further troubleshooting this?

Tried with c.clearMedia(); c.body.update(''); in refresh()
Also tried with hideMode :'visibility',
Thanks
Kumar

hendricd
25 Jul 2008, 7:11 AM
@dolittle -- Try this plugin on your tabPanel and any other upstream collapsible parents:



Ext.namespace('Ext.ux.plugins');
/* config options
elements(optional): list of component members to also adjust visibility for
mode (optional): a specific CSS classname (or 1 or 2 ) to use for custom visibility

Examples:

.add({
xtype:'panel',
hideMode : !Ext.isIE ? 'nosize' : 'display',
//or:
visibilityCls : 'x-hide-nosize', //optional
plugins: [new Ext.ux.plugins.Visibility() ],
...
});

//or, enable on parent and all child items:

var V = new Ext.ux.plugins.Visibility({mode:'x-hide-nosize'});
new Ext.TabPanel({
plugins: V,
defaults: {
plugins: V
},
items:[....]
});
*/

if(Ext.ux.Media){ //alternate Element visibility modes are currently not available without this class

Ext.ux.plugins.Visibility = function(opt) {
opt||(opt={});

this.init = function(c) {

c.on('render',
function(co){

var els = [co.collapseEl, (co.floating? null: co.actionMode)].concat(opt.elements||[]);
var El = Ext.Element;
var mode = opt.mode || co.visibilityCls || El[co.hideMode.toUpperCase()] || El.VISIBILITY;
Ext.each(els, function(el){
var e = co[el] || el;
if(e){e.setVisibilityMode(mode);}
});
co.animCollapse = false;
},
c,
{single:true}
);

};

};
} else {throw "Ext.ux.Media or ux.ManagedIFrame class required for this plugin"; }

Should look something like this:

var fp = new Ext.TabPanel({
collapsible: true,
titleCollapse: true,
animCollapse: false,
hideMode : !Ext.isIE?'nosize':'display',
autoScroll : false,
plugins: !Ext.isIE ? [new Ext.ux.plugins.Visibility() ] : null,
width: 400,
height:340,
renderTo: 'flash-wrap',

items: [{....

hendricd
25 Jul 2008, 7:29 AM
@deltron0 -- Make sure you are using the 'flashpanel' class rather than the generic mediapanel. The FlashPanel/Window classes have special flash handling features in it.
All the Flash classes generate a defualt set of params to get you started. You must add any additional params (and param overrides) to meet your needs.



{
xtype:'flashpanel',
width: 1275, //or, leave out if in a layout
height: 260,

mediaCfg: {
url: 'flex/WorkingBlotterGrid.swf',
controls: true,
start: true,
scripting:'sameDomain', //the default anyway
loop : false,
id: 'wbgrid',
params: {
wmode: 'Window', //set all these to match what Flex IDE generated
quality: 'high',
width: '@width', //macro substitution from Ext layout
height: '@height',
allowscriptaccess: '@scripting',
SAlign : 'LT',
Scale : 'NoScale',
........... Add them all

}
}

hendricd
25 Jul 2008, 7:43 AM
@kpandey-- That mediaCfg doesn't look valid. Should be more like:



{
url: 'PieChart.swf'
,controls:true
,start:true
,params: {
wmode : 'transparent'
,scale :'exactfit'
,salign :'t'
,flashVars:{sessionid:'newSessionId', reportId:'4'}
}
}
FlashPanels cleanup strategy is based on Flash plugins greater than version 7 on IE only. What version are you using?

To simply refresh the current mediaCfg just call:


var refresh = function(){ var c=Ext.getCmp('flashPanelId').renderMedia(); };It handles the cleanup for you (assuming Flex doesn't have other issues).

dolittle
25 Jul 2008, 7:49 AM
The plugin works great with a tabPanel.

Not sure yet in what situation I can use the component's elements config option but I'm sure it will be handy.

It is much better then my hacks.

Thanks

hendricd
25 Jul 2008, 7:53 AM
You would likely only use the 'elements' option to control visibility of perhaps an element of a custom Component (or a Toolbar/Menu containing flash elements).

The default behavior handles 99% of most Ext.Components.

deltron0
25 Jul 2008, 8:35 AM
@hendricd: that worked :D. thx for the help.

kpandey
25 Jul 2008, 9:31 AM
Thanks I fixed the code as suggested and I still see IE mem increasing by ~10 MB on every call to renderMedia().
I have updated my previous post with full code.
Using IE 7.0.6xxx
Flash Player 9,0,124,xxx

The issue is only with IE. In FF it is cleaning up the memory fine

hendricd
25 Jul 2008, 11:17 AM
Thanks I fixed the code as suggested and I still see IE mem increasing by ~10 MB on every call to renderMedia().
I have updated my previous post with full code.
Using IE 7.0.6xxx
Flash Player 9,0,124,xxx

The issue is only with IE. In FF it is cleaning up the memory fine

@kpandey -- Make sure your clearMedia method of uxmedia.js (Line ~710) looks like this:



//Remove an existing mediaObject from the DOM.
,clearMedia : function(){
if(Ext.isReady && this.mediaObject){
this.mediaObject.removeAllListeners();
this.mediaObject.remove();
}
this.mediaObject = null;
}

smit_al
25 Jul 2008, 11:51 AM
I wasn't able to get the Excel spreadsheet to open in the media panel for either IE or Firefox. But I'm listing the steps I took to force the spreadsheet to open the save-as dialog for both IE and Firefox.

I added the following directives to my http config file.


<Files *.xls>
ForceType text/plain
Header set Content-Disposition attachment
</Files>

And I set the XLS media config to the following.


"_XLS" : {
tag : "object",
cls : "x-media x-media-excel",
type : "text/plain",
data : "@url"

hendricd
25 Jul 2008, 12:08 PM
@smit_al -- I spent a fair amount of time with a usable XLS profile and after all the research I did:

If you want to display Excel inline (on the same page), it must be done within an iframe (Content_Disposition:inline attachment...). You can display MSOffice OWC (Office Web Components), as I indicated on my previous post, to load simple CSV/HTML excel files but you've got a fraction of the feature-set available vs iframe-embedded.

kpandey
25 Jul 2008, 1:34 PM
@kpandey -- Make sure your clearMedia method of uxmedia.js (Line ~710) looks like this:



//Remove an existing mediaObject from the DOM.
,clearMedia : function(){
if(Ext.isReady && this.mediaObject){
this.mediaObject.removeAllListeners();
this.mediaObject.remove();
}
this.mediaObject = null;
}


Thanks for your prompt reponse Doug. I added the section you specified above under clearMedia. Added Ext.log stmt .
However I still see mem not clearing up. However in debug view of EXT I noticed something interesting. In FF each invokation of renderMedia instantiates a new objcect for flash player



<div class="x-panel-body" id="ext-gen18" style="overflow: auto; position: relative; width: 1179px; height: 438px;"><object id="ext-gen102" style="height: 100%; width: 100%;" data="PieChart.swf" type="application/x-shockwave-flash" class="x-media x-media-swf"><param value="PieChart.swf" name="movie"/><param value="true" name="play"/><param value="false" name="loop"/><param value="true" name="menu"/><param value="high" name="quality"/><param value="#FFFFFF" name="bgcolor"/><param value="transparent" name="wmode"/><param value="sameDomain" name="allowscriptaccess"/><param value="exactfit" name="scale"/><param value="t" name="salign"/><param value="sessionid=mysessionId&reportId=2&vteamId=4" name="flashVars"/></object></div>



as seen by increasing number in the id field.

In IE this object id doesn't change. Log indicates that clearMedia is getting called.
Just to be doubly sure I changed the flashvars on renderMedia and so see the new values being passed to flash player.

Does the Id remaining same indicate anything?

hendricd
25 Jul 2008, 1:58 PM
@kpandey -- The ID is asssigned when the mediaCfg is first processed, so I wouldn't normally expect the ID to change if you are calling renderMedia without args.

Try the version on this (http://extjs.com/forum/showthread.php?p=180658#post180658)post and lemme know how it rolls.

dolittle
25 Jul 2008, 3:03 PM
I'm trying to use youtube javascript api with a flashPanel.
If you add &enablejsapi=1 to the video url and set param allowScriptAccess: "always"
the player is suppose to call the function onYouTubePlayerReady.

with swfObject it works for me but with flashPanel it works only on FF.
On IE the function never gets called.


function onYouTubePlayerReady(playerId) {
alert('load');
}

Ext.onReady(function(){

var fp = new Ext.ux.FlashPanel({
renderTo: 'flash-wrap',
title: 'test',
collapsible: true,
height: 300,
width: 400,
mediaCfg: {
url :'http://www.youtube.com/v/Jr8n0ww3pio&rel=1&enablejsapi=1&playerapiid=ytplayer&fs=1',
controls :true,
start :false,
requiredVersion : '8.0.0',
params:{
wmode:'transparent',
allowScriptAccess: "always"
}
}

});
});

Any ideas?

Thanks

hendricd
26 Jul 2008, 3:18 AM
@dolittle -- Both your version and this one:


function onYouTubePlayerReady(playerId) {
alert('load:'+playerId);
}

Ext.onReady(function(){

var fp = new Ext.ux.FlashPanel({
renderTo: 'flash-wrap',
title: 'test',
collapsible: true,
height: 300,
width: 400,
mediaCfg: {

//url :'http://www.youtube.com/v/Jr8n0ww3pio&rel=1&enablejsapi=1&playerapiid=ytplayer&fs=1',
url :'http://www.youtube.com/v/Jr8n0ww3pio&rel=1',
controls :true,
start :false,
requiredVersion : '8.0.0',
id: 'ytplayer',
params:{
wmode:'transparent',
allowScriptAccess: "always",
flashVars:{
enablejsapi : 1
,playerapiid:'@id'
,fs:1
}
}
}

});
});.. worked equally well on both FF and IE7 for me :-?

Check those commas ;)

dolittle
26 Jul 2008, 3:50 AM
@hendricd

both your and my versions work on FF but not on IE7.
I have the latest Flash version installed.

I want to display a mask in the panel until the youtube video loads but if the onReady function is not reliable the mask will keep blocking the video.

I guess it's either a problem with my Flash installation or a general Flash bug.

Thanks

kpandey
26 Jul 2008, 12:51 PM
@hendricd
I still see mem leak with the js you mentioned.

I used IE developer tool and noticed that the object is getting removed from the DOM but memory is not getting cleaned.
I'll look into some more (using drip leak detector ) to see if it shows something.

hendricd
27 Jul 2008, 7:57 AM
@hendricd
I still see mem leak with the js you mentioned.

I used IE developer tool and noticed that the object is getting removed from the DOM but memory is not getting cleaned.
I'll look into some more (using drip leak detector ) to see if it shows something.

@kpandey -- I just some completed some Sieve tests (IE7) using this replacement for uxflash.js (near Line 290):


//Private
,_applyFixes : function() {
// Fix streaming media troubles for IE
if(Ext.isIE && Ext.isWindows && this.mediaObject){
var o = this.mediaObject.dom;
if(o && o.readyState == 4){
o.style.display = 'none';
for (var x in o) {
if (typeof o[x] == 'function') {
o[x] = null;
}
}
}

}

},
No leaks and Memory Usage is ~flat.
Give it a try and lemme know how it went for you. (And, make sure you are using one of the Flash Component classes, not one of the generic MediaPanel/Window classes.)

kpandey
27 Jul 2008, 9:47 PM
@kpandey -- I just some completed some Sieve tests (IE7) using this replacement for uxflash.js (near Line 290):


//Private
,_applyFixes : function() {
// Fix streaming media troubles for IE
if(Ext.isIE && Ext.isWindows && this.mediaObject){
var o = this.mediaObject.dom;
if(o && o.readyState == 4){
o.style.display = 'none';
for (var x in o) {
if (typeof o[x] == 'function') {
o[x] = null;
}
}
}

}

},
No leaks and Memory Usage is ~flat.
Give it a try and lemme know how it went for you. (And, make sure you are using one of the Flash Component classes, not one of the generic MediaPanel/Window classes.)

@hendricd -- No luck. Earlier I had something similiar in clearMedia of Ext.ux.Media and noticed that (typeof o[x] == 'function') wasn't matching true to anything!

So I reverted uxmedia.js to the one you had mentioned earlier. Edited above section on uxflash.js. Added Ext.log to print the matches and sure enough nothing matched. I cannot understand why onclick, onbeforeupdate etc aren't matching to 'function'.

Just out of curiosity I tried mathcing it to 'object' and it matched. All functions matched to object along with some additional prop like currentStyle.

I nulled these on object match putting it in a try catch to capture for error while nulling prop like currentStyle and still see the leak.

I'm trying to see how SWFOject behaves. Will update with my observation.

hendricd
28 Jul 2008, 3:47 AM
@kpandey -- Try using a SWF object that is not "suspect", like one of the objects referenced in the mediaPack.zip. I did extensive testing for the final release 1.0 yesterday and encountered no such leaking. :-?

And make sure you are destroying your viewport on exit:

Ext.EventManager.on(window, "beforeunload", viewport.destroy ,viewport ,{single:true});

and you're cleaning up your Flex object internally on dectruction.

dolittle
4 Aug 2008, 8:04 AM
I'm using ux.Media Flash panels inside tabPanel to embed youtube movies.
It all worked great with the nosize solution until recently the youtube movie started to pause when switching tabs. I don't think it happened before.
It happen with the mediapanel.html demo.
Just load the tab hosting the youtube video (not the window), play the video and switch tabs.

When I'm manually adding and removing class: 'x-hide-display' to the tab panel using IE developer bar, the movie doesn't pause.

Flash Version 9.0.124, windows XP, IE7

Any idea?

hendricd
4 Aug 2008, 8:17 AM
@dolittle -- post your tabPanel config and tabs.add code. You generally do not have to specify any hideMode now, as it knows whether IE is involved or not.

dolittle
4 Aug 2008, 8:24 AM
It happens with your demo too.

- loading the "YouTube(again)" tab.
- playing the movie.
- switching the tab to the "backGrounder".
- switch back to the "YouTube(again)" tab. ---> the youtube movie pause on IE.

hendricd
4 Aug 2008, 8:28 AM
Yes, I've noticed that too (sometimes), during testing of ux.Media 1.0 (coming out shortly). I have no idea (yet) why IE does that. :-?

dolittle
4 Aug 2008, 8:46 AM
In my app I have a child tabPanel inside a parent tabPanel.
One of the tabs inside the child tabPanel is a flash panel.

When the flash tab is active and I switch a tab in the parent tabPanel the video pauses but when I switch tabs inside the child tabPanel the video keep playing.

If I switch tabs inside the child tabPanel and then switch tabs in the parent tabPanel the video keep playing.

It is all very reproducible but I can't explain it.

hendricd
4 Aug 2008, 8:48 AM
Deeply nesting MediaPanels will also require changing the hideMode of the upstream parent(s) to prevent DOM reflow.

dolittle
4 Aug 2008, 8:52 AM
I'm using your visibility plugin on the parent components:

hideMode : !Ext.isIE?'nosize':'display',
plugins: new Ext.ux.plugins.Visibility({mode:'x-hide-nosize'});,

In any case, FF works well so the 'nosize' should be fine.

Just to remind you, I suggested the width:0, height:0 on FF so I'm aware of the dom reflow:
http://extjs.com/forum/showthread.php?t=23983&highlight=dolittle&page=4

hendricd
4 Aug 2008, 9:02 AM
Should be:


hideMode : !Ext.isIE?'nosize':'display',
plugins: !Ext.isIE? [new Ext.ux.plugins.Visibility({mode:'x-hide-nosize'})] : null

It works in FF because the media classes already know what browser you're on, and thus how to fix the problem.

Beyond that, I'd need to see more of your layout.

dolittle
5 Aug 2008, 4:45 AM
Here is my config using your visibility plugin.
FF works fine.
On IE7 on several different computers, when you play the movie and switch tab, the movie pauses.
You have to click on the progress bar to start it again. Clicking on the play button doesn't help.


Ext.namespace('Ext.ux.plugins');

if(Ext.ux.Media){ //alternate Element visibility modes are currently not available without this class
Ext.ux.plugins.Visibility = function(opt) {
opt||(opt={});
this.init = function(c) {
c.on('render',
function(co){
var els = [co.collapseEl, (co.floating? null: co.actionMode)].concat(opt.elements||[]);
var El = Ext.Element;
var mode = opt.mode || co.visibilityCls || El[co.hideMode.toUpperCase()] || El.VISIBILITY;
Ext.each(els, function(el){
var e = co[el] || el;
if(e){e.setVisibilityMode(mode);}
});
co.animCollapse = false;
},
c,
{single:true}
);
};
};
} else {throw "Ext.ux.Media or ux.ManagedIFrame class required for this plugin"; }



Ext.onReady(function(){

var tp1 = new Ext.TabPanel({
renderTo: 'tab-wrap1',
height: 300,
width: 400,
animCollapse: false,
hideMode : !Ext.isIE?'nosize':'display',
autoScroll : false,
plugins: !Ext.isIE ? [new Ext.ux.plugins.Visibility() ] : null,
items: [{
title: 'tab1',
html: '<div>some content</div>'
},{
title: 'tab1',
xtype: 'flashpanel',
hideMode : !Ext.isIE?'nosize':'display',
autoScroll : false,
mediaCfg: {
url :'http://www.youtube.com/v/Jr8n0ww3pio&rel=1',
installUrl:'playerProductInstall.swf',
requiredVersion : '8.0.0',
params:{wmode:'transparent'}
}
}]

});


});

Thanks

hendricd
5 Aug 2008, 5:00 AM
Interestingly, this prevents that from happening: :-?



},{
title: 'tab1',
xtype: 'flashpanel',
hideMode : 'nosize',
autoScroll : false,
mediaCfg: {
url :'http://www.youtube.com/v/Jr8n0ww3pio&rel=1',
installUrl:'playerProductInstall.swf',
requiredVersion : '8.0.0',
params:{wmode:'transparent'}
}
}]

dolittle
5 Aug 2008, 5:33 AM
Works for me too.

Maybe we should treat IE and FF the same?

hendricd
5 Aug 2008, 5:54 AM
Works for me too.

Maybe we should treat IE and FF the same?
Hmm. Lemme think about that. :-?

dolittle
5 Aug 2008, 9:55 AM
@hendricd

hideMode: 'nosize' solves the flash issues with simple layout but doesn't work for me with deep nesting and when I have more then one flash panel inside a tabPanel.

When I'm adding the following css it helps:

.x-hide-nosize{
position: absolute;
bottom: 10000px;
}

Maybe for IE we can use x-hide-offsets instead of x-hide-display or add the above css to your extension?

Having a general solution for all the browser and an example for deep nesting could help alot.

hendricd
5 Aug 2008, 10:07 AM
I fear that is all best left to the implementation (which the class design supports fully) everything is optional and overridable (including the CSS rules).

There are just too many constraints in eliminating DOM reflow in a (RIA) nested layout:

any transition from anything to position:absolute and back again - reinitiallizes the object/embed
setting overflow:anything on a parent - reinitiallizes downstream object/embeds
display:none; reinitiallizes the object/embed
visibility:none; freezes the object (all browsers)

Ext.fx (all are position:absolute transitions) cannot be used.

You'll have to manage Component visibility (using the plugin) on a layout (case-by-case) basis.

The final ux.Media/Flash 1.0 release improves things further, but upstream parents will still require custom visibility treatment (often per browser).

And inline Acrobat(PDF) z-Index control? Forget about it. Their plugin will not allow any zIndex control.

deltron0
5 Aug 2008, 10:44 AM
hendricd,

i am using the RC1 code base and have two FlashPanels in a border layout in the north and central regions. i am having problems with resizing the panels using the split bar, masking the flash components, tooltips and displaying MessageBox dialogs (IE7 only). I tried the solution that you proposed in this post (http://extjs.com/forum/showthread.php?p=168514#post168514) with tooltips but that didn't work on IE7. also, i am not sure how to apply that solution to split bar. i have some thoughts about getting masking to work properly in IE6 but i am not sure whether i will have to manually adjust the z-index of the dialog as well.

thx

mystix
5 Aug 2008, 5:56 PM
@hendricd -- just a thought: assuming a pure Ext layout, would it be possible to recursively (and automatically) set the hideMode of upstream parents (by recursively checking for an ownerCt) for a mediapanel, before the mediapanel is rendered?

hendricd
5 Aug 2008, 7:23 PM
@hendricd -- just a thought: assuming a pure Ext layout, would it be possible to recursively (and automatically) set the hideMode of upstream parents (by recursively checking for an ownerCt) for a mediapanel, before the mediapanel is rendered?
Yes, ManagedIFrame already does something similar for splitbar-drag masking, but browser media plugins present a significant problem in that every plugin author (the object/embed tag) creates a scenario that is difficult to predict. Flash, PDF, MS_WMV, audio, etc are all whimsacle manifestastations of some fools vision of how things should be presented in todays browser and browser standards (W3C) are the weakest in this area.

I suppose one could narrow down the Flash nuances, but where does it end? Perhaps I'm wasting my time with all this crap. :-?

deltron0
6 Aug 2008, 6:14 AM
i found a blog entry that solved my problem. i just needed to change the wmode from "Window" to "transparent". here is the link for anyone who's interested: Flash swf object in html: z-index (http://geekswithblogs.net/steveclements/archive/2007/03/03/107839.aspx).

Kelly Riley
6 Aug 2008, 8:26 AM
I noticed two things with the MediaPanel I wanted to share.

1) I was unable to get unsupportedText to ever get added to the dom unless I explicitly left off the url. I had to add

var unsup = this.assert(m.unsupportedText|| this.unsupportedText || media.unsupportedText,null);
unsup = unsup ? Ext.DomHelper.markup(unsup): null;
m.children.push(String.format(unsup || 'Media Configuration/Plugin Error',' ',' '));Right around line 403 of uxmedia.js

2) FF3 and embedded PDF. Refreshing crashes Firefox. I believe this to be a bug in their new browser as it doesn't happen in FF2 or IE. I have gotten around it by checking if it is FF3 and use an "embed" tag vs. "object" for the time being.

hendricd
6 Aug 2008, 9:03 AM
I noticed two things with the MediaPanel I wanted to share.

1) I was unable to get unsupportedText to ever get added to the dom unless I explicitly left off the url. I had to add

var unsup = this.assert(m.unsupportedText|| this.unsupportedText || media.unsupportedText,null);
unsup = unsup ? Ext.DomHelper.markup(unsup): null;
m.children.push(String.format(unsup || 'Media Configuration/Plugin Error',' ',' '));Right around line 403 of uxmedia.js

2) FF3 and embedded PDF. Refreshing crashes Firefox. I believe this to be a bug in their new browser as it doesn't happen in FF2 or IE. I have gotten around it by checking if it is FF3 and use an "embed" tag vs. "object" for the time being.

Regarding #1, I'll check that out for ya.

Regarding #2, here is the PDF profile that will be included in ux.Media 1.0. It works well for me on FF3 (even after calling refresh/renderMedia again). Might give it a try, but 1.0 does include some new cleanup logic for <object>s.

{
"PDF" : Ext.apply({
tag :'object'
,cls : 'x-media x-media-pdf'
,type : "application/pdf"
,style :{position:'absolute',
top :'0px',
left:'0px',
'z-index':11002 //experimental
}
,data : "@url"
,autoSize:true
,params : { src : "@url" }

},Ext.isIE?{classid :"CLSID:CA8A9780-280D-11CF-A24D-444553540000"}:false)

Kelly Riley
6 Aug 2008, 10:46 AM
Regarding #1, I'll check that out for ya.

Regarding #2, here is the PDF profile that will be included in ux.Media 1.0. It works well for me on FF3 (even after calling refresh/renderMedia again). Might give it a try, but 1.0 does include some new cleanup logic for <object>s.


Thank you for quick reply.

EDIT: Tried the 1.0 code and it still crashed :-(. WIll try it on another PC later today to see if it is foobar'd install.

I believe it is the cleanup part that causes the bug to rear its ugly head. Here is example of non-extjs way to recreate bug. The removal of the object node repeatedly seems to cause it. (Sorry for ugly code.)

hendricd
6 Aug 2008, 11:50 AM
The early-release-grab 1.0 code you are using is significantly diff than what's coming out.

Eric24
6 Aug 2008, 12:32 PM
I'm "porting" a flash object that has been using SWFObject to MediaPanel (actually MediaWindow, or perhaps FlashWindow). Using the example MediaPanel code, I have the flash object successfully loading in an Ext window, but I'm stumped on how to take it to the next level. Namely, the flash object implements (or perhaps Flash does natively, I'm not a Flash programmer) getVariable(), setVariable(), and sendCommand() methods that can be called after the object is loaded. From various posts in the forum and a deep perusal of the uxFlash.js code, I surmised that getSWFObject() is the path to use (and presumably, the exposed methods are available on the object returned from getSWFOBject()). But I have not been able to figure out how to call getSWFObject(). Using FB in FF2, I tried:



Ext.getCmp('viewWin').getSWFObject()


But this returns "getSWFObject is not a function". "viewWin" is the ID of the Ext.ux.MediaWindow that was created to hold my flash object.

I must be missing something very basic here--can anyone put me on the right path? Is getSWFObject() not the correct approach?

PS - What is the difference between using Ext.ux.MediaWindow and Ext.ux.FlashWindow (for SWF)? Assuming I'm using only SWF in my app, should I only include uxFlash.js or do I need both uxFlash.js and uxMedia.js? I noticed the example has both of these files (which makes sense, since it demos all sorts of media types), but does not include MediaPanel.js--which brings up the question of what MediaPanel.js is used for if all the functionality is in uxFlash.js and uxMedia.js?

hendricd
6 Aug 2008, 12:36 PM
@Eric24 -- That would be:



var SWF = Ext.getCmp('viewWin').getInterface();


I would also recommend you use the Ext.ux.FlashWindow class instead.

Eric24
6 Aug 2008, 12:39 PM
Yep, that works great! Thanks for the quick reply!

When you get a chance, please answer my question about when to use which of the various .js files in this library. Tnx!

Eric24
6 Aug 2008, 1:04 PM
@Doug

A couple of threads mention the Flash* eventSync feature, and you replied to one saying "I have no examples...there are many possibilities.". Fair enough, but can you give me any tips on how to use it? My flash object is being developed to our requirements, so I have full control of what kind of events are being generated.

Currently, here's what we've got: All events are directed at a single JS method "handleEvent(event, object)", where event is a string of the event name and object is a JS object that is opaque to the event synch and just needs to be passed on to the listener.

With this implementation, I added "eventSynch:true" to the config of my otherwise working FlashWindow implementation, then set a FB breakpoint in uxFlash at "_handleSWFEvent: function(SWF, event)", but the code never got there, even though I'm certain events are being generated by the flash object.

Any tips would be much appreciated--thanks!


Hold the phone! I had the eventSynch:true in the wrong place (in the window config, not the media config). Unfortunately, when place in the right place, it completely breaks the FlashWindow. The Ext window frame opens, but the flash object is never loaded. Removing the eventSynch line restores normal operation.

hendricd
6 Aug 2008, 1:08 PM
When you get a chance, please answer my question about when to use which of the various .js files in this library. Tnx!

Sorry, glazed over that one. ;)

The RC1 release includes two files:
uxmedia.js (the base ux.Media[Component/Panel/Window] classes.
uxflash.js (inherits from the above Media classes and provides additional support for Flash media only)

If you're rendering anything but silly spinner buttons, definitely use the ux.Flash[Component/Panel/Window] classes. They provide much more Flash-specific features (inline Flash upgrade/install, Flash version detection, fscommand interface(2.0+)), and special cleanup for Flash <object> removal on IE.

mediapanel.js was a pre-RC1 experimental release.

Eric24
6 Aug 2008, 1:19 PM
Makes sense--thanks!

inhib
8 Aug 2008, 4:50 AM
Hello !

I would like to know if the plugin for Open Flash chart will be out one day ?

Actually I am able to create the JSon object containing all the datas needed to show the chart, but I don't know how to reproduce the .load(JSONObject) of swfobject with the mediaClass flashpanel ...

Maybe somebody could give me some advice for this ? ;)

Many thanks

hendricd
8 Aug 2008, 9:39 AM
Hello !

I would like to know if the plugin for Open Flash chart will be out one day ?

Actually I am able to create the JSon object containing all the datas needed to show the chart, but I don't know how to reproduce the .load(JSONObject) of swfobject with the mediaClass flashpanel ...

Maybe somebody could give me some advice for this ? ;)

Many thanks

Yes, the ux.Chart.OFC2 will be introduced with the release of ux.Media/Flash 2.0. Altho the OFC-2 Chart object (with JSON support) is in alpha stage, it's looking pretty good.

jeremyswitzer
11 Aug 2008, 5:09 AM
Hello,
I'm having a few issues concerning communication between the ux.FlashPanel object in my javascript and the actual SWF Object itself.

If I have set up a callback function in the swf using ExternalInterface.addcallback(), how do I call that function using FlashPanel? I noticed the call() method from the original mediapanel.js was missing in the current version... Is there another way to accomplish this?
How can I receive an event telling me the swf object, not the FlashPanel, but the actual swf, has been completely rendered and that all my callback functions have been wired up? I tried calling ExternalInterface.call("document.fire", "event") on the creationComplete event inside my flash movie, but it seemed to cause problems with loading of the flash causing it to lock up the page for 5 - 10 seconds before it would render. (still unsure how to use eventsynch... could be the solution?)I did my best to search this thread before asking, so sorry if you've answered these questions before.

here's my javascript code:


ReportView = Ext.extend(Ext.ux.FlashPanel, {
constructor: function(config)
{
config.mediaCfg = {
url: "Content/swf/report.swf",
controls: true,
start: true,
params: {
wmode: "transparent",
allowscriptaccess: "always"
}
};
config.layout = "fit";
config.hideMode = "nosize";

ReportView.superclass.constructor.apply(this, arguments);

this.flashRenderedHandler = this.onRendered.bindAsEventListener(this);
document.observe("reportview:flash:loaded", this.flashRenderedHandler);
},

onRendered: function()
{
// Code for invoking callback functions here.
}
});

hendricd
15 Aug 2008, 5:11 AM
...In example A. you can see six fusion charts and two clocks. All flash objects are rendered correct as expected.

In example B. you can see eight fusion charts. The first seven charts are rendered correct, but chart 8 is rendered to small.

The only difference between both examples is the usage of other flash components beside fusion charts.

My question are:
Has anybody else seen this problem with this plugin and fusion charts anytime before?
Has anybody an idea what the reason of this problem could be?

Thanks in advance
Wolfgang

@Wolfgang -- Just got a chance to examine both sites on IE and they seem to render things just fine. Have you found a solution since you originally posted the issue?


...I'm having a few issues concerning communication between the ux.FlashPanel object in my javascript and the actual SWF Object itself.
If I have set up a callback function in the swf using ExternalInterface.addcallback(), how do I call that function using FlashPanel? I noticed the call() method from the original mediapanel.js was missing in the current version... Is there another way to accomplish this?
How can I receive an event telling me the swf object, not the FlashPanel, but the actual swf, has been completely rendered and that all my callback functions have been wired up? I tried calling ExternalInterface.call("document.fire", "event") on the creationComplete event inside my flash movie, but it seemed to cause problems with loading of the flash causing it to lock up the page for 5 - 10 seconds before it would render. (still unsure how to use eventsynch... could be the solution?)
@jeremyswitzer -- ux.Media/Flash 2.0 adds new fscommand bindings which may simplify things for you but, in the interim, most custom Flash components implement similar features by invoking a public handler (in the browser context) passing the ID of the element to identify which movie raised the callback. For example: YouTubePlayer uses the following function to notify that the movie is loaded:



ReportView = Ext.extend(Ext.ux.FlashPanel, {
constructor: function(config)
{
config || {config = {});
config.mediaCfg = {
url: "Content/swf/report.swf",
controls: true,
start: true,
params: {
wmode: "transparent",
allowscriptaccess: "always"
}
};
config.layout = "fit";
config.hideMode = "nosize";

ReportView.superclass.constructor.call(this, config);

this.flashRenderedHandler = this.onRendered.bindAsEventListener(this);
document.observe("reportview:flash:loaded", this.flashRenderedHandler);
},

onRendered: function()
{
// Code for invoking callback functions here.
var SWF = this.getInterface(); //reference to the underlying SWF object
}
});

//YouTube Global ready handler
window.onYouTubePlayerReady = function(playerId) {
//Search for a ux.Flash-managed player instance.
var mediaComp, el = Ext.get(playerId);
if(mediaComp = (el ? el.owner : null)){ // Note: ownerCt for 1.0 +
mediaComp.onRendered.call(mediaComp);
}
};
Just substitute that function name with one of your own to accomplish the same thing. ;)

hendricd
18 Aug 2008, 2:33 PM
Well, finally. =P~ Testing is done, whew. =D>

Several enhancements, (yet config-compatible with RC1, can likely remove all those hideMode fixes as well):
Additions:
new mediaType definitions for:
Remote Desktop Client (yes there is demo for IE only)
Office Web Connect:XLS (IE only)
PDFFRAME mediaType for all browsers that works (PDF z-index/layer fix eludes me(everyone?))
WordPress MP3 Player
Awesome Flash/Audio JW Player (http://www.jeroenwijering.com/?item=JW_FLV_Media_Player) 4.0 (demo has callbacks and stuff).
Real Player tweaksCallback support for Quicktime.
mediaMask (w/autoMask -- with the new ux.IntelliMask )
new events : mediarender, mediaload (where supported), flashinit
Flash re-init/visibility fixes are now provided by an included plugin: Ext.ux.Media.VisibilityFix, usable anywhere within the framework.

As there are other significant changes (below), the distribution (http://extjs.com/forum/attachment.php?attachmentid=8832&d=1219095484)contains the source itself and the demonstration application. It is designed to be dropped in the /examples/media? directory of your Ext 2.1 or higher only folder heirarchy.

No, I don't have the demo site up yet!

Now, the seemingly bad news:
Due to recent arrival of the Ext FLOSS Exception, portions of ux.Media (and its subclasses) include chunks of enhanced Ext core code, making it incompatible with the FLOSS Exception. To eliminate further ambiguity (which likely remains with the RC1 release), the ux.Media2 series will be licensed with a more Ext-compatible GPL 3.0 license. RC1 will get two bug-fixes (that I'm aware of) and some new mediaType profiles, and will change to v1.0 (the final LGPL release).

More good news, tho.
There will be a ux.ChartPack arriving shortly containing ux.MediaFlash-wrapped chart controls.
2 so-far: ux.Chart.Fusion (FusionCharts) , and the new ux.Chart.OFC (Open Flash Chart 2.0 - feed it JSON =P~ )

The project is also moving to google.code/p/uxmedia (http://code.google.com/p/uxmedia/).

dolittle
19 Aug 2008, 5:11 AM
Congratulations on the new release.


yet config-compatible with RC1, can likely remove all those hideMode fixes as well

Can you elaborate on this?
I'm using your visibility plugin to handle deep nesting of flash content.
I set different hideMode for each level per browser as I found with trial and error.
I have flash panel inside a tab panel inside a tab panel.
Do I still need to define hideMode on parent component or does the new release handle it?

hendricd
19 Aug 2008, 5:18 AM
...
Can you elaborate on this?
I'm using your visibility plugin to handle deep nesting of flash content.
I set different hideMode for each level per browser as I found with trial and error.
I have flash panel inside a tab panel inside a tab panel.
Do I still need to define hideMode on parent component or does the new release handle it?

No, upstream Containers will still need the additional fixes that the plugin provides to prevent problems with reflows.

You can (optionally) remove the hideMode from the actual ux.Media (or subclass) component config and let the class defaults do their thing.

dolittle
19 Aug 2008, 8:47 AM
I can see that clearMedia is being called when you destroy a component or use renderMedia.

Do I need to call it manually when the window unload to release memory?

hendricd
19 Aug 2008, 9:23 AM
I can see that clearMedia is being called when you destroy a component or use renderMedia.

Do I need to call it manually when the window unload to release memory?
It is good form to clean up things before the Browser unloads.

If any component is free-standing (not an item of another container) you should setup an unload handler for it. The same goes for your top-level containers as well (Viewport, Window, or other layout). Calling the destroy method on any of those will propagate down to the child items as well. ;)

Here is quick way to do that:


var _cleanup = [];
Ext.onReady( function(){

//Define your top-level Components
var viewPort = new Ext.Viewport (....);
var chartWin = new Ext.ux.FlashWindow(....);

_cleanup.push(viewPort,chartWin);

//Then set them up for destruction
Ext.EventManager.on(
window,
"beforeunload",
Ext.destroy.createDelegate(Ext, _cleanup) ,
Ext,
{single:true}
);
});
Note: Ext.destroy checks each object passed to it, to determine if it has a destroy method. If so, it assumes the object will handle cleanup itself when invoked. Otherwise, if the object passed is a DOM Element, it is removed from the DOM after any (Ext) listeners have been removed.

maturin666
27 Aug 2008, 1:48 AM
I try to close my MediaPanel, but they are no way.

The PDF is mount but i can't close it.

My code :
[code]
var g = new Ext.ux.MediaPanel({
id:'pdfViewer',
title:cls,
height:200,
width:200,
mediaCfg:{
mediaType:'PDF',
url:href,
unsuppotedText:'Acrobat Viewer n\'est pas install

hendricd
27 Aug 2008, 4:02 AM
I try to close my MediaPanel, but they are no way.

The PDF is mount but i can't close it.

@Mathieu -- Not clear on what you mean? -- The MediaPanel is not closable within a tabPanel?

[code]var g = new Ext.ux.MediaPanel({
id:'pdfViewer',
title:cls,
closable : true,
height:200,
width:200,
mediaCfg:{
mediaType:'PDF',
url:href,
unsuppotedText:'Acrobat Viewer n\'est pas install

maturin666
27 Aug 2008, 4:20 AM
Sorry,

In fact i put the variable g into the MainPanel, but they is no cross in the Tab's top to close it.

However, I include TabCloseMenu.js to close it, but nothing.

I am a beginner with Ext and I work with the API files : docs.js located in 'ext-2.1/docs/ressources/docs.js'

I want mount a PDF in a tab and after i want close it.

Is it better ?

Thanks Mathieu

hendricd
27 Aug 2008, 4:37 AM
@Mathieu -- Post your tabPanel config. Something simple is wrong...

maturin666
27 Aug 2008, 4:48 AM
My config :
[CODE]
Ext.extend(MainPanel, Ext.TabPanel, {
initEvents : function(){
MainPanel.superclass.initEvents.call(this);
this.body.on('click', this.onClick, this);
},
onClick: function(e, target){
if(target = e.getTarget('a:not(.exi)', 3)){
var cls = Ext.fly(target).getAttributeNS('ext', 'cls');
e.stopEvent();
if(cls){
var member = Ext.fly(target).getAttributeNS('ext', 'member');
this.loadClass(target.href, cls, member);
}else if(target.className == 'inner-link'){
this.getActiveTab().scrollToSection(target.href.split('#')[1]);
}else{
window.open(target.href);
}
}else if(target = e.getTarget('.micon', 2)){
e.stopEvent();
var tr = Ext.fly(target.parentNode);
if(tr.hasClass('expandable')){
tr.toggleClass('expanded');
}
}
},
//permet d'ouvrir un nouvel onglet depuis le TreePanel
loadClass : function(href, cls, member){
var id = 'docs-' + cls;
var tab = this.getComponent(id);
if(tab){
this.setActiveTab(tab);
if(member){
tab.scrollToMember(member);
}
}else{
var autoLoad = {url: href};
if(member){
autoLoad.callback = function(){
Ext.getCmp(id).scrollToMember(member);
}
}



var g = new Ext.ux.MediaPanel({
id: id,
title: cls,
loadMask:{msg:'Chargement du plugins PDF'},
height: 200,
width: 200,
mediaCfg: {
mediaType: 'PDF',
url: href,
unsupportedText: ' Acrobat Viewer n\'est pas install

hendricd
27 Aug 2008, 4:59 AM
@Mathieu -- Try:


Ext.extend(MainPanel, Ext.TabPanel, {
defaults :{closable:true},
initEvents : function(){
MainPanel.superclass.initEvents.call(this);
this.body.on('click', this.onClick, this);
},
onClick: function(e, target){
......

maturin666
27 Aug 2008, 5:26 AM
It' work

Thanks hendricd :)

Thanks from France

kpandey
4 Sep 2008, 8:43 AM
I'm looking at the examples that comes with 2.x release to understand how fsommand works but not making much headway.

I see that fscommand handler is registered with flashpanel.
I don't see it getting called when I hit fscommand button in the flash movie with some value in the text field

Also I don't have much visibility in the action script side of things.

A brief note on what the example is suppose to accomplish and souce file for test.swf would be a great help.

By the way I'll soon purchase a 5 dev license for this plugin for the effort you have put in.

hendricd
4 Sep 2008, 10:17 AM
I'm looking at the examples that comes with 2.x release to understand how fsommand works but not making much headway.

I see that fscommand handler is registered with flashpanel.
I don't see it getting called when I hit fscommand button in the flash movie with some value in the text field

Also I don't have much visibility in the action script side of things.

A brief note on what the example is suppose to accomplish and souce file for test.swf would be a great help.

By the way I'll soon purchase a 5 dev license for this plugin for the effort you have put in.
@kpandey --
Here is a simplified example, but Flash outbound fscommands are converted to standard Ext events:



new Ext.ux.FlashPanel({
title : 'fsCommand Sample',
width :400,
height :150,
renderTo : Ext.getBody(),
listeners : {
fscommand : function(panel,command,args){

console.info ('onfscommand', arguments);

//Talk back to it via setVariable
panel.setVariable('someFlashVariable','test');

}
},
mediaCfg:{
url :'test.swf'
,width :300
,height :120
,id :'fscTest'
,controls :true
,scripting :'always'
,start :true
,params:{
wmode:'opaque',
bgcolor : '#333',
swliveconnect:true
}
}
}).show();

bhaveshbhatkar
5 Sep 2008, 9:37 AM
Hi,
All files demo are correupted, can you please upload new one.
Bhavesh

hendricd
5 Sep 2008, 9:44 AM
Hi,
All files demo are correupted, can you please upload new one.
Bhavesh

As the note above the forum download link says: the Forums vBulletin and IE don't handle zip downloads very. Use another browser or get it here (http://code.google.com/p/uxmedia/downloads/list).

bhaveshbhatkar
5 Sep 2008, 10:46 AM
Thanks much !!!
-Bhavesh

ZooKeeper
10 Sep 2008, 3:07 AM
Sorry for being so dumb, but I just dl'ed you pluggin and cann't get inline youtube to work.

Can you please post a really basic example of embedding youtube into markup in place of example code:


<p>You can now render any Media type (including derived classes)&nbsp;<span><script type="text/javascript">
document.write(String(new Ext.ux.Media({mediaCfg:{
mediaType : 'SWF'
,url : 'clock.swfz'
,id : 'inlineClock'
,style: {display:'inline', width:'100px',height:'80px'}
,start : true
,loop : true
,controls :false
,params: {
wmode :'opaque'
,scale :'exactfit'
,salign :'t'
}
}})));</script>&nbsp;</span><b>inline</b> in your page markup:

Thanks a lot!

hendricd
10 Sep 2008, 3:59 AM
Sorry for being so dumb, but I just dl'ed you pluggin and cann't get inline youtube to work.

Can you please post a really basic example of embedding youtube into markup in place of example code:

Pretty simple, just pasted the YouTube config from the demo right in there. ;)

<div id="myYouTubePlayer">
<script type="text/javascript">
document.write(
String(
new Ext.ux.Media(
{mediaCfg:{
mediaType:'SWF'
,url:'http://www.youtube.com/v/Jr8n0ww3pio&rel=1'
,autoSize:true //size to the parent, or set your own height/width below
,height : 355
,width : 425
,id:'youtube'
,controls:true
,start:true
,loop :false
,params:{
wmode:'opaque'
,allowscriptaccess : 'always'
,allowfullscreen : true
,flashVars:{
enablejsapi : 1
,playerapiid:'@id'
,fs:1
}
}
}
})
)
);
</script>
</div>

JeffBurr
11 Sep 2008, 5:28 AM
This is a great plug-in!

I am putting a WMV in mediapanel in the west region of a viewport with borderlayout. Although the media component sizes itself to the panel intially, it does not adjust as the parent is resized. I am using autoSize : true and stretchToFit : true.

Do I need to do something extra to make this work?

hendricd
11 Sep 2008, 10:27 AM
This is a great plug-in!

I am putting a WMV in mediapanel in the west region of a viewport with borderlayout. Although the media component sizes itself to the panel intially, it does not adjust as the parent is resized. I am using autoSize : true and stretchToFit : true.

Do I need to do something extra to make this work?
@Jeff -- I've noticed that the Gecko Plugin for WindowsMediaPlayer will not 'stretchToFit' the movie , but IE does. :>

JeffBurr
11 Sep 2008, 11:22 AM
@Jeff -- I've noticed that the Gecko Plugin for WindowsMediaPlayer will not 'stretchToFit' the movie , but IE does. :>

Thanks for the heads-up on Firefox. You're right, IE and Chrome behave correctly...

debarcar
15 Sep 2008, 11:28 PM
Hi,

Can I use the ux.Media in the form panel? Is it possible to use the setValue to set the value from server response?

Thanks!

hendricd
16 Sep 2008, 4:04 AM
Hi,

Can I use the ux.Media in the form panel? Is it possible to use the setValue to set the value from server response?


@debarcar -- It might be helpful if you explained what you are trying to render inside the form and what values the form 'load' will be loading into the media component when the form is updated.

debarcar
20 Sep 2008, 6:26 PM
I have a form, with a flash and its content load from the database . The flash content is about a tournament draws. I wonder if the uxmedia2 can use in the form just like a textfield.

Thanks!

Foggy
23 Sep 2008, 12:59 PM
Hey Hendric
Your Extension is great, but after few hours of try and error, this stuff wont work for me with desktop...
The flash contents are reloading by:
hide a win and show it again,
fullscreen a win,
fullscreen any other win

Here's my code:

var pa = window.system.getDesktop().createWindow({
id:this.win.id + '-movie',
minimizable: true,
minimizable: true,
width : 400,
height: 150,
mediaCfg:{
mediaType :'SWF',
url :this.program.getViewPath() + 'movie.swf',
unsupportedText : 'Flash player is not installed',
params: {
wmode :'opaque',
scale :'exactfit',
width : 400,
height: 150,
salign :'t'
}
}
}, Ext.ux.MediaWindow);
pa.show();

i just try the uxmedia2.zip...

hendricd
23 Sep 2008, 1:04 PM
Yep, a fullScreen Ext.Window causes a DOM reflow of the entire page when min/maxed. That's just about the only reflow scenario that ux.Media cannot control. /:) (well, maybe not :-?)

@foggy -- Also, you should be using the Ext.ux.FlashWindow for flash objects. Special cleanup for IE/Flash is built into that.
Also, try adding hideMode:'nosize' to that Window config (altho it should already be the default).

Foggy
23 Sep 2008, 1:11 PM
That's just about the only reflow scenario that ux.Media cannot control.
What a bummer :s

BTW: with FlashWindow it got the unsupportedText error string with MediaWindow not :-/

Edit:
well, maybe not
Ou, you got any idea? =P~

hendricd
23 Sep 2008, 1:17 PM
What a bummer :s

BTW: with FlashWindow it got the unsupportedText error string with MediaWindow not :-/

Try removing the mediaType:'SWF' declaration from the mediaCfg, and remove the unsupportedText the default Flash Components already have a nicer one with a link to Adobe to get it.



Edit:
Ou, you got any idea? It would mean overriding Window to disable its body mask to do it. :s

Foggy
23 Sep 2008, 1:21 PM
Try removing the mediaType:'SWF' declaration from the mediaCfg
Hm, does not take any effect...

It would mean overriding Window to disable its body mask to do it
Why the firefox team won't fix this bug :(

hendricd
23 Sep 2008, 1:25 PM
Hm, does not take any effect...

Make sure you are using uxmedia, uxflash.js from the same build.


Why the firefox team won't fix this bug :(

It happens on all browsers except IE (go figure) 8-|

Foggy
23 Sep 2008, 2:29 PM
It happens on all browsers except IE (go figure)
Damit you are right...


Make sure you are using uxmedia, uxflash.js from the same build.
I am sure i use the same build, both files are from uxmedia2.zip...

Anyway, on my way home, there pop up a idea to my mind...
My single problem is this reload stuff on a desktop environment. Maybe i can fix this with a ux.DesktopFlashWindow or something else. Thought i override it's hide, show and maximize functions. On hide i would just set it's z-index with something deeper as the desktop element.
Maybe for animations i could create a clone...
How i said, just woolly thoughts at this moment, maybe i'll give that a try this weekend.

hendricd
24 Sep 2008, 3:00 AM
@foggy -- One other thing, you must disable animation effects on those containers to prevent reflow as well. These are common additions:

animCollapse : Ext.isIE,
animFloat : Ext.isIE

Foggy
24 Sep 2008, 3:49 AM
One other thing, you must disable animation effects on those containers to prevent reflow as well.
Jup, i read the whole thread yesterday, so i know it, cause you said id already here ;)

But thanks anyway for your responses...

Foggy
24 Sep 2008, 7:31 AM
Can't wait :D
So this solution is working now for me and it is short and really easy.

1. I create a Window extension and overwrote it's show, hide and close methods.
Ext.ux.Desktop.FlashWindow.hide stores the current z-index and set a z-index of -10
Ext.ux.Desktop.FlashWindow.show set the stored z-index back
2. I overwrote the Ext.Window.maximize method (the maximized css can't be applied anymore)

still todo:
- create a clone for animateTarget config option...


But one problem still remain, if there is a other window behind my flash window, wich is active, the flash controls in this area with the other window in the background are not controllable. Hope my Screenshot explain it a bit better...
In the green area all works well, in the red area, the area of the body from window in background, i can't click anything...
Maybe someone can give me some hints here?


BTW: Probably i'll share this short script with the community after done this todo and fix my last bug...

Lobos
24 Sep 2008, 7:19 PM
Hi there, i have a flash panel and it displays perfectly with ff but will not show the flash with ie7:


var panel = new Ext.ux.MediaPanel2({
title : false,
border :false,
autoHeight : true,
autoWidth: true,
//height: 720,
//width: 1280,
mediaCfg : {
mediaType:'GIF',
url:Ext.BLANK_IMAGE_URL
}
});

if i have the height and width it works with ie, if autoheight / eidth it does not...
here is the cfg that is rendered to the panel above (in php but the structure is the same):


$flashVars = array(
'json' => $panel['flashVars']['json'],
'xml' => $panel['flashVars']['xml'],
'stageWidth' => 1280,
'stageHeight' => 720,
'scaleMode'=>'noBorder',
'delay' => 5000
);

$panelCfg = array(
"mediaType" => "SWF",
"url" => "apps/digitalMenus/flash/panelTemplates/master/Player.swf?".time(),
"ShowControls" => true,
"start" => true,
'play' => true,
"style" => 'overflow:auto',
"params" => array(
"scale"=>"noBorder",
"quality"=>"high",
"flashVars" => $flashVars
)
);

any ideas?

sdrew
24 Sep 2008, 7:29 PM
Just using the chartpack2 fusion.html demo, and pressing the refresh tool (gear icon) in the panel, I notice that internet explorer leaks 5MB on each refresh (.refreshMedia() call).

Drip seems to show that lots of resources do not get freed up.

I noticed other discussions about this but did not see a solution. Would be great to fix this, as this control is great. However IE quickly runs out of memory if you do much refreshing.

Did anyone find a solution?

Thanks.

ethraza
4 Oct 2008, 12:48 AM
Using the demo WordPress MP3 from mediademo.js, please, tell me how can I have access to the player controls, so I can setup the volume, change the soundFile and tell the player to play and stop when I whant and without the need to reload the mediaPanel Flash with new parameters?
Flash is yet very obscure to me! :">

hendricd
7 Oct 2008, 8:59 AM
Using the demo WordPress MP3 from mediademo.js, please, tell me how can I have access to the player controls, so I can setup the volume, change the soundFile and tell the player to play and stop when I whant and without the need to reload the mediaPanel Flash with new parameters?
Flash is yet very obscure to me! :">

@ethraza -- Have you visited these sites for more info:
http://wpaudioplayer.com/ and http://www.macloo.com/examples/audio_player/index.html

ethraza
7 Oct 2008, 5:54 PM
Hi hendricd!
Yes, I had visited, but if I follow their examples I will be using the script that came with the player.
If so, why I need mediaPanel?

hendricd
7 Oct 2008, 10:24 PM
Hi hendricd!
Yes, I had visited, but if I follow their examples I will be using the script that came with the player.


@ethraza -- Flash authors usually expose various public methods for their players via ExternalInterfaces. But, Flash authors do not always publish what those are. By examining the source of the standalone Wordpress player scripts, I was able to garner these basic methods:

open (play)
close
load (load another mp3, playlist)
setVolume

To invoke these methods yourself, ux.Media (and Flash subclasses) expose the interface so you can call those methods:



Ext.getCmp('yourPlayerComp').getInterface().open(); //play it


If so, why I need mediaPanel?
ux.Media/Flash components are designed so that Flash objects do not re-initialize when they are collapsed/hidden in an Ext layout. No other SWF rendering API considers that when used in todays modern RIA Apps (like Ext).

Your call.

ethraza
8 Oct 2008, 6:03 PM
Oh hendricd, thanks very much!
I tryed more than one time console.info(Ext.getCmp('yourPlayerComp').getInterface()) and only see function() without undestand what it meens. If you don't tell me, I think I wold never discovery the right sintaxe.

But now that you sayd that... about reinit when minimized (I did know that)... I think I'm doing something wrong so! I'm using OSFLV (http://www.osflv.com/) to play videos in a window (qWikiOffice Desktop) and noticed that when I minimize it and restore, the player is restarted. I think it is odd because someone may want to minimize it and continue to listen it.

Here is my mediaPanel as a item of a window:


items: [
{
xtype: 'flashpanel',
height: 366,
mediaMask: false,
border: false,
bodyBorder: false,
mediaCfg: {
mediaType:'SWF',
url: 'system/modules/ss/player2/player.swf',
autoSize: true,
controls: true,
start: true,
unsupportedText: {tag:'span', html:'<p>Flash Player 9.0 or higher is required. The latest version of Flash Player is available at the <a href="http://www.adobe.com/go/getflashplayer" target="_fdownload">Adobe Flash Player Download Center</a>.</p>'},
params: {
wmode: 'window',
allowscriptaccess: 'sameDomain',
allowfullscreen: true,
bgcolor: '#000000',
flashVars:{
movie: 'http://www.stancesystems.com/ssd/system/modules/ss/flv/resources-intro.flv',
fgcolor:'#000000',
autoload: false,
autoplay: true,
autorewind: true,
loop: true,
mute: false,
muteonly: true,
//clickurl: 'http://www.extjs.com.br',
clicktarget: '_blank'
}
}
}
}

I even don't have sure if all the options are in the right place or who is for mediaPanel and who is for flash object. I know it is working but is reiniting when the window is restored.
I don't know too if osflv have that interfaces... but osflv is the only free flv player that I found that can be used in a commercial app.

hendricd
8 Oct 2008, 8:07 PM
@ethraza -- All browsers (except IE) have the "Flash re-initialization" problem during DOM reflow. More here (http://extjs.com/forum/showthread.php?t=23983).

Your mediaCfg looks just fine, but you're including the 'flashpanel' as an item of a standard Ext.Window. Using an Ext.Window as the container will cause that 'restart' to occur when minimized/restored. Use the Ext.ux.FlashWindow instead. It already has all the fixes built in to solve that problem.

I looked briefly at the documentation of OSFLV (you get what you don't pay for I guess), and it does not expose any ExternalInterface functions for you to call anyway.

I'd Keep shopping.

DTT_11-1983
12 Oct 2008, 8:34 PM
Does anybody get FireFox crash when using ux.MediaPanel ?
On MediaDemo, click on Acrobat(win), then click on it again or click to another that using the same window.
I don't know what it is. Hope hendricd can fix this soon.

hendricd
13 Oct 2008, 2:37 AM
Does anybody get FireFox crash when using ux.MediaPanel ?
On MediaDemo, click on Acrobat(win), then click on it again or click to another that using the same window.
I don't know what it is. Hope hendricd can fix this soon.

@DTT -- The Acrobat(Win) sample just demonstrates the problem Acrobat has on Firefox. I know of no fix to solve it other than the alternative mediaCfg I created that works on all browsers (PDFFRAME), which embeds the PDF in an IFRAME instead of using the <OBJECT/EMBED> tag.

DTT_11-1983
13 Oct 2008, 6:17 PM
Acrobat (Win-iframe) will run Adobe Reader on my Computer instead of using browser. Does it work correctly ? How about if we remove the MediaPanel content the <OBJECT/EMBED> tag and create it when open a PDF again ?

hendricd
14 Oct 2008, 3:03 AM
Acrobat (Win-iframe) will run Adobe Reader on my Computer instead of using browser. Does it work correctly ? How about if we remove the MediaPanel content the <OBJECT/EMBED> tag and create it when open a PDF again ?
@DTT -- You need to configure Acrobat to display content inline in your browser by default and make sure your server is not returning a 'Content-Disposition' header of 'attachment'.

DTT_11-1983
20 Oct 2008, 12:25 AM
This is the code that I use:

var myCfg = {
mediaType:'PDF'
,url:url
,unsupportedText: 'Get Acrobat Reader: <a href="http://www.adobe.com/products/acrobat/readstep2.html" target="_fdownload">Here</a>'
};
if (!this.pdfPanel) {
this.pdfPanel = new Ext.ux.MediaPanel({
id: this.getId()+'-pdfPanel'
,border:false
,mediaCfg: myCfg
});
this.add(this.pdfPanel);
} else {
this.pdfPanel.renderMedia(myCfg);
}
unsupportedText is not displayed.
Do I miss something ?
Thanks

hendricd
20 Oct 2008, 1:35 AM
...unsupportedText is not displayed.
Do I miss something ?
Thanks

@DTT -- No, but I did. ;)

This has been fixed in the latest 2.1 build. I'll be releasing 2.1 shortly, but you can download it from SVN (http://code.google.com/p/uxmedia/source/browse/trunk/source/uxmedia.js).

jasondeegan
24 Oct 2008, 6:38 AM
Hendricd,
Great work on this panel.

Question: I read through a vast majority of this thread but didn't see an answer to this:

I see how you can handle FSCommands when initiated from the .SWF; but I didn't see an example of how to SEND an FSCommand to an .SWF. I created a simple MP3 player where you can send the file to play, send a stop command, etc. all through Javascript.

Here's an example of how to play a file via "old" JS, how can I do it with your rockin' new flashpanel?



// Current FlashPanel how to receive an FSCommand from SWF:
...
listeners : {
fscommand : function( panel, command, args ){
console.info ('onfscommand', arguments);
//Talk back to it via setVariable
panel.setVariable('someFlashVariable','test');
}
},
...

// My Current Implentation using OLD JS technique:
<script language='JavaScript'>
function getMyApp(appName) {
if (navigator.appName.indexOf ("Microsoft") !=-1) {
return window[appName];
} else {
return document[appName];
}
}

// EXAMPLE SENDING SWF A COMMAND (this function resides in the .SWF and has been exposed to JS)
function playVM( vm ){
getMyApp( 'myMP3Player' ).startFileJS( vm );
}

//EXAMPLE RECEIVING A COMMAND FROM SWF (this function is called within the .SWF whenever it completes a file and has been exposed to JS) (This is what I believe you've shown in the code above)
function vmComplete(){
alert('VM done');
}

</script>

<a href="#" onClick="playVM( 'anyMP3File' )">Local File</a><br>

hendricd
24 Oct 2008, 7:20 AM
I see how you can handle FSCommands when initiated from the .SWF; but I didn't see an example of how to SEND an FSCommand to an .SWF. I created a simple MP3 player where you can send the file to play, send a stop command, etc. all through Javascript.


@jason -- You would (depending on your Flash plugin version), use your players 'direct' interface . To do that use the following syntax:



var flash = uxflashComp.getInterface(); //reference to the actual SWF object
flash.startFileJS( vm );


The next release, (2.1 coming shortly), adds support for the full ExternalInterface bindings, but, the direct (modern) approach is already supported.

So you'll have:

fscommand event
direct calls (preferred)
setVariable
getVariable
ExternalInterface Bindings (with a low level 'invoke' method also)
getURL will likely not be supported as it's very flaky.

jasondeegan
24 Oct 2008, 7:41 AM
Your timely, detailed response is really unbelievable!

I'm running the 2.1 from SVN, downloaded a few days ago (nice pic about boating accidents, by the way!). Being fairly new to OO programming and ExtJS generally, I have a dumb follow-up question:

I offered an ID in my mediaCfg panel:


...
mediaCfg:{
url:myURL,
id:'fscTest',
...


In my items collection for the flashpanel (this I assume is giving my panel an ID):


...
items:[{
xtype:'flashpanel',
id:'mp3Player',
...


And I tried:


this.getInterface


Each within the onRender and onShow functions of the window that has the flashpanel as an item, but never was I able to get the interface. "this.getInterface is not a function" was the closest I got.

How do I correctly get this piece: uxflashComp. that you reference?

Thanks again!

J

hendricd
24 Oct 2008, 7:53 AM
@Jason -- Most Flash object are not ready for use as soon as they are rendered. Use the listeners to your advantage.



...
items:[{
xtype:'flashpanel',
id:'mp3Player', //id of the ux.Component
mediaCfg:{
url:myURL,
id:'fscTest' //id of the SWF Object
},
listeners: {
mediaload : function(comp, SWF){
comp.getInterface().Play(something);
//or, SWF.Play(something);
},
delay: 100 // ?? depending on your player's startup demands
},
...

jasondeegan
24 Oct 2008, 10:02 AM
Although I haven't quite figured it out yet (can't seem to get mediaload to fire), I'm gonna' keep working on it throughout the weekend and post what I found for the next gal/guy that comes along.

Thanks again for everything and the code is really impressive. =D>

sdrew
25 Oct 2008, 9:23 AM
Just using the chartpack2 fusion.html demo, and pressing the refresh tool (gear icon) in the panel, I notice that internet explorer leaks 5MB on each refresh (.refreshMedia() call).

Drip seems to show that lots of resources do not get freed up.

I noticed other discussions about this but did not see a solution. Would be great to fix this, as this control is great. However IE quickly runs out of memory if you do much refreshing.

Did anyone find a solution?

Thanks.

Is no one else noticing this memory leak? IE soon crashes after using a GIG of memory. Would be great to fix this, even if someone can steer me in the right direction.

Thanks.

DTT_11-1983
27 Oct 2008, 6:06 PM
@DTT -- You need to configure Acrobat to display content inline in your browser by default and make sure your server is not returning a 'Content-Disposition' header of 'attachment'.
Do you mean I have to configure my Acrobat Reader or set the file header Content-Disposition: inline ? Hope it will work.

anjelika
30 Oct 2008, 7:45 AM
Hello,
Thanks for the great extension, hendricd!
I am dealing with the following problem:
I am loading a flash mp3 player (http://www.premiumbeat.com/flash_resources/free_flash_music_player/single_track_flash_mp3_player.php) into your component.
I have a grid containing some mp3 lists; when someone double clicks a row, I call a function which displays the player (your component).
When another row is clicked, I want to send the command to the player to load the new mp3 and stop playing the other one, but I'm having problems sending the commands to it.
Here's the example:


function showMP3FlashPlayer(filepath) {

var player_window = Ext.getCmp('mp3_player_window');
if (!player_window) {
// console.log (filepath);
var win = new Ext.Panel({
autoWidth : true,
border: false,
closable : true,
resizable : false,
renderTo: 'mp3_player',
id : 'mp3_player_window',
items : {
id : 'mp3player',
xtype : 'flashpanel',
hideMode : 'visibility',
border : false,
mediaCfg : {
url : 'playerSingle.swf',
controls : true,
start : true,
width : 200,
height : 100,
soundPath : 'sit.mp3',
params : {
wmode : 'transparent',
allowscriptaccess : 'always',
flashVars : {
autoPlay : 'yes',
soundPath : 'stream_mp3.php?filename='+filepath
}

}
}
}
});
}
else
{
??? here I want to set another "soundPath" to the flash player so it starts playing a new mp3.
}
}

How can I send commands to your components (actually to the flash that is contained into it)?
Thanks for your time! ;)

hendricd
30 Oct 2008, 9:10 AM
...How can I send commands to your components (actually to the flash that is contained into it)?


@anjelika -- From the looks of the site URL you posted, when they say 'single-track', they mean 'single-track'. 8-|

More 'feature-rich' players support some sort of ExternalInterface which allows the developer to stop, play etc via the API it exposes. Does that player expose such an API? Looks like it's free, so I doubt it.

If it does, use something like:



var playerComp = Ext.getCmp('mp3player');
if (playerComp){
var player = playerComp.getInterface();
player.stopTheNoise();
player.loadSomeNewNoise(url);
}
If it doesn't, just refresh the Component:



var playerComp = Ext.getCmp('mp3player');
if (playerComp){
playerComp.mediaCfg.params.flashVars.soundPath = 'newNoiseUrl.mp3';
playerComp.refreshMedia();
}

anjelika
30 Oct 2008, 11:36 PM
Thanks Doug, worked like a charm (the second version) ;)

anjelika
31 Oct 2008, 7:45 AM
Doug, I am dealing with another (minor) problem now.
I'm creatying your component into a tabpanel.
Everything works fine, but when I close the tab and reopen it later, the flash player does not show up anymore and my function is executing the 'else' clause as shown above.
Could be that the component is not destroyed when I close the panel?


var player_window = Ext.getCmp('mp3player');
if (!player_window) {
// console.log (filepath);
var win = new Ext.Panel({
// autoWidth : true,
style : 'align: center',
border : false,
// closable : true,
// resizable : false,
renderTo : 'mp3_player',
id : 'mp3_player_window',
items : {
id : 'mp3player',
xtype : 'flashpanel',
hideMode : 'visibility',
border : false,
mediaCfg : {
url : 'playerSingle.swf',
controls : true,
start : true,
width : 200,
height : 100,
params : {
wmode : 'transparent',
allowscriptaccess : 'always',
flashVars : {
autoPlay : 'yes',
soundPath : 'stream_mp3.php?filename=' + filepath
}

}
}
}
});
} else { //this is executed after I close the tab and re-open it, meaning that Ext is //still finding the 'mp3player' component?

var playerComp = Ext.getCmp('mp3player');
if (playerComp) {
playerComp.mediaCfg.params.flashVars.soundPath = 'stream_mp3.php?filename='
+ filepath;
playerComp.refreshMedia();
}
}

Another minor problem is that when I create a new tabpanel, which takes the focus by default, the player stops and when I switch back to the player panel it starts from beginning (like a refresh).
Thanks

hendricd
31 Oct 2008, 8:49 AM
Doug, I am dealing with another (minor) problem now.
I'm creatying your component into a tabpanel.
Everything works fine, but when I close the tab and reopen it later, the flash player does not show up anymore and my function is executing the 'else' clause as shown above.
Could be that the component is not destroyed when I close the panel?
...Another minor problem is that when I create a new tabpanel, which takes the focus by default, the player stops and when I switch back to the player panel it starts from beginning (like a refresh).
Thanks

A couple things funky here. Why are you nesting 'flashpanel' in another panel ? The ux.FlashPanel (xtype: 'flashpanel') IS a Panel !

Simplify and use the new hideMode for Flash media:



var player_panel = Ext.getCmp('mp3player') ||
new Ext.ux.FlashPanel({
style : 'align: center',
border : false,

//this element is destroyed when tab closes.
renderTo : 'mp3_player', //Don't use this in a tabPanel with closable tabs.

id : 'mp3player',
hideMode : 'visibility', //the Component handles this for you (nosize).
mediaCfg : {
url : 'playerSingle.swf',
controls : true,
start : true,
width : 200,
height : 100,
params : {
wmode : 'transparent',
allowscriptaccess : 'always',
flashVars : {
autoPlay : 'yes',
soundPath : 'stream_mp3.php?filename=' + filepath
}

}
}
);

But, add hideMode: 'nosize' to all your other tabPanels to prevent Flash from restarting during tab changes.

anjelika
4 Nov 2008, 3:22 AM
Doug,
Thanks for the reply.
Your approach is better than mine, indeed, but I'm still dealing with the problem that when the panel is closed and re-opened the player does not seem to show up and play the mp3.
Here's the slighty modified code:


var player_panel = Ext.getCmp('mp3player') ||
new Ext.ux.FlashPanel({
style : 'align: center',
border : false,

//this element is destroyed when tab closes.
renderTo : 'mp3_player', //Don't use this in a tabPanel with closable tabs.

id : 'mp3player',
mediaCfg : {
url : 'playerSingle.swf',
controls : true,
start : true,
width : 200,
height : 100,
params : {
wmode : 'transparent',
allowscriptaccess : 'always',
flashVars : {
autoPlay : 'yes'
// soundPath : 'stream_mp3.php?filename=' + filepath
}

}
}
});
player_panel.mediaCfg.params.flashVars.soundPath = 'stream_mp3.php?filename=' + filepath;
player_panel.refreshMedia();


This function is called every time a user double clicks on a grid's row, so I have to pass the mp3 filename (as filepath) to the player.
This works fine, but again, when I close the panel and later re-open it (without reloading the app. - page), the panel does not shows up when I double click a row.
Thanks again!

P.S. I need to use it in a tabpanel with closable tabs...is that possible or I have to make the tabpanel not closable?

hendricd
4 Nov 2008, 4:04 AM
@anjelika -- You are going thru Basic Ext Component Layouts 101.

Decide on a layout, (tabPanel, Window ??) and stick with it. Post your panel (whatever) handling code, so one can tell what you're doing.

deltron0
4 Nov 2008, 8:37 AM
deleted

ignatius
6 Nov 2008, 8:57 PM
the new ux.Chart.OFC Hi Doug,
openchart.html demo keeps crashing FF3? (works fine in IE - go figure /:))

BTW, I managed to get OFC2 working in a MediaPanel (inside a dataview):


{
.
.
.
graph:function(id) {
return new Ext.ux.Media({
mediaCfg:{
mediaType:'SWF'
,url:'/ofc/open-flash-chart.swf'
,id :'tank' + id
,style:{display:'inline', width:'150px', height:'100px'}
,params:{
wmode:'opaque'
,allowscriptaccess : 'always'
flashVars:{
'data-file':ts.uri + 'fuel.tanks.action(graph)&id=' + id
,width:150
,height:100
}
}
}
});
}
.
.
.


.... however, it works fine in FF3, but in IE7 it throws an "object doesn't support this property or method" error for each mediapanel/OFC chart displayed.

Any ideas?

ignatius
15 Nov 2008, 6:08 PM
Bump.

It's been a couple of days.... any chance of a response? Doug? Anyone?

TIA.

hendricd
16 Nov 2008, 6:31 AM
Hi Doug,
openchart.html demo keeps crashing FF3? (works fine in IE - go figure /:))

BTW, I managed to get OFC2 working in a MediaPanel (inside a dataview):


@ignatius -- Are you working with the ux.Media ChartPack located here (http://extjs.com/forum/showthread.php?t=32434)? It has all the examples for OFC2 you need in it.

JacobWang
18 Nov 2008, 7:55 AM
It's nice.Tks very much.
:)

BlueCamel
18 Nov 2008, 10:29 PM
I'm looking at uxMedia to add amcharts into Ext. I think this is the right way to go since
they are just flash and the uxChart class only supports OFC2 and Fusion.

From the example code I found this and below is what my working prototype page looks like outside of EXTJS.

<span><script type="text/javascript">
document.write(
String(
new Ext.ux.Media(
{mediaCfg:{
mediaType : 'SWF'
,url : 'clock.swf'
,id : 'inlineClock'
,style : {display:'inline', width:'100px',height:'80px'}
,start : true
,loop : true
,controls :false
,params: {
wmode :'opaque'
,scale :'exactfit'
,salign :'t'
}
}
})
));
</script></span>

My working example chart:



<script type="text/javascript">
// <![CDATA[
var so = new SWFObject("/ui/amchart/amline.swf", "amline", "700", "500", "8", "#FFFFFF");
so.addVariable("path", "/ui/amchart/");
so.addVariable("settings_file", encodeURIComponent("/graphdata/line/utilization/249/255"));
so.write("flashcontent");
// ]]>
</script>

I think to convert this to uxMedia flashpanel, I can pass the amline.swf
as the URL and then use the params object to hold the path and settings_file variable
above.

Am I on the right track?

I'll get more time to play tomorrow but until then I figured I would do some
more research, read examples, and ask! :)

Thanks for the help.

hendricd
19 Nov 2008, 6:08 AM
@BlueCamel --amChart and amStock classes are being introduced in ux.MediaChartPack 2.1 already.

Spin your wheels or wait a few days. ;)

BlueCamel
19 Nov 2008, 7:03 AM
@BlueCamel --amChart and amStock classes are being introduced in ux.MediaChartPack 2.1 already.

Spin your wheels or wait a few days. ;)

I almost wooted with excitement! I'm using a settings file with data in the settings file to render an amline chart. If you need a sample file let me know.

Thank you much for working on this.

PS: I see I should have been using setVariable() it seems after reading the uxFlash code. My param idea above was clearly wrong.

JacobWang
24 Nov 2008, 6:45 PM
I have some quesitons.


{
border :false,
id : 'bottomVedioPanel',
xtype : 'flashpanel',
height:200 , //Give your panel height and width
mediaCfg : {
mediaType:'SWF',
url:test.swf,
style: {width:'100%',height:'100%',display:'inline'},
id: 'video',
start : true,
controls :true,
status:true,
params: {
allowScriptAccess: 'always',
wmode :'transparent',
scale :'exactfit',
salign :'t'
}
}
}



url:test.swf (http://www.extjs.com/forum/test.swf) is ok , but url:test.flv (http://www.extjs.com/forum/test.flv) can't .I want to know 'flashpanel' if support .flv files.
Thanks in advance.

hendricd
24 Nov 2008, 7:59 PM
url:test.swf (http://www.extjs.com/forum/test.swf) is ok , but url:test.flv (http://www.extjs.com/forum/test.flv) can't .I want to know 'flashpanel' if support .flv files.
Thanks in advance.

@Jacob -- flv is a Flash video stream format. You need a Flash (or other browser plugin) player capable of decoding the flv format and rendering it. You will need to decide what (.swf) Flash player you will use for that purpose.

There are a number of them available on the web. Try a Google search on 'FLV player' and pick one.

JacobWang
24 Nov 2008, 9:22 PM
Doug ,Thanks.
If I have had a flv player ,how add it to extjs code.Can you give me an example?

hendricd
24 Nov 2008, 9:27 PM
{
border :false,
id : 'bottomVedioPanel',
xtype : 'flashpanel',
height:200 , //Give your panel height and width
mediaCfg : {
mediaType:'SWF',
url:test.swf, <- Put your player.swf? here
style: {width:'100%',height:'100%',display:'inline'},
id: 'video',
start : true,
controls :true,
status:true,
params: {
allowScriptAccess: 'always',
wmode :'transparent',
scale :'exactfit',
salign :'t'
}
}
}


WHere you place the movie.flv reference depends on where the player expects it....

JacobWang
24 Nov 2008, 10:28 PM
Thanks so much ,I have solved it .


{
border :false,
id : 'bottomVedioPanel',
xtype : 'flashpanel',
height:200 , //Give your panel height and width
mediaCfg : {
mediaType:'SWF',
url:'player.swf (http://www.extjs.com/forum/'player.swf)? file=test.flv'
style: {width:'100%',height:'100%',display:'inline'},
id: 'video',
start : true,
controls :true,
status:true,
params: {
allowScriptAccess: 'always',
wmode :'transparent',
scale :'exactfit',
salign :'t'
}
}
}

JacobWang
25 Nov 2008, 12:15 AM
It can't fullscreen .
code like this :
url='flvplayer.swf?allowFullScreen=true&file=test.flv'

I appreciate any suggestions.
Thanks in advance.

crpatrick
17 Dec 2008, 8:13 AM
Hi there-

I have read through this post, and have seen similar memory leak issues on IE that others have seen, but the solutions have not been working as of yet for me. I am seeing the issue where I have the FlashPanel in the southern region of my border layout. As the user clicks a grid row, I reload the southern panel with the jsp containing the FlashPanel (and simply change the url of the FlashPanel). Every time this is done, memory increases by approximately 4-5mb on IE.

The first question is, if I simply do a renderMedia() after changing the mediaCfg url on the flash panel, rather than reload the jsp and recreate the FlashPanel, should this solve it?

Also, are there any other suggestions to remove this memory leak for IE? I tried to update clearMedia as indicated earlier in the post, but still see the leak. Should I be specifically calling clearMedia or remove or something before streaming the new jsp into the southern region and creating the new FlashPanel, or is this done automatically?

I do see that if I do renderMedia as below, I see a quick loading in the panel, but the flash never re-renders with the new url (I just see an empty panel after a re-render).

pChart.mediaCfg.url = 'charts.swf?license=xxxlibrary_path=charts_library&xml_source=ChartServiceHandler%3F<%= chartParams %>';
pChart.renderMedia();


Thanks as always, for any help.

hendricd
17 Dec 2008, 9:01 AM
.. The first question is, if I simply do a renderMedia() after changing the mediaCfg url on the flash panel, rather than reload the jsp and recreate the FlashPanel, should this solve it?
@crpatrick -- That would be the recommended approach. Have your JSP (re)generate just the mediaCfg and call renderMedia(newMediaCfg) when it arrives (clearMedia is called automatically when that happens).

Other than that, I'd need to see how you are destorying the south Panel.

crpatrick
17 Dec 2008, 9:34 AM
I will definitely try to simply perform the renderMedia then on that, to see if the memory issue is resolved. Have there been issues where the renderMedia just displays nothing? When I generate the Flash Panel as below, all is fine, but as I trigger a renderMedia after a user click, it then appears blank.

Currently, in my southern panel I have the below (which forwards to the jsp which sets up the flashpanel:



{
region:'center',
id:'homeSouthCenter',
split:'true',
autoScroll: true,
autoLoad:'showReturnHistory.do'
}


Then, in the jsp, I have the below:



if (!performanceChart) {

performanceChart = new Ext.ux.FlashPanel({
id: 'perfChartPanel',
renderTo: 'performanceDiv',
height: 170,
width: 1000,
border: false,
mediaCfg: {
mediaType: 'SWF',
url: 'charts.swf?license=xxx&library_path=charts_library&xml_source=ChartServiceHandler%3F<%= chartParams %>',
unsupportedText: 'The web browser must have the Flash player installed to view all charts.',
controls: true,
start: true,
params: {
wmode: 'transparent',
scale: 'noscale',
salign: 'TL',
align: 'top',
pluginspage: 'http://www.macromedia.com/go/getflashplayer',
quality: 'high'
}
}
});
}
else {
performanceChart.renderMedia(
{
mediaCfg: {
url :'charts.swf?license=xxx&library_path=charts_library&xml_source=lChartServiceHandler%3F<%= chartParams %>',
}
});
}


When the user clicks a row in the grid, I do the below:



var graph = Ext.getCmp('homeSouthCenter');

graph.load({
url:'performanceOverTime.jsp',
params:{
instrumentId:inst,
tradeIdeaId:id
}

});


The flash displays the first time, but on the rowclick, the new load of the jsp (and subsequent renderMedia) then displays nothing. Now, from your reply, I know I shouldn't reload the entire jsp, but simply move the renderMedia into the rowclick handler, but I am still confused why this renders a blank flash movie. If I removed the condition, and simply created the new FlashPanel on every click, it works, but memory skyrockets.

Thanks again
Chris

hendricd
17 Dec 2008, 9:58 AM
I will definitely try to simply perform the renderMedia then on that, to see if the memory issue is resolved. Have there been issues where the renderMedia just displays nothing? When I generate the Flash Panel as below, all is fine, but as I trigger a renderMedia after a user click, it then appears blank.

Currently, in my southern panel I have the below (which forwards to the jsp which sets up the flashpanel:



{
region:'center',
id:'homeSouthCenter',
split:'true',
autoScroll: true,
autoLoad:'showReturnHistory.do'
}
Then, in the jsp, I have the below:



if (!performanceChart) {

performanceChart = new Ext.ux.FlashPanel({
id: 'perfChartPanel',
renderTo: 'performanceDiv',
height: 170,
width: 1000,
border: false,
mediaCfg: {
mediaType: 'SWF',
url: 'charts.swf?license=xxx&library_path=charts_library&xml_source=ChartServiceHandler%3F<%= chartParams %>',
unsupportedText: 'The web browser must have the Flash player installed to view all charts.',
controls: true,
start: true,
params: {
wmode: 'transparent',
scale: 'noscale',
salign: 'TL',
align: 'top',
pluginspage: 'http://www.macromedia.com/go/getflashplayer',
quality: 'high'
}
}
});
}
else {
performanceChart.renderMedia(
{
mediaCfg: {
url :'charts.swf?license=xxx&library_path=charts_library&xml_source=lChartServiceHandler%3F<%= chartParams %>',
}
});
}
When the user clicks a row in the grid, I do the below:



var graph = Ext.getCmp('homeSouthCenter');

graph.load({
url:'performanceOverTime.jsp',
params:{
instrumentId:inst,
tradeIdeaId:id
}

});
The flash displays the first time, but on the rowclick, the new load of the jsp (and subsequent renderMedia) then displays nothing. Now, from your reply, I know I shouldn't reload the entire jsp, but simply move the renderMedia into the rowclick handler, but I am still confused why this renders a blank flash movie. If I removed the condition, and simply created the new FlashPanel on every click, it works, but memory skyrockets.

Thanks again
Chris
@Chris -- I believe the mem troubles you're having is because you are using Ext load/autoLoad to add script/markup into the center region (instead of adding the FlashPanel to the layout is an item). Your simply wiping out the Flash object in favor of a new one, without any DOM cleanup.

That's not the proper way to add any Ext component (especially Flash objects) to a layout.

If you're going to be reloading the chart frequently, leave it in the layout:


{
xtype : 'flashpanel',
region : 'center',
id : 'homeSouthCenter',
split : 'true',
mediaCfg : null, //start out empty
loadChart : function(params){
this.renderMedia(
{
mediaType: 'SWF',
url: 'charts.swf?license=xxx&library_path=charts_library&xml_source=ChartServiceHandler&chartParams='+params,
unsupportedText: 'The web browser must have the Flash player installed to view all charts.',
controls: true,
start : true,
params : {
wmode: 'transparent',
scale: 'noscale',
salign: 'TL',
align: 'top',
pluginspage: 'http://www.macromedia.com/go/getflashplayer',
quality: 'high'
}
} );
}

}Then, you need to decide who/what is feeding the chart. (What chart object is this anyway ?)
The chart could load the data series by itself (if it has it's own data loading method), or just call the loadChart instance method similar to above and have your JSP return the XML the SWF object wants when it asks for it.

crpatrick
17 Dec 2008, 10:45 AM
Let me try to add this as an item. I am currently using XML-SWF to generate flash graphs.

I'll post when I have some findings. :)

crpatrick
17 Dec 2008, 12:42 PM
Hi there-

I have now integrated the FlashPanel directly into the layout, as stated above. When the user clicks a grid row (to refresh the chart), I do the following:



var southCentral = Ext.getCmp('homeSouthCenter');

var south = Ext.getCmp('homeSouth');
south.expand(true);

var params = new Object();
params.inst = inst;
params.id = id;
southCentral.loadChart(params);


But, even with this, I am seeing a 4-5M increase in IE on every click/load of the chart. Do I need to explicitly call clearMedia, or do something else that will clean this in IE?

Thanks again for all of the help on this.

hendricd
17 Dec 2008, 12:51 PM
@Chris -- What ux.Media build are you using? You could call clearMedia directly yourself, and using SIeve, see what DOM Nodes are orphaned/have references held.

It could also be that the Chart.swf object you are using does not clean itself up (often the case with FLash objects designed to live only in multi-page (short-lived) envionments.)

Got a public URL to demonstrate ? I might be able to take a short peek at it.

crpatrick
17 Dec 2008, 1:04 PM
Hi there-

Unfortunately, I don't have a public URL...we have an enterprise license for a private app. :(

I am, I believe, on the latest build:

.31 for uxmedia.js, and, not sure from the header, but it has release info ofr 1.0 and Rc1 for the uxflash.js


From sIEve, it appears that anything related to the flash (objects/params) are orphaned, which, I think, is creating the memory leak.

I'll try to call clearMedia as well, and see if that helps, but not sure what else I can do unfortunately. :(

hendricd
17 Dec 2008, 1:08 PM
@Chris -- You'll need ux.Media 2.0 (or higher) to address that problem on IE.

2.1 (from SVN (http://code.google.com/p/uxmedia/source/browse/#svn/tags/2.0/source)) would be highly recommended.

crpatrick
17 Dec 2008, 1:31 PM
I just upgraded the uxmedia.js and uxflash.js to the updated versions from Google code, but alas, the same issue. :(

I also forgot to post this...this is the flash charting library we are currently using:

http://www.maani.us/xml_charts/

hendricd
17 Dec 2008, 1:50 PM
I just upgraded the uxmedia.js and uxflash.js to the updated versions from Google code, but alas, the same issue. :(

@chris -- Now, include these overrides in your script somwhere:



//Highly recommended for use with complex/Flash Ext.Components
Ext.override( Ext.Element , {

/**
* Removes this element from the DOM and deletes it from the cache
* @param {Boolean} cleanse (optional) Perform a cleanse of immediate childNodes as well.
* @param {Boolean} deep (optional) Perform a deep cleanse of all nested childNodes as well.
*/

remove : function(cleanse, deep){
if(this.dom){
this.removeAllListeners(); //remove any Ext-defined DOM listeners
if(cleanse){ this.cleanse(true, deep); }
Ext.removeNode(this.dom);
this.dom = null; //clear ANY DOM references
delete this.dom;
}
},

/**
* Deep cleansing childNode Removal
* @param {Boolean} forceReclean (optional) By default the element
* keeps track if it has been cleansed already so
* you can call this over and over. However, if you update the element and
* need to force a reclean, you can pass true.
* @param {Boolean} deep (optional) Perform a deep cleanse of all childNodes as well.
*/
cleanse : function(forceReclean, deep){
if(this.isCleansed && forceReclean !== true){
return this;
}

var d = this.dom, n = d.firstChild, nx;
while(d && n){
nx = n.nextSibling;
if(deep){
Ext.fly(n).cleanse(forceReclean, deep);
}
Ext.removeNode(n);
n = nx;
}
this.isCleansed = true;
return this;
}
});

Ext.removeNode = Ext.isIE ? function(n){
var d = document.createElement('div'); //the original closure held a reference till reload as well.
if(n && n.tagName != 'BODY'){
var d = document.createElement('div');
d.appendChild(n);
//d.innerHTML = ''; //either works equally well
d.removeChild(n);
delete Ext.Element.cache[n.id]; //clear out any Ext reference from the Elcache
d = null; //just dump the scratch DIV reference here.
}

} :
function(n){
if(n && n.parentNode && n.tagName != 'BODY'){
n.parentNode.removeChild(n);
delete Ext.Element.cache[n.id];
}
};


..and try again. ;)

ux.Media will take advantage of these "cleansing" methods if they are present.

crpatrick
17 Dec 2008, 2:40 PM
I added those prior to my onReady to extend the given functions...but do I need to explicitly call anything? I am still seeing the same memory consumption on the chartLoad.

mystix
17 Dec 2008, 5:53 PM
hey @hendricd, did you get a chance to try out my latest test case for the ux.Media removeNode / remove overrides?
http://extjs.com/forum/showthread.php?p=263303#post263303

GilbsFr24
19 Dec 2008, 8:02 AM
Hello

It is a good job BUT

confict with miFrame because in line 1094 of uxmedia.js
> CSS.getRule('.x-hide-nosize') || (rules.push('.x-hide-nosize,.x-hide-nosize *{height:0px!important;width:0px!important;border:none!important;}'));

allready exists in line 1605 of miframe.js
>CSS.getRule('.x-hide-nosize') || (rules.push('.x-hide-nosize,.x-hide-nosize object,.x-hide-nosize iframe{height:0px!important;width:0px!important;border:none;}'));

Can you please use other hideMode name ....
CSS.getRule('.ux-hide-nosize') for example because .x is for Ext

x-hide-nosize is use for firefox bug but !important is usefull for IE
Very strange
I hate read somthing like hideMode : !Ext.isIE?'nosize':'display', in line 909
or animCollapse : Ext.enableFx && Ext.isIE,
Can't the component be the same

Sometimes in afterRender function I use something like this.store.load();
but when data loaded no graphic refresh
I have a this.loadData(data) with data in json good format

finally
uxmedia doesn't work in tabPanel when I put a chart on the second tab and an other on the third tab
IE 6 or 7 does only 1 chart
the other does not have a good size height:0 and width:0


Thanks for reading me
Rds
Gilbert
(I have a bad English because I'm french )

hendricd
19 Dec 2008, 8:39 AM
Hello

It is a good job BUT

confict with miFrame because in line 1094 of uxmedia.js
> CSS.getRule('.x-hide-nosize') || (rules.push('.x-hide-nosize,.x-hide-nosize *{height:0px!important;width:0px!important;border:none!important;}'));

allready exists in line 1605 of miframe.js
>CSS.getRule('.x-hide-nosize') || (rules.push('.x-hide-nosize,.x-hide-nosize object,.x-hide-nosize iframe{height:0px!important;width:0px!important;border:none;}'));


The CSS rules are designed to be modified if necessary to accomodate your specific layout requirements. When using both uxClasses, you can decide which rule best meets your needs by declaring it in the <head>:



....
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript" src="ux/miframe.js"></script>
<script type="text/javascript" src="ux/uxmedia.js"></script>
<script type="text/javascript" src="ux/uxflash.js"></script>
<style type="text/css">
.x-hide-nosize, .x-hide-nosize * {
height:0px!important;
width:0px!important;
border:none!important;
}
</style>
.....


Can you please use other hideMode name ....
CSS.getRule('.ux-hide-nosize') for example because .x is for Ext
Possible, but a bit late now. Would likely break several hundred installations out there.


x-hide-nosize is use for firefox bug but !important is usefull for IE
Very strange
This feature is designed for the DOM reflow problem on all browsers except IE.



I hate read somthing like hideMode : !Ext.isIE?'nosize':'display', in line 909
or animCollapse : Ext.enableFx && Ext.isIE,
Can't the component be the same
Yes, they could/should probably be the same some day. Those are class defaults again designed to be changed when the class is instanciated if necessary. IFRAME and OBJECT Elements may require different values depending on your layout. The default values of the classes/demo-files are there to accomodate most typical configurations. (animFloat is another one you have to watch for in border layouts).



Sometimes in afterRender function I use something like this.store.load();
but when data loaded no graphic refresh
I have a this.loadData(data) with data in json good format
How does this apply to MIF or uxmedia ?


finally
uxmedia doesn't work in tabPanel when I put a chart on the second tab and an other on the third tab
IE 6 or 7 does only 1 chart
the other does not have a good size height:0 and width:0

what ux.Media, uxFlash versions are you using?
No layout code == can't answer that.

armagedon
16 Jan 2009, 3:02 PM
Hello,
how do i use the mask in ux.media componenet?

In the miframe cmponent it is quite simple:

loadMask: {msg: 'Loading...'},

But ux.media componenet doesn't like it.

Thanks for your expertise.

hendricd
17 Jan 2009, 6:27 AM
Hello,
how do i use the mask in ux.media componenet?

In the miframe cmponent it is quite simple:

loadMask: {msg: 'Loading...'},

But ux.media componenet doesn't like it.

Thanks for your expertise.

ux.Media (2.1 avail in SVN) actually supports 2 masking agents: mediaMask and loadMask.

mediaMask will mask any mediaType while the underlying media is loading, whereas loadMask is used for chart data-loading operations supported by all ux.chartPack classes.

If you wanted to control 'when' the various masks appear, just set autoMask : false, and show/hide them yourself.

rpastorelle
19 Jan 2009, 9:09 AM
I'm trying to really dumb this down but having trouble. All I would like to do is show an embedded PDF in this EXTjs window. Originally I was just going to use an <iframe> but FF cant even render the PDF iframe inside of EXTjs. I found this extension and it looks very cool but I do not need to use panels or tabs or anything fancy. Can someone show me a very simple example that is an alternative to the following:



Ext.onReady(function(){

var win_preview;
var button_hw = Ext.get('preview_letter_link');

button_hw.on('click', function(){
// create the window on the first click and reuse on subsequent clicks
if(!win_preview){
win_preview = new Ext.Window({
el:'ext_wrapper',
width:640,
autoHeight:true,
html: "<iframe src='test.pdf'></iframe>",
buttons:
[ {
text: 'Close',
handler: function()
{
win_preview.hide();
}
}
]
});
}

win_preview.show(this);
});
});

moloth
19 Jan 2009, 10:44 PM
Just tried to open the Acrobat(Win) demo twice and firefox crashed... has no problems with the Acrobat(iframe) though.

stratboogie
29 Jan 2009, 12:54 PM
I am trying to imbed a flash movie and cannot get it to show up.All I get is a blank screen. The swfObject is coming back with an object. My code is listed below. Am I missing anything?



this.tabStrip = new Ext.TabPanel({
items: {
autoScroll: true,
forceFit: true,
layout: "fit",
title: "Dashboard",
id: "HomeTab",
html: "<div id=chart1></div>"
},
region: "center"
});


this.tabStrip.items.item(0).on("activate", function() {
var ts = this.tabStrip.items.item(0);
var div1 = Ext.get("chart1");
Chart1 = new Ext.ux.FlashPanel({
id: 'chart1',
renderTo: 'chart1',
height: 700,
width: 500,
border: false,
mediaCfg: {
mediaType: 'SWF',
url: 'charts.swf&library_path=charts_library&xml_source=sample.xml',
unsupportedText: 'The web browser must have the Flash player installed to view all charts.',
controls: true,
start: true,
params: {
wmode: 'transparent',
scale: 'noscale',
salign: 'TL',
align: 'top',
pluginspage: 'http://www.macromedia.com/go/getflashplayer',
quality: 'high'
}
}
});
Chart1.show();
}, this)



Tim

hendricd
30 Jan 2009, 4:59 AM
I am trying to imbed a flash movie and cannot get it to show up.All I get is a blank screen. The swfObject is coming back with an object. My code is listed below. Am I missing anything?
Tim

@Tim -- Your tabPanel layout needs some attention. There is no need to over-nest Panels because the FlashPanel IS a panel, and Ext does not need markup in place to render things to.

Review your ext/examples/tabs and layouts folders thoroughly, and get your layout functional first. What are your layout goals? Some sort of Border layout involved?

stratboogie
30 Jan 2009, 5:42 AM
At this point I dont have a goal in mind. I was just trying to get the first tab in the tabStrip to display a FlashChart. Just curious as to why it wouldnt display. It is returning a valid SWFObject.

stratboogie
30 Jan 2009, 7:02 AM
I modified my code to just a simple layout and the chart still wont display.


var tab = Ext.getCmp(this.cmpId);
var DashboardChart_1, DashboardChart_2;


DashboardChart_1 = new Ext.ux.FlashPanel({
id: 'chart1',
height: 700,
width: 500,
border: false,
layout: "fit",
mediaCfg: {
mediaType: 'SWF',
url: 'charts.swf&library_path=charts_library&xml_source=sample.xml',
unsupportedText: 'The web browser must have the Flash player installed to view all charts.',
controls: true,
start: true,
params: {
wmode: 'transparent',
scale: 'noscale',
salign: 'TL',
align: 'top',
pluginspage: 'http://www.macromedia.com/go/getflashplayer',
quality: 'high'
}
}
});

tab.add(DashboardChart_1);
tab.doLayout();

hendricd
30 Jan 2009, 7:34 AM
I modified my code to just a simple layout and the chart still wont display.
@Tim -- Why not start out getting the chartObj rendering first, and worry about tabPanels and such after.

What chart obj is this anyway? Does it support un-encoded params in its URL?





DashboardChart_1 = new Ext.ux.FlashPanel({
id: 'chart1',
height: 700,
width: 500,
border: false,
layout: "fit",
mediaCfg: {
mediaType: 'SWF', //implied
url: 'charts.swf & ? library_path=charts_library&xml_source=sample.xml',
unsupportedText: 'The web browser must have the Flash player installed to view all charts.', //builtin already
controls: true,
start: true,
params: {
wmode: 'transparent',
scale: 'noscale',
salign: 'TL',
align: 'top'
}
}
});
DashboardChart_1.render(Ext.getBody());
DashboardChart_1.show();

hendricd
30 Jan 2009, 11:30 AM
Hello everyone,

i ve started working with gwt since 2 months and for school we have to build a little project. so i am responsible for GUI. we ve built a client - server application and it works nice. now i standing at a point, i can't go further.

i want to display a pdf file at panel. i tried it with Frame and in hosted mode its works, but after compiling a get a strange message from firefox : "firefox dont't know how to open the address. protocoll isnt linked with application...."

ok i think, the problem is, that the pdf file is local. i have to implement a method on server right? and i need input- and outputstreamreader, or?

or am i on the wrong turn and there is a better solution? maybe somebody is able to help me :-/

thanks and have nice weekend

This sounds like a topic for GXT? GWT is not supported by these forums.

agon84
30 Jan 2009, 5:16 PM
yes i use GWTExt too. this is the wrong forum? i guess EXT JS is only for JavaScript. is it possible to solve my problem with JavaScript? If yes do i need a special library for ExtJS. sorry i want not to be disrespectful, but somebody here have a clue or a hint for me.

kind regards

KimSchneider
16 Feb 2009, 7:18 AM
Hi, I'm using the 2.1 svn version and have a problem with the ext loading mask.

Everytime the loading mask shows on the body, all my flash components hide and show up again after the loading mask hides.

Can this be caused by the medpanel extension?

I don't need to hide the flash components because I use them with wmode:transparent.

Hope you can help me, thanks

hendricd
17 Feb 2009, 5:00 AM
Hi, I'm using the 2.1 svn version and have a problem with the ext loading mask.

Everytime the loading mask shows on the body, all my flash components hide and show up again after the loading mask hides.

Can this be caused by the medpanel extension?

I don't need to hide the flash components because I use them with wmode:transparent.

Hope you can help me, thanks

@Kim -- This occurs because the standard Element.mask in Ext sets overflow:hidden on the document.body during masking, which causes a DOM reflow of all child elements/object (especially Flash Objects and Iframes). To prevent that from happening, simply include ux.Media's ux.VisibilityMode module in your head section:


<script type="text/javascript" src="../ux/media21/uxvismode.js"></script

Documentation on it and more can be found here (http://uxdocs.theactivegroup.com/index.html?class=Ext.ux.plugin.VisibilityMode).

If present on your page, all ux.Media classes (and subs) will prevent unwanted reflow behavior of managed media objects in your Ext layouts.

Good Luck

KimSchneider
17 Feb 2009, 6:07 AM
thanks for your fast reply, but it did't help anything.

i've tried the uxmedia and the uxvismode from your svn trunk...

the curious thing about it is, in firefox it seems to unload the complete flash object and reloads it. got no problem with chrome and ie, because they only hide the flash and show it up again

hendricd
17 Feb 2009, 6:11 AM
thanks for your fast reply, but it did't help anything.

i've tried the uxmedia and the uxvismode from your svn trunk...

the curious thing about it is, in firefox it seems to unload the complete flash object and reloads it. got no problem with chrome and ie, because they only hide the flash and show it up again

Can't offer much else without seeing the "what, how, and why" of your goal. What exactly are you masking and when ?

KimSchneider
17 Feb 2009, 6:21 AM
Attached is a screenshot of the userinterface...

In the middle there is the flash part using the mediapanel. as you can see ithe gui is based on a usual border layout.

as the user clicks on a specific button, an ext loading mask covers the body. now the flash completely hides (second screenshot) until the loading mask disapears.
I'm wondering why this doesn't happend when a modal ext window shows up...


BTW: I'm using the latest ext version (2.2.1)

hendricd
17 Feb 2009, 6:52 AM
Attached is a screenshot of the userinterface...

In the middle there is the flash part using the mediapanel. as you can see ithe gui is based on a usual border layout.

as the user clicks on a specific button, an ext loading mask covers the body. now the flash completely hides (second screenshot) until the loading mask disapears.
I'm wondering why this doesn't happend when a modal ext window shows up...


BTW: I'm using the latest ext version (2.2.1)

your trying to Mask the body of what? Some code would be more useful.

KimSchneider
17 Feb 2009, 7:10 AM
to post some code snippets would be difficult, because the whole application is clustered into many files.

create the loading mask

this.loadingMask = new Ext.LoadMask(Ext.getBody(), {
msg :"Bitte warten..."
});

the media panel

this.mediaPanel = new Ext.ux.MediaPanel(
{
id :'FlashViewer',
region :'center',
// margins: '5 5 5 5',
height :'100%',
width :'70%',
// title: 'Übersicht',
shim :false,
mediaCfg : {
id :'serverEye',
mediaType :'SWF', // underscore not required
// in
// definition
url :'flex/ServerEye3.swf',
unsupportedText :'Um das Online Control Center benutzen zu können benötigen Sie Adobe Flash Player.<br>Diesen können Sie <a href="http://get.adobe.com/flashplayer/" target="_blank">hier herunterladen.</a>',
params : {
wmode :'opaque',
page :1,
scale :'exactfit'
}
},
listeners : {
render : function() {
setTimeout( function() {
_self.runner.start(_self.task);
_self.runner.start(_self.task1);
}, 5000);
}
},
tbar : [ 'Suche', agentSearchField, '-',
'Detailgrad', viewDepthSlider, '->',
'Zoom', viewZoomSlider ],
bbar : [ new Ext.form.Label( {
id :'timerLabel',
text :''
}), ' ', new Ext.Toolbar.Button( {
id :'refreshOverview',
text :'Jetzt Aktualisieren',
iconCls :'refreshButton',
handler :_self.checkChanges
// cls: 'btnRefresh'
}) ]
});

the user clicks a button, an ajax requests starts, while the application is waiting I use

loadingMask.show();
that's when the flash disappears.

after the ajax request is completed, I use

loadingMask.hide();
and the flash shows up and reloads

love4soul
17 Feb 2009, 7:18 AM
hi,
I have a problem. Flash movie refreshes all the time when I switching tabs.

var panel = new Ext.ux.FlashPanel({
width :'100%',
height :'100%',
mediaCfg:{
mediaType:'SWF',
url :'charts.swf',
width :'100%',
height :'100%',
id :'fscTest',
controls :true,
scripting :'always',
start :true,
params:{
wmode:'opaque',
bgcolor : '#FFFF',
flashVars:{
xml: 'charts.php'
}
}
}
});


this.container.add(panel);
this.container.doLayout();is it possible to avoid refreshing somehow?

hendricd
17 Feb 2009, 9:32 AM
.... that's when the flash disappears.

after the ajax request is completed, I use

loadingMask.hide();and the flash shows up and reloads

@Kim -- ux.Media contains an override for Ext.Element.mask:


Ext.override(Ext.Element, {

/**
* Puts a mask over the element to disable user interaction. Requires core.css.
* @param {String} msg (optional) A message to display in the mask
* @param {String} msgCls (optional) A css class to apply to the msg element
* @return {Element} The mask element
*/
mask : function(msg, msgCls){

if(this.getStyle("position") == "static"){
this.addClass("x-masked-relative");
}

this._mask ||
(this._mask = Ext.DomHelper.append(this.dom, {cls:"ext-el-mask"}, true));

if(!this.select('iframe,frame,object,embed').elements.length){
this.addClass("x-masked"); //causes element re-init after reflow (overflow:hidden)
}

//may have been hidden previously (and not removed)
this._mask.setDisplayed(true)//.removeClass("x-hide-offsets");

if(typeof msg == 'string'){
this._maskMsg || (this._maskMsg = Ext.DomHelper.append(this.dom, {style:"visibility:hidden",cls:"ext-el-mask-msg", cn:{tag:'div'}}, true));
var mm = this._maskMsg;
mm.dom.className = msgCls ? "ext-el-mask-msg " + msgCls : "ext-el-mask-msg";
mm.dom.firstChild.innerHTML = msg;
mm.center(this).setVisible(true);
}

//Adjust Mask Height for IE strict
if(Ext.isIE && !(Ext.isIE7 && Ext.isStrict) && this.getStyle('height') == 'auto'){ // ie will not expand full height automatically
//see: http://www.extjs.com/forum/showthread.php?p=252925#post252925
this._mask.setHeight(this.getHeight());
}

return this._mask;
},

/**
* Removes a previously applied mask.
*/
unmask : function(remove){

if(this._maskMsg ){

this._maskMsg.setVisible(false);
if(remove){
this._maskMsg.remove(true);
delete this._maskMsg;
}
}

if(this._mask ) {

this._mask.setDisplayed(false);
if(remove){
this._mask.remove(true);
delete this._mask;
}
}

this.removeClass(["x-masked", "x-masked-relative"]);

},To prevent a DOM reflow when an Element mask is called for, make sure that ux.Media/Flash is loaded after any other existing Ext.Element overrides you may have in effect. You may also have better luck with a simple:
Ext.getBody().mask('Loading');instead of using the LoadMask class itself.

Also, since your playing with Flash objects, use the Ext.ux.FlashPanel class instead as it contains special handling for Flash objects.



hi,
I have a problem. Flash movie refreshes all the time when I switching tabs. is it possible to avoid refreshing somehow?

@love4soul -- It is, but you need to also include the ux.VisibilityMode (http://uxdocs.theactivegroup.com/index.html?class=Ext.ux.plugin.VisibilityMode) fix to handle that and apply the new hideMode it provides, to all your TabPanel items. If the ux.FlashPanel detects that it is available, it will amend your layout accordingly, but since you are adding Components to your TabPanel dynamically, you'll need to change the hideMode spec in your TabPanel defaults (for all your future tabPanel items).



var V = new Ext.ux.plugin.VisibilityMode({hideMode:'nosize', bubble : false }) ;

this.container = new Ext.TabPanel({
plugins : V,
defaults :{ plugins: V },
items :[....] .....
});

var panel = new Ext.ux.FlashPanel({
width :'100%', <-- Illegal
height :'100%', <-- Illegal
mediaCfg:{
mediaType:'SWF',
url :'charts.swf',
width :'100%',
height :'100%',
id :'fscTest',
controls :true,
autoSize : true,
scripting :'always',
start :true,
params:{
wmode:'opaque',
bgcolor : '#FFFF',
flashVars:{
xml: 'charts.php'
}
}
}
});

this.container.add(panel);
this.container.doLayout();

ethraza
17 Feb 2009, 8:19 PM
Hi Doug!

Actually, I have this peace of flashpanel that is inside an Ext.Window:

region: 'center',
autoScroll: false,
split: false,
layout: 'fit',
bodyStyle: 'background-color: black',
items: {
xtype: 'flashpanel',
id: playerId,
height: 366,
mediaMask: false,
border: false,
bodyBorder: false,
mediaCfg: {
mediaType:'SWF',
url: 'system/modules/ss/player2/player.swf',
autoSize: true,
controls: true,
start: true,
unsupportedText: {tag:'span',
html:'<p>Domain requires Flash Player 9.0 or higher. The latest version of Flash Player is available at the <a href="http://www.adobe.com/go/getflashplayer" target="_fdownload">Adobe Flash Player Download Center</a>.</p>'
},
params:{
wmode: 'transparent', //transparent / window
allowscriptaccess: 'sameDomain',
allowfullscreen: true,
bgcolor: '#000000',
flashVars: {
movie: 'http://www.domain.com/domain/system/modules/ss/flv/domain.flv',
fgcolor:'#000000',
autoload: false,
autoplay: true,
autorewind: true,
loop: true,
mute: false,
muteonly: true,
//clickurl: 'http://www.domain.com.br',
clicktarget: '_blank'
}
}
}
} This panel contains a flash flv player!

My question is:
How can I create an transparent div (or Panel if possible) over the flash?
In add I want that div to always sure it's size is the flashpanel size - the flash player control (play/pause/full-screen bar at bottom).

What I want to archive is to have a click-able transparent div over the flash movie so I can put, maybe an Ext.Dataview or something, so user can interact with it while the flash runs viewable but untouchable behind.

Thanks!

love4soul
18 Feb 2009, 12:03 AM
hendricd (http://extjs.com/forum/member.php?u=8730) thanks! Exactly what I needed, works like a charm =D>

hendricd
18 Feb 2009, 6:34 AM
Actually, I have this peace of flashpanel that is inside an Ext.Window:
My question is:
How can I create an transparent div (or Panel if possible) over the flash?
In add I want that div to always sure it's size is the flashpanel size - the flash player control (play/pause/full-screen bar at bottom).

What I want to archive is to have a click-able transparent div over the flash movie so I can put, maybe an Ext.Dataview or something, so user can interact with it while the flash runs viewable but untouchable behind.

Thanks!

@ethraza -- To create an 'overlay' over the container of a ux.Media component, you'd need to create an absolute-positioned element as another child of its container. The 'mediarender' event would be a good choice for inserting that:


region: 'center',
autoScroll: false,
split: false,
layout: 'fit',
bodyStyle: 'background-color: black',
items: {
xtype: 'flashpanel',
id: playerId,
height: 366,
mediaMask: false,
border: false,
bodyBorder: false,
mediaCfg: {
mediaType:'SWF',
url: 'system/modules/ss/player2/player.swf',
autoSize: true,
controls: true,
start: true,
unsupportedText: {tag:'span',
html:'<p>Domain requires Flash Player 9.0 or higher. The latest version of Flash Player is available at the <a href="http://www.adobe.com/go/getflashplayer" target="_fdownload">Adobe Flash Player Download Center</a>.</p>'
},
params:{
wmode: 'transparent', //transparent / window
allowscriptaccess: 'sameDomain',
allowfullscreen: true,
bgcolor: '#000000',
flashVars: {
movie: 'http://www.domain.com/domain/system/modules/ss/flv/domain.flv',
fgcolor:'#000000',
autoload: false,
autoplay: true,
autorewind: true,
loop: true,
mute: false,
muteonly: true,
//clickurl: 'http://www.domain.com.br',
clicktarget: '_blank'
}
}
},
listeners : {
mediarender : function( comp, mediaObject ){
this.overlay = comp.body.createChild({
tag:'DIV',
cls: 'player-overlay' });
}
}
}

Then, create a CSS rule for .player-overlay to suite your needs, perhaps:



.player-overlay {
display : block;
position:absolute;
overflow: hidden;
left : 0px; top: opx;
width : 100%;
height: 100%;
background-color:transparent;
}


and render whatever you want (whenever) into it.

You could also use the Ext.ux.Media.Flash.Component instead and switch to an absolute layout for the Window as well. Many options. Think thru your goal(s)...

ethraza
18 Feb 2009, 3:02 PM
Great Doug, thank you!

dev_orion
20 Feb 2009, 7:43 AM
Hello,
I am using latest code from SVN. I am usingtabpanel and creating tabs dynamically with each tab loading same .swf. I want to call Actionscript function with specific parameters for each tab when the tab is generated and media is loaded.
Here are the questions
1 - When do i call actionscript function
2- How do i call .

Here is the code which adds new Tab to TabPanel.


addTab: function( ) {
if(this.expressionText.getValue() === '')
return;
var tab;
if (tab = this.tabPanel.getItem(this.expressionText.getValue())) {
tab.refreshMedia(); //force media Refresh
}
else {
flPanel = new Ext.ux.Media.Flash.Panel({

title: this.expressionText.getValue(),
id: this.expressionText.getValue(),
name: this.expressionText.getValue(),

expression: this.expressionText.getValue(),
closable: true,
externalsNamespace: 'Analysis',
//cmargins: '3 3 3 3',
//margins: '3 3 3 3',
//border: false,
//layout: 'fit',
//border: false,
//anchor: '100% 100%',

title :this.expressionText.getValue(),
mediaCfg:{
url:'http://localhost:3000/LineGraph.swf',
width: '100%', //this.tabPanel.getInnerWidth(),
height: '100%', //this.tabPanel.getInnerHeight(),
controls :false,
start : true,

unsupportedText : '',
scripting: true,
eventSynch: true,
allowScriptAccess: "always",
installUrl :'playerProductInstall.swf', //No Express install without specifying this
requiredVersion : '9.0', //a bogus version forces Update
params :{

wmode:'opaque',
scale :'exactfit',
bgcolor: "#869ca7",
salign :'t'
}
},
listeners : {

mediaload: function(panel, cmp){
//defer(10);
//cmp.invoke(jsAnalyze,panel.expression);
//panel.Analysis.jsAnalyze('select(:CMT)');
//this.Analysis.jsAnalyze('select(:CMT)');

//cmp.jsAnalyze('select(:CMT)');
//alert('here');
//sendToActionScript(panel.mediaObject.id, panel.expression);

}
}
});

flPanel.bindExternals(['jsAnalyze']);
tab = this.tabPanel.add(flPanel);

this.tabPanel.doLayout();
this.tabPanel.setActiveTab(tab);
this.expressionText.setValue('');
defer(10);
sendToActionScript(flPanel.mediaObject.id, flPanel.expression);

}
}

Thank you.

hendricd
20 Feb 2009, 8:19 AM
@dev_orion -- The 'boundExternals' mediaCfg option for ux.Media.Flash simply extends function references (defined by your Flash object) to a localized namespace for 'direct' access (so as not to step on actual Ext class methods and NOT pollute the DOM ELement itself with such references -- which make traditional Flash cleanup such a problem):


flPanel = new Ext.ux.Media.Flash.Panel({

externalsNamespace: 'Analysis',

mediaCfg:{
url:'http://localhost:3000/LineGraph.swf',
autoSize : true,
controls :false,
start : true,

unsupportedText : '',
scripting : true,
eventSynch : true,
allowScriptAccess: "always",
installUrl :'playerProductInstall.swf',
requiredVersion : '9.0',
params :{
wmode:'opaque',
scale :'exactfit',
bgcolor: "#869ca7",
salign :'t'
},

boundExternals :['jsAnalyze'] //A 'direct' function reference defined by its external interface(s)

}
});
flPanel.Analysis.jsAnalyze(a, 14, 34);

Typically, those functions are available only after the Flash object reports its been fully loaded (instantiated by the browser and initialized). The ux typically handles all that initial binding for you if you specify what methods to bind (as shown above).

Not all Flash object support direct invokation in that manner (Flash => 8). Does yours (LineGraph.swf)?

If not, then you can use the ux.MediaFlash.Comp:invoke method to make the same call using Flash's legacy (slower XML) interface:


var resultsObj = flPanel.invoke('jsAnalyze', a, 14, 34);If that is a chart object of some sort, wouldn't you need to load some data in there tho?

dev_orion
20 Feb 2009, 9:31 AM
Thank you for your suggestions.
Unfortunately it still not working.

Basically the parameter which i pass to jsAnalyze function is kind of query which than actionscript using http service downloads data from server and draw the graph.

I am using flash ver 10.

f
lPanel.Analysis.jsAnalyze(flPanel.expression);
flPanel.invoke('jsAnalyze', flPanel.expression);

tab = this.tabPanel.add(flPanel);

this.tabPanel.doLayout();
this.tabPanel.setActiveTab(tab);


Anything else i can try?

Thanks

hendricd
20 Feb 2009, 9:37 AM
Thank you for your suggestions.
Unfortunately it still not working.

Basically the parameter which i pass to jsAnalyze function is kind of query which than actionscript using http service downloads data from server and draw the graph.

I am using flash ver 10.

f
lPanel.Analysis.jsAnalyze(flPanel.expression);
flPanel.invoke('jsAnalyze', flPanel.expression);

tab = this.tabPanel.add(flPanel);

this.tabPanel.doLayout();
this.tabPanel.setActiveTab(tab);
Anything else i can try?

Thanks

Based on your last post, you may not be waiting until the Flash object is rendered. Is your tabPanel set for deferredRender?

Don't try calling any of its external methods until/after the 'mediarender' event fires.

dev_orion
20 Feb 2009, 10:16 AM
Thanks again.

No i am not using deferred render.

I found the same as you suggested that i am not waiting for media to render completely. I added tabchange event handler on tabpanel and used alert('...') and then called the flPanel.Analysis.jsAnalyze(). IT worked. Now how do i synchronize the media render event and calling actionscript function?


flPanel = new Ext.ux.Media.Flash.Panel({

externalsNamespace: 'Analysis',
title: this.expressionText.getValue(),
id: this.expressionText.getValue(),
//name: this.expressionText.getValue(),
expression: this.expressionText.getValue(),
mediaCfg:{
url:'http://localhost:3000/LineGraph.swf',
autoSize : true,
controls :false,
start : true,

unsupportedText : '',
scripting : true,
eventSynch : true,
allowScriptAccess: "always",
installUrl :'playerProductInstall.swf',
requiredVersion : '9.0',
params :{
wmode:'opaque',
scale :'exactfit',
bgcolor: "#869ca7",
salign :'t'
},

boundExternals :['jsAnalyze'] //A 'direct' function reference defined by its external interface(s)

},
listeners : {

mediarender :function(panel, cmp){

//panel.Analysis.jsAnalyze('select(:CMT)');


}
}
});

or

this.tabPanel = new Ext.TabPanel({
id: 'analysisTabPanel',
plugins : visMode,
defaults :{ plugins: visMode },
//plain:true,
activeTab: 0,
//enableTabScroll: true,
resizeTabs: true,
cmargins: '3 3 3 3',
margins: '3 3 3 3',
deferredRender : false,
listeners: {
tabchange: function(tabpanel, tab){
//defer(20)
//tab.Analysis.jsAnalyze(tab.expression);
}
}

} );


Thanks.

dev_orion
20 Feb 2009, 10:42 AM
Hello,

To defer the actionscript function invocation till the media is rendered,

task = Ext.TaskMgr.start({
run: function(){flPanel.Analysis.jsAnalyze(flPanel.expression); task.stop();},
interval: 1000
});

i am using above code after the tabpanel.setActiveTab(tab); is called. Looks like its working for a moment. Need to find out the correct or better way. Please do suggest.

Regards and Thanks,
Dev

dev_orion
20 Feb 2009, 1:00 PM
Hello,

Looks like i am back to square one. Really getting desperate with no result. May be need to brush up ?

Well if you can suggest or point to any solution will be great.

Regards,
Dev

hendricd
21 Feb 2009, 6:29 AM
Hello,

Looks like i am back to square one. Really getting desperate with no result. May be need to brush up ?

Well if you can suggest or point to any solution will be great.

Regards,
Dev

@dev_orion -- Timing appears to be your issue, huh?

Who's Flash object is that? Does it provide a callback when it is fully initialized. The ux.MediaFlash class has the necessary hooks to support it -- just need to know what it is.

jsuser
24 Feb 2009, 3:37 AM
Hi,

i have some problem with flash panel.
{
border :false,
id : 'bottomVedioPanel',
xtype : 'flashpanel',
height:50 , //Give your panel height and width
mediaCfg : {
mediaType:'SWF',
url:'../media/WPplayer.swf',

style: {width:'100%',height:'100%',display:'inline'},
id: 'video',
start : true,
controls :true,
status:true,
params: {
allowScriptAccess: 'always',
wmode :'transparent',
scale :'exactfit',

salign :'t'
,flashVars:{
autostart :'@start'

,soundFile :'../media/sit.mp3'
,showdigits : true
,volume :'@volume'
}

}
}
}


its working fine the above code.but i want play the .wav files instead of
,soundFile :'../media/sit.mp3' i have use ,soundFile :'../media/CallRing.wav'
it displays the player.but its shows buffering----------.

where its going wrong and what is correct way of doing wav files.

Thanks
jsuser

jay@moduscreate.com
24 Feb 2009, 4:17 AM
this is not an Ext problem, it's a flash problem!

hendricd
24 Feb 2009, 4:20 AM
@jsuser -- Flash Players are not created equal. You need to select one capable of playing WAV files. The QuickTime player is usually a good choice as it can handle many different file formats. Other than that you could embed the Window Media Player object.

The demo included with the ux.Media/Flash extension demonstrates several formats, but it may require a couple diff Media players/objects to handle your variety.

jasondeegan
24 Feb 2009, 1:44 PM
Question 1, In the code snippet below, despite having allowScriptAccess: 'always', I cannot play the file in the sound file param (the domain is not the same as where this is running, obviously). Local files work fine. Note: copying and pasting that url into a browser, I can hear myself.

Question 2, how would I, via a javascript function, change the sound file param? I tried below and many variations but never got it. Ugh.

Thanks in advance.

Jason

Question 1


var p = new Ext.ux.FlashPanel( {
border :false,
renderTo: 'responseArea',
id : 'audioPlayer',
height:40,
width:250,
mediaCfg : {
mediaType:'SWF',
url : '/rd/includes/extjsMedia/WPplayer.swf',
style : {display:'inline', width:'250px',height:'30px'},
id: 'video',
start : true,
controls :true,
status:true,
params: {
allowScriptAccess: 'always',
wmode :'transparent',
scale :'exactfit',
salign :'t'
,flashVars:{
autostart :false
,soundFile :'http://sp1.devnet.starpoundtech.net/vxmlrecording/rocket/mymessages/098f6bcd4621d373cade4e832627b4f6.mp3'
}
}
}
});


QUESTION 2


function changeAudio( newFile ){
Ext.getCmp('video').params.soundfile = newFile;
}

jsuser
24 Feb 2009, 9:05 PM
@jsuser -- Flash Players are not created equal. You need select one capable of playing WAV files. The QuickTime player is usually a good choice as it can handle many different file formats. Other than that you could embed the Window Media Player object.

The demo included with the ux.Media/Flash extension demonstrates several formats, but it may require a couple diff Flash objects to handle your variety.


hi hendricd,

Thanks for quick responding.
I am trying to use quick player for playing wav files. for that Is it required to install quick player.Any way i have installed quick player and i am usin following code but it does not displaying any thing

{
text :'QuickTime WAV'
,id :'gfh'
,leaf :true
,config:{ mediaType :'QTWAV'
,url :'../media/callring.wav'
,start :true
,controls :true

,height :44
,width :280}
}
and i have looked and down loaded flash player demo from the following link.but in that also its not displaying any thing.
http://extjs.com/forum/showthread.php?t=23983


Please suggest that how can i use that player.


thanks
jsuser

hendricd
25 Feb 2009, 4:04 AM
Question 1, In the code snippet below, despite having allowScriptAccess: 'always', I cannot play the file in the sound file param (the domain is not the same as where this is running, obviously). Local files work fine. Note: copying and pasting that url into a browser, I can hear myself.

@jasondeegan -- allowScriptAccess: 'always' merely enables interaction between Javascript and the embedded object that was just rendered to the Browser's DOM. The version of your Flash plugin will dictate largely the security context you are permitted to operate in. Flash has it's own "same-origin" policies for loading media content from other domains. See you Flash documentation for more information on such requirements.



Question 2, how would I, via a javascript function, change the sound file param? I tried below and many variations but never got it. Ugh.

@jasondeegan -- "params" are embedding directives honored only at the time the <object/embed> Element is rendered. They cannot be changed once initially rendered. If your player has methods (most quality Flash Players do) for loading media from an alternate URL (setting volume, Play, Stop, etc), you should use those after the player is rendered. See your players API documentation for available runtime methods.
If it doesn't, you would call the renderMedia method of the ux to re-render the object with a modified mediaCfg containing your new values.

hendricd
25 Feb 2009, 4:24 AM
hi hendricd,

Thanks for quick responding.
I am trying to use quick player for playing wav files. for that Is it required to install quick player.Any way i have installed quick player and i am usin following code but it does not displaying any thing

{
text :'QuickTime WAV'
,id :'gfh'
,leaf :true
,config:{ mediaType :'QTWAV'
,url :'../media/callring.wav'
,start :true
,controls :true

,height :44
,width :280}
}
and i have looked and down loaded flash player demo from the following link.but in that also its not displaying any thing.
http://extjs.com/forum/showthread.php?t=23983


Please suggest that how can i use that player.


thanks
jsuser

@jsuser --
Some advice:
Get more familiar with Ext basics first.
Learn how to construct a basic Ext.Panel first.
Spend more time in the /examples Folder of your Ext distribution.
Study the API Documentation and Wiki thoroughly.The media Tree demo contains many types of media examples. (Admittedly it may be too complicated for the uninitiated Ext explorer.) But, blindly copying something you don't understand in the first place, will get you no-where, FAST! ;)

Start simple:


var QTPanel = new Ext.ux.MediaPanel({
title : 'QT WAV',
width : 300,
height : 400,
mediaCfg: {
mediaType :'QTWAV',
url :'../media/callring.wav',
start :true,
controls :true
}
});
QTPanel.render(Ext.getBody());

Study the QuickTime Player API thoroughly. There is a lot of functionality there. But, it's going to be up to you to learn how to use what all these different players have to offer.

pantarhei
25 Feb 2009, 4:57 AM
i'm trying to use your lib for displaying a PDF file. everything works fine.
only problem is that if i display the window, the PDF file is generated twice.
at the moment i have no idea why the url is called twice. am i missing something in general?

Toolbar-Button calling the "Preview-Window"


grid.getTopToolbar().add(
new Ext.Toolbar.Button({
text: String.format("Preview"),
iconCls:'page_white_acrobat',
handler: function(){
var sel = grid.getSelectionModel().getSelected();
if (sel) { print_preview(sel.data.id, sel.data.lang); }
}
}))

Media.Window for displaying the PDF



function print_preview(id, lang) {
var mConfig = {
mediaType :'PDF',
url : String.format('/print/{1}?lang={2}', id, lang),
unsupportedText : 'Adobe Reader?',
autoSize : true
};

var p;
p = new Ext.ux.Media.Window({
id : 'PDFViewerWin',
maximizable : true,
bodyStyle : 'position:relative; padding:0px;',
width : 600,
height : 400,
mediaCfg : mConfig,
title : 'Preview',
buttons : [{ text: 'Close',
handler: function(){
p.close();
}
}]
});

p.show();
}

hendricd
25 Feb 2009, 5:47 AM
i'm trying to use your lib for displaying a PDF file. everything works fine.
only problem is that if i display the window, the PDF file is generated twice.
at the moment i have no idea why the url is called twice. am i missing something in general?

Toolbar-Button calling the "Preview-Window"


grid.getTopToolbar().add(
new Ext.Toolbar.Button({
text: String.format("Preview"),
iconCls:'page_white_acrobat',
handler: function(){
var sel = grid.getSelectionModel().getSelected();
if (sel) { print_preview(sel.data.id, sel.data.lang); }
}
}))Media.Window for displaying the PDF


@pantarhei -- Nothing obvious stands out, but Windows are expensive. Consider this approach instead:


function print_preview(id, lang) {
var mConfig = {
mediaType :'PDF', //or 'PDFFRAME' (most reliable)
url : String.format('/print/{1}?lang={2}', id, lang),
unsupportedText : 'Adobe Reader?',
autoSize : true
};

var p = Ext.getCmp('PDFViewerWin');
p || (p = new Ext.ux.Media.Window({
id : 'PDFViewerWin',
maximizable : true,
bodyStyle : 'position:relative; padding:0px;',
width : 600,
height : 400,
closeAction : 'hide',
mediaCfg : mConfig,
title : 'Preview',
buttons : [{ text: 'Close',
handler: function(){ p[p.closeAction](); }
}]
})
);

if(p.rendered){ p.renderMedia(mConfig); }
p.show();

};

pantarhei
25 Feb 2009, 6:03 AM
great. great. great. after adding your changes the url is not called twice any longer.
don't fully understand it. but i think with my approach there was a reference somerwhere that called the url. will investigate now who called the url for the 2nd time.

thank you so much for your help!

chrizmaster
26 Feb 2009, 9:57 AM
hey,

i would like to use your plugin in our commercial application. am i allowed to do so? this would be awesome.

hendricd
26 Feb 2009, 12:41 PM
hey,

i would like to use your plugin in our commercial application. am i allowed to do so? this would be awesome.

For more on that, visit http://licensing.theactivegroup.com

moegal
27 Feb 2009, 7:22 AM
window doesn't show over a pdf or quicktime. How can I prevent/fix this?
(I tried searching this thread, but could not find an answer. I am sure this has already been addressed)

hendricd
27 Feb 2009, 8:00 AM
window doesn't show over a pdf or quicktime. How can I prevent/fix this?
(I tried searching this thread, but could not find an answer. I am sure this has already been addressed)

Simple answer: Use the latest release. The early expermental release is no longer supported.

fpo
16 Mar 2009, 8:37 AM
Hi Doug, and thank you for your great work!!
I'm having some trouble whith the demo app when displaing pdf files.
I wanted to display a pdf window and some floating elements (combo, tooltip) over a pdf "frame". Using the latest release mediaDemo , media_RC1,


Ext.useShims = true

and ext-2.0.2 and replace jpg node with :


//
text :'Images'
,id :'\/image'
,leaf :false
,iconCls:'folder'
,expanded:true
,children: [
{
text :'Jpeg'
,id :'\/image\/boat'
,leaf :true
//,mediaClass :'media'
,tabTitle: 'Boating Accidents Happen'/*
,config:{ mediaType :'JPEG'
,url :'how boating accidents happen.jpg'
,id :'accidents'
,height:380
,width:600
}*/
,config:{ mediaType :'PDF'
,url :'ex1.pdf'
,id :'ex1pdf1'
//,autoSize:true
,height:380
,width:600
//,params:{wmode:'transparent'}

}
}
]
}
//

- FF3 and Adobe Reader 9 : no pdf in the window, have to collapse/expand to show the pdf
- Safari 3.1.2, Opera 9 - no window over the pdf
- all but IE - refresh problem when closing the floating pdf window over the pdf tab

hendricd
16 Mar 2009, 8:52 AM
Hi Doug, and thank you for your great work!!
I'm having some trouble whith the demo app when displaing pdf files.
I wanted to display a pdf window and some floating elements (combo, tooltip) over a pdf "frame". Using the latest release mediaDemo , media_RC1,
Ext.useShims = true
and ext-2.0.2 and replace jpg node with :
//

text :'Images'
,id :'\/image'
,leaf :false
,iconCls:'folder'
,expanded:true
,children: [
{
text :'Jpeg'
,id :'\/image\/boat'
,leaf :true
//,mediaClass :'media'
,tabTitle: 'Boating Accidents Happen'/*
,config:{ mediaType :'JPEG'
,url :'how boating accidents happen.jpg'
,id :'accidents'
,height:380
,width:600
}*/
,config:{ mediaType :'PDF'
,url :'ex1.pdf'
,id :'ex1pdf1'
//,autoSize:true
,height:380
,width:600
//,params:{wmode:'transparent'}

}
}
]
}
//- FF3 and Adobe Reader 9 : no pdf in the window, have to collapse/expand to show the pdf
- Safari 3.1.2, Opera 9 - no window over the pdf
- all but IE - refresh problem when closing the floating pdf window over the pdf tab

@fpo --Still not clear to me what your goal is? (and, RC-1 was an experimental release at best).

Pls, wrap your code samples in forum [code /] tags.

fpo
17 Mar 2009, 6:10 AM
ok, so i'm trying to display a window (MediaWindow) containing a pdf over a tab containig a pdf. I'm using your mediaDemo app and ext 2.2.1. In medpanel.js (line 240) i've replaced the JPEG node with a PDF node.
it works on IE7 but having some problems on FF3 and Safari 3

hendricd
17 Mar 2009, 8:37 AM
ok, so i'm trying to display a window (MediaWindow) containing a pdf over a tab containig a pdf. I'm using your mediaDemo app and ext 2.2.1. In medpanel.js (line 240) i've replaced the JPEG node with a PDF node.
it works on IE7 but having some problems on FF3 and Safari 3

@fpo -- In my experience with the Acrobat plugin, it's nearly impossible to render anything over a PDF document. You may have some success:

- using the PDFFRAME mediaCfg profile with your MediaWindow and Tab items(included with uxMedia 2.0+). That profile renders the PDF inside an IFrame which acts as a native shim agent that might improve things over your tabPanel.
- Set Ext.useShims = true; and Ext will create an IFRAME-shim agent for the entire MediaWindow, but Window drag operations will look a bit clumsy.

hzwei
21 Mar 2009, 1:25 AM
I have two questions:
First:
if I use the chinese name in the url of Ext.ux.MediaPanel like this:
var pdfViewer = new Ext.ux.MediaPanel({
id: 'pdfViewer',
renderTo: document.body,
loadMask : {msg:'Preparing print preview please wait...'},
mediaCfg: {
mediaType:'PDF',
url: 'ghsd中科大.pdf',
unsupportedText: 'Acrobat Viewer is not installed',
controls: false
}
the player cannot play,can you tell me how to solve this question?
Second:
if I want to play file which end with .doc or .rmvb or .avi,
how can i do this,for example:
,"_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)
,
this is play for the file which end with .wmv,But I want to play file which end with .doc or .rmvb or .avi,can you help me?
Thanks!

hendricd
21 Mar 2009, 5:37 AM
I have two questions:
First:
if I use the chinese name in the url of Ext.ux.MediaPanel like this:
...the player cannot play,can you tell me how to solve this question?

Try a Google search for the standard Browser methods encodeURI, encodeURIComponent, and/or encoding UTF-8 urls.



Second:
if I want to play file which end with .doc or .rmvb or .avi,
how can i do this...,this is play for the file which end with .wmv,But I want to play file which end with .doc or .rmvb or .avi,can you help me?
Thanks!
The ability to embed the various media types in a Browser is limited to your/end-user available/installed Browser plugins. uxMedia provides mediaCfg profiles for embedding (inline) several popular media types and allows you to supply additional configs for custom media types not already included.
You will also find that not all media types are supported by all browsers (example: MSOffice Document (*.doc) embedding is only support on IE and only if you have the Office suite installed)

uxMedia (and subclasses) provide support for rendering the markup necessary to embed the required media plugin (that you indentify) within Ext Components. It is not a universal cross-browser media player -- that does not exist.

Note: uxMedia Rc1 was an experimental release, and is no longer actively supported. uxMedia 2.0+ is the current supported baseline (and includes mediaCfg support for several other media types).

hzwei
21 Mar 2009, 6:54 PM
I use the encode like this:


var urlname=encodeURI("F0902中科大.swf");
var pdfViewer = new Ext.ux.MediaPanel({
id: 'pdfViewer',
renderTo: document.body,
loadMask : {msg:'Preparing print preview please wait...'},
mediaCfg: {
mediaType: 'SWF',
url: urlname,
unsupportedText: 'Acrobat Viewer is not installed',
controls: false
}
});

But it also can not be played!
Anthor ,you say i can apply play mode myself,if i want to play file which end with .rmvb
,i write like this:


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

,is this correctly?and what I need to modify?

albertyips
25 Mar 2009, 9:28 AM
Does the latest versions of Media/Flash and managedIFrames work with Ext 3.0 or at least mostly work? About to attempt a migration of our code base. Looking for a heads up on issues we could expect.

Albert

hzwei
8 Apr 2009, 2:11 AM
/*
* @class Ext.ux.MediaPanel
* Version: 0.31
* Author: Doug Hendricks. doug[always-At]theactivegroup.com
* Copyright 2007-2008, Active Group, Inc. All rights reserved.
*
************************************************************************************
* This file is distributed on an AS IS BASIS WITHOUT ANY WARRANTY;
* without even the implied warranty of MERCHANTABILITY or
* FITNESS FOR A PARTICULAR PURPOSE.
************************************************************************************
License: ux.MediaPanel is licensed under the terms of
the Open Source LGPL 3.0 license. Commercial use is permitted to the extent
that the code/component(s) do NOT become part of another Open Source or Commercially
licensed development library or toolkit without explicit permission.
Donations are welcomed: http://donate.theactivegroup.com
License details: http://www.gnu.org/licenses/lgpl.html
Notes: the <embed> tag is NOT used in this implementation
Version: .31 Fixes to canned WMV config.
Version: .3 New class Heirarchy. Adds renderMedia(mediaCfg) method for refreshing
a mediaPanels body with a new/current mediaCfg.
Version: .2 Adds JW FLV Player Support and enhances mediaClass defaults mechanism.
Version: .11 Modified width/height defaults since CSS does not seem to
honor height/width rules
Version: .1 initial release
mediaCfg: {Object}
{ mediaType : mediaClass defined by ux.MediaBase.prototype[mediaClass]
,url : Url resource to load when rendered
,loop : (true/false) (@macro enabled)
,start : (true/false) (@macro enabled)
,height : (defaults 100%) (@macro enabled)
,width : (defaults 100%) (@macro enabled)
,controls : optional: show plugins control menu (true/false) (@macro enabled)
,unsupportedText: (String,DomHelper cfg) Text to render if plugin is not installed/available.
,params : { } members/values unique to Plugin provider
}
*/
/* Abstract Base Media Class
* This object should not be instantiated.
*/
Ext.ux.MediaBase = function(){};
Ext.apply(Ext.ux.MediaBase.prototype , {
_macros : null,
applyMacros : function(markup,macros){
var m = macros ||this._macros;
//alert("in applyMacros url is:"+m.url);
m.url=decodeURI(m.url);
// alert("in applyMacros1 url is:"+m.url);
return m?Ext.DomHelper.markup(markup)
.replace(/(%40url|@url)/g ,decodeURI(m.url))
.replace(/(%40start|@start)/g ,(m.start||!!this.autoStart)+'')
.replace(/(%40controls|@controls)/g,m.controls+'')
.replace(/(%40id|@id)/g ,m.id+'')
.replace(/(%40loop|@loop)/g ,m.loop+'')
.replace(/(%40width|@width)/g ,m.width+'')
.replace(/(%40height|@height)/g ,m.height+''):markup;
},
mediaMarkup : function(mediaCfg){

var m= mediaCfg ? Ext.apply({url:false}, mediaCfg ):{}; //make a copy
//alert("in mediaMarkup url is:"+m.url);
if(m && m.unsupportedText && typeof m.unsupportedText == 'object'){
m.unsupportedText = Ext.DomHelper.markup(m.unsupportedText);
}
var media = Ext.apply({type:false}, this['_'+m.mediaType] || false );
if( m.url && media.type ){
var params = Ext.apply(media.params||{},m.params || {});
for(var key in params){
if(params.hasOwnProperty(key)){
m.children || (m.children = []);
if(params[key] !== null){
m.children.push({tag:'param',name:key,value:(typeof params[key] == 'object'?Ext.urlEncode(params[key]):decodeURI(params[key])) } );
}
}
}
delete media.params;
//Convert height and width to style
media.style || (media.style = {});
media.style = Ext.apply({height:'@height',width:'@width'} ,m.style||{}, media.style );
if(m.unsupportedText){ //childNode Text if plugin/object is not installed.
media.html = m.unsupportedText;
}
m = Ext.apply({tag:'object'},m,media);
m.id || (m.id = Ext.id());
var assert = function(v,def,last){
return Ext.value(Ext.value(v ,def), last);
};
this._macros= {
url : m.url || ''
,height : m.height || '100%' //CSS does appear to honor h/w rules for <object>
,width : m.width || '100%' //so must default to something
,controls : assert(m.controls,false)
,start : assert(m.start, false)
,loop : assert(m.loop, false)
,id : m.id
};
//alert("in mediaMarkup1 url is:"+m.url);
delete m.url;
delete m.mediaType;
delete m.height;
delete m.width;
delete m.controls;
delete m.start;
delete m.loop;
delete m.params;
delete m.unsupportedText;
return m;
}else{
return null;
}
}
, "_PDF" : Ext.apply({
tag :'object'
,cls : 'x-media x-media-pdf'
,type : "application/pdf"
,data : "@url"
,params : { src : "@url" }
},Ext.isIE?{classid :"CLSID:CA8A9780-280D-11CF-A24D-444553540000"}:false)
,"_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)
,"_SWF" : Ext.apply({
tag :'object'
,cls : 'x-media x-media-swf'
,type : 'application/x-shockwave-flash'
,data : "@url"
,loop : true
,start : true
,params : {
movie : "@url"
,menu : "@controls"
,play : "@start"
,quality : "high"
,bgcolor : "#FFFFFF"
,loop : "@loop"
}
},Ext.isIE?{classid :"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"}:false)
,"_JWP" : Ext.apply({
tag :'object'
,cls : 'x-media x-media-swf x-media-flv'
,type : 'application/x-shockwave-flash'
,data : "@url"
,loop : true
,start : false
,params : {
movie : "@url"
,flashVars : {
autostart:'@start'
,repeat :'@loop'
,height :'@height'
,width :'@width'
,id : '@id'
}
}
},Ext.isIE?{classid :"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"}:false)
,"OFFICE" : {
tag : 'object'
,cls : 'x-media x-media-office'
,type :"application/x-msoffice"
,data : "@url"
}
,"POWERPOINT" : Ext.apply({ //experimental
tag : 'object'
,cls : 'x-media x-media-ppt'
,type :"application/vnd.ms-powerpoint"
,file : "@url"
},Ext.isIE?{classid :"CLSID:EFBD14F0-6BFB-11CF-9177-00805F8813FF"}:false)
,"_MOV" : Ext.apply({
tag :'object'
,cls : 'x-media x-media-mov'
,type : "video/quicktime"
,data : "@url"
,params : {
src : "@url"
,autoplay : "@start"
,controller : "@controls"
}
},Ext.isIE?
{ classid :'clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B'
,codebase :'http://www.apple.com/qtactivex/qtplugin.cab'
,type : 'application/x-oleobject'
,params : { src : "@url"
,controller :'@controls'
,autostart :'@start'
}
}:false)
,"_REAL" : Ext.apply({
tag :'object'
,cls : 'x-media x-media-real'
,type : "audio/x-pn-realaudio"
,data : "@url"
,standby : "Loading Real Media Player components..."
,params : {
src : "@url"
,autostart : "@start"
,controller : "@controls"
,loop : "@loop"
,console : "TES"
}
},Ext.isIE?{classid :"clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA",controls:'All'}:false)
,"_SVG" : {
tag : 'object'
,cls : 'x-media x-media-img x-media-svg'
,type : "image/svg+xml"
,data : "@url"
}
,"_GIF" : {
tag : 'object'
,cls : 'x-media x-media-img x-media-gif'
,type : "image/gif"
,data : "@url"
}
,"_JPG" : {
tag : 'object'
,cls : 'x-media x-media-img x-media-jpeg'
,type : "image/jpeg"
,data : "@url"
}
,"_PNG" : {
tag : 'object'
,cls : 'x-media x-media-img x-media-png'
,type : "image/png"
,data : "@url"
}
,"_HTM" : {
tag : 'object'
,cls : 'x-media x-media-html'
,type : "text/html"
,style : {overflow:'auto'}//,height:'100%',width:'100%'}
,data : "@url"
}
,"_TXT" : {
tag : 'object'
,cls : 'x-media x-media-text'
,type : "text/plain"
,style : {overflow:'auto'}
,data : "@url"
}
,"_XLS" : {
tag : 'object'
,cls : 'x-media x-media-excel'
//,type : "application/vnd.ms-excel"
,type :"application/x-msexcel"
,data : "@url"
}
,"_XML" : { //outright dangerous on IE !
tag : 'object'
,cls : 'x-media x-media-xml'
,type : "text/xml"
,style : {overflow:'auto'}
,data : "@url"
}
,"_QTMIDI" : Ext.apply({
tag : 'object'
,cls : 'x-media x-media-audio x-media-midi'
,type : "audio/midi"
,style : {overflow:'auto'}
,data : "@url"
,params : {autostart :'@start'}
},Ext.isIE?
{ classid :'clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B'
,codebase :'http://www.apple.com/qtactivex/qtplugin.cab'
,type : 'application/x-oleobject'
,params : { src : "@url"
,controller :'@controls'
,autostart :'@start'
}
}
:false)
,"_QTMP3" : Ext.apply({
tag : 'object'
,cls : 'x-media x-media-audio x-media-mpeg'
,type : "audio/mpeg"
,data : '@url'
,params : {autostart :'@start'}
},Ext.isIE?
{ classid :'clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B'
,codebase :'http://www.apple.com/qtactivex/qtplugin.cab'
,type : 'application/x-oleobject'
,params : { src : "@url"
,controller :'@controls'
,autostart :'@start'
}
}
:false)
,"_QTWAV" : Ext.apply({
tag : 'object'
,cls : 'x-media x-media-audio x-media-wav'
,type : "audio/wav"
,data : '@url'
,params : {autostart :'@start'}
},Ext.isIE?
{ classid :'clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B'
,codebase :'http://www.apple.com/qtactivex/qtplugin.cab'
,type : 'application/x-oleobject'
,params : { src : "@url"
,controller :'@controls'
,autostart :'@start'
}
}
:false)
});

Ext.ux.MediaPanel = Ext.extend(Ext.Panel , Ext.apply({
animCollapse :false
,ctype : "Ext.ux.MediaPanel"
,initComponent : function(){
//alert("in initComponent url is:"+this.mediaCfg.url);
this.bodyCfg || (this.bodyCfg= {tag:'div',cls:this.baseCls + '-body',children:[]});
this.autoLoad = false;
var markup;
this.bodyCfg.children || (this.bodyCfg.children =[]);
if(markup = this.mediaMarkup(this.mediaCfg)){
this.bodyCfg.children.push(markup);
} else {
this.bodyCfg.html = this.mediaCfg?this.mediaCfg.unsupportedText||false:false;
}

Ext.ux.MediaPanel.superclass.initComponent.call(this);
}
,onRender : function(ct, position){
//Final macro substition for rendered tag attributes
//alert("in onRender url is:"+this.mediaCfg.url);
this.mediaCfg.url=decodeURI(this.mediaCfg.url);
//alert("in onRender1 url is:"+this.mediaCfg.url);
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);
}
/*
* This method updates the mediaPanel's body with a new mediaCfg object,
* or supports a refresh of the panel based on the initialConfig.mediaCfg value
*/
,renderMedia : function(mediaCfg){
//alert("in renderMedia");
mediaCfg || (mediaCfg = this.initialConfig.mediaCfg);
var markup;
if(this.rendered && (markup = this.mediaMarkup(mediaCfg))){
this.body.update(this.applyMacros(markup));
}
}
}, Ext.ux.MediaBase.prototype));
Ext.reg('mediapanel', Ext.ux.MediaPanel);
/* A custom implementation for advanced Flash object interaction
Supports:
version detection,
version assertion,
Flash Express Installation (inplace version upgrades),
and custom Event Sync for interaction with SWF.ActionScript.
mediaCfg: {Object}
{
url : Url resource to load when rendered
,loop : (true/false)
,start : (true/false)
,height : (defaults 100%)
,width : (defaults 100%)
,controls : optional: show plugins control menu (true/false)
,eventSynch: (Bool) If true, this class initializes an internal event Handler for
ActionScript event synchronization
,requiredVersion: (String,Array,Number) If specified, used in version detection.
,unsupportedText: (String,DomHelper cfg) Text to render if plugin is not installed/available.
,installUrl:(string) Url to inline SWFInstaller, if specified activates inline Express Install.
,installRedirect : (string) optional post install redirect
,installDescriptor: (Object) optional Install descriptor config
}
*/
Ext.ux.MediaPanel.Flash = Ext.extend(Ext.ux.MediaPanel, {
autoStart : false,
requiredVersion: false,
playerVersion : null,
ctype : "Ext.ux.MediaPanel.Flash",
SWFObject : null,
varsName :'flashVars',
"_SWF" : Ext.apply({
tag : 'object'
,cls : 'x-media x-media-swf'
,type : 'application/x-shockwave-flash'
,data : "@url"
,loop : true
,start : true
,params : {
movie : "@url"
,play : "@start"
,loop : "@loop"
,menu : "@controls"
,quality : "high"
,bgcolor : "#FFFFFF"
}
},Ext.isIE?{classid :"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"}:false),
// private
initComponent : function(){
var mc = Ext.apply({url:false}, this.mediaCfg||{});
if(mc.url){
this.requiredVersion = mc.requiredVersion||false;
var hasFlash = !!(this.playerVersion = this.detectVersion());
var hasRequired = hasFlash && (this.requiredVersion?this.assertVersion(this.requiredVersion):true);
if(mc.unsupportedText){
if(typeof mc.unsupportedText == 'object'){
mc.unsupportedText = Ext.DomHelper.markup(mc.unsupportedText);
}
mc.unsupportedText = String.format(mc.unsupportedText,mc.requiredVersion,this.playerVersion || 'Not installed');
}
if(!hasRequired ){
//Version check for the Flash Player that has the ability to start Player Product Install (6.0r65)
var canInstall = hasFlash && this.assertVersion('6.0.65');
if(canInstall && mc.installUrl){
this.initialConfig.mediaCfg = mc = mc.installDescriptor || {
tag : 'object'
,cls : 'x-media x-media-swf'
,id : 'SWFInstaller'
,type : 'application/x-shockwave-flash'
,data : "@url"
,url : mc.installUrl
,width : 550
,height : 300
,loop : false
,start : true
,unsupportedText : mc.unsupportedText
,params:{
quality : "high"
,movie : '@url'
,allowScriptAcess : "always"
,align : "middle"
,bgcolor : "#3A6EA5"
,pluginspage : this.pluginsPage || "http://www.adobe.com/go/getflashplayer"
}
};
mc.params[this.varsName] = "MMredirectURL="+( mc.installRedirect || window.location)+
"&MMplayerType="+(Ext.isIE?"ActiveX":"Plugin")+
"&MMdoctitle="+(document.title = document.title.slice(0, 47) + " - Flash Player Installation")
} else {
//Let superclass handle with unsupportedText property
mc.url=null;
}
}
/*
* Sets up a eventSynch between the ActionScript environment
* and converts it's events into native Ext events.
*/
if(mc.eventSynch){
mc.params || (mc.params = {});
var vars = mc.params[this.varsName] || (mc.params[this.varsName] = {});
if(typeof vars == 'string'){ vars = decodeURIComponent(vars,true); }
var eventVars = (mc.eventSynch === true ? {
allowedDomain : vars.allowedDomain || document.location.hostname
,elementID : mc.id || (mc.id = Ext.id())
,eventHandler : 'Ext.ux.MediaPanel.Flash.eventSynch'
}: mc.eventSynch );
Ext.apply(mc.params,{
allowScriptAccess : 'always'
//,flashVars : Ext.applyIf(vars,eventVars)
})[this.varsName] = Ext.applyIf(vars,eventVars);
}
delete mc.requiredVersion;
delete mc.installUrl;
delete mc.installRedirect;
delete mc.installDescriptor;
delete mc.eventSynch;
}
mc.mediaType = "SWF";
this.mediaCfg = this.initialConfig.mediaCfg = mc;
Ext.ux.MediaPanel.Flash.superclass.initComponent.call(this);

}
,onRender : function(ct, position){
Ext.ux.MediaPanel.Flash.superclass.onRender.call(this, ct, position);
this._setSWFObject.defer(20,this);
}
//See superclass for details
,renderMedia : function(mediaCfg){
this._applyFixes();
this.SWFObject = null;
Ext.ux.MediaPanel.Flash.superclass.renderMedia.call(this, mediaCfg);
this._setSWFObject.defer(20,this);
}
//Private
,_setSWFObject: function(){
if(this.SWFObject = Ext.get(this.body.child('object.x-media-swf'))){
this.SWFObject.owner = this; //required for eventSync support
this.SWFObject.setVisibilityMode(Ext.Element[this.hideMode.toUpperCase()] || 1 ).originalDisplay = (this.hideMode != 'display'?'visible':'block');
}
}
/*
* Asserts the desired version against the installed Flash Object version.
* Acceptable parameter formats for versionMap:
*
* '9.0.40' (string)
* 9 or 9.1 (number)
* [9,0,43] (array)
*
* Returns true if the desired version is => installed version
* and false for all other conditions
*/
,assertVersion : function(versionMap){
var compare;
versionMap || (versionMap = []);
if(versionMap instanceof Array){
compare = versionMap;
} else {
compare = String(versionMap).split('.');
}
compare = (compare.concat([0,0,0,0])).slice(0,3); //normalize
var tpv;
if(!(tpv = this.playerVersion || (this.playerVersion = this.detectVersion()) )){ return false; }
if (tpv.major > parseFloat(compare[0])) {
return true;
} else if (tpv.major == parseFloat(compare[0])) {
if (tpv.minor > parseFloat(compare[1]))
return true;
else if (tpv.minor == parseFloat(compare[1])) {
if (tpv.rev >= parseFloat(compare[2]))
return true;
}
}
return false;
},
/*
* Flash version detection function
* Modifed version of the detection strategy of SWFObject library : http://blog.deconcept.com/swfobject/
* returns a {major,minor,rev} version object or
* false if Flash is not installed or detection failed.
*/
detectVersion : function(){
var version=false;
var formatVersion = function(version){
return version && !!version.length?
{major:version[0] != null? parseInt(version[0],10): 0
,minor:version[1] != null? parseInt(version[1],10): 0
,rev :version[2] != null? parseInt(version[2],10): 0
,toString : function(){return this.major+'.'+this.minor+'.'+this.rev;}
}:false;
};
if(Ext.isIE){
var sfo= null;
try{
sfo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.7");
}catch(e){
try {
sfo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.6");
version = [6,0,21];
// error if player version < 6.0.47 (thanks to Michael Williams @ Adobe for this solution)
sfo.AllowScriptAccess = "always";
} catch(e) {
if(version && version[0] == 6)
{return formatVersion(version); }
}
try {
sfo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash");
} catch(e) {}
}
if (sfo) {
version = sfo.GetVariable("$version").split(" ")[1].split(",");
}
}else if(navigator.plugins && navigator.mimeTypes.length){
var sfo = navigator.plugins["Shockwave Flash"];
if(sfo && sfo.description) {
version = sfo.description.replace(/([a-zA-Z]|\s)+/, "").replace(/(\s+r|\s+b[0-9]+)/, ".").split(".");
}
}
return formatVersion(version);
}
//Private
,_applyFixes : function() {
// Fix streaming media troubles for IE
if(this.rendered && Ext.isIE && this.SWFObject){
this.playerVersion || (this.playerVersion = this.detectVersion());
// only cleanup if the Flash Player version supports External Interface on IE
if(this.playerVersion && this.playerVersion.major > 7 ){
var o = this.SWFObject.dom;
o.style.display = 'none';
for (var x in o) {
if (typeof o[x] == 'function') {
o[x] = Ext.emptyFn;
}
}
}
}
},
beforeDestroy : function(){
this._applyFixes();
Ext.ux.MediaPanel.Flash.superclass.beforeDestroy.call(this);
},
/*
Calls an ActionScript function from javascript. Requires ExternalInterface.
*/
call : function(fn){
var SWF;
if(SWF = this.getSWFObject()){
var result = SWF.CallFunction("<invoke name=\"" + fn + "\" returntype=\"javascript\">" + __flash__argumentsToXML(arguments, 1) + "</invoke>");
return eval(result);
}
return undefined;
},
getSWFObject : function() {
return this.rendered?this.SWFObject.dom||null:null;
},
/**
* Dispatches events received from the SWF object.
*
* @method _handleEvent
* @private
*/
_handleSWFEvent: function(SWF, event)
{
var type = event.type||false;
if(type){
return this.fireEvent(type, this, SWF, event);
}
}
// private
,onShow : function(){
if(this.SWFObject){
this.SWFObject.setVisible(true);
}
Ext.ux.MediaPanel.Flash.superclass.onShow.call(this);
}
// private
,onHide : function(){
if(this.SWFObject){
this.SWFObject.setVisible(false);
}
Ext.ux.MediaPanel.Flash.superclass.onHide.call(this);
}
});
//Class Method to handle defined Flash interface events
Ext.ux.MediaPanel.Flash.eventSynch = function(elementID, event){
var SWF = Ext.get(elementID);
if(SWF && SWF.owner){
return SWF.owner._handleSWFEvent.call(SWF.owner, SWF.dom, event);
}
};
Ext.reg('flashpanel', Ext.ux.MediaPanel.Flash);



var pdfViewer = new Ext.ux.MediaPanel({
id: 'pdfViewer',
renderTo: document.body,
loadMask : {msg:'Preparing print preview please wait...'},
mediaCfg: {
mediaType:type,
url:'中国.wmv' (https://extjs.com/forum/'中国.wmv')
unsupportedText: 'Acrobat Viewer is not installed',
controls: false
}

the video cannot play the MediaPanel which url with chinese like '中国.wmv',
who can tell me why??
if I use encode('中国.wmv'),it also cannot be play!
who can help me??!

mystix
8 Apr 2009, 7:12 PM
@HZWEI

please learn to post your code in
tags.
refer to http://extjs.com/learn/Ext_Forum_Help#How_to_post_code_properly

hzwei
8 Apr 2009, 7:39 PM
Thanks !But can you help me solve my question??

mystix
8 Apr 2009, 7:57 PM
Thanks !But can you help me solve my question??
no. i don't use flash.

hlimaiem
21 Apr 2009, 11:58 PM
Hi,
I'm trying to use your new ux.Media and i've got a problem i explain:

I'm listing all the (.avi) contained in a folder (in the west side of my viewport as the tree of my existing folder).

All works fine, all my file appears correctly in my list, and my video start correctly as i want, but the problem came when i close the tab (which contain the runing video), the tab disappear (also the video) but the sound of the video continue running and don't stop until i completely close the browser (closing the tab of my browser doesn't stop the sound of the video).

So i've got a look arround this part of code in uxmedia.js


,clearMedia : function(){
if(Ext.isReady && this.mediaObject){
try{
// this.mediaObject.controls.stop(true);
//Ext.destroy(this.mediaObject);
this.mediaObject.removeAllListeners();
this.mediaObject.remove();
//alert(this.id);
}catch(er){}
}
this.mediaObject = null;
}

,
I've tryed to add Ext.destroy(...), but it doesn't stop the sound of the video.

Can you please give a suggestion or solution to run away this problem.
THANKS

Saneth
22 Apr 2009, 1:12 AM
Hello,

This is a very nice extension !

I would like to ask some help on a simple example I'm trying to achieve.

I use one MediaPanel and two MediaWindows each containing a PDF. They have to behave nicely when dragged : render one on top of others correctly, including the pdf. After playing a while with the following piece of code, I can't manage to make it work. I'm testing on Ubuntu/Firefox3 with Acrobat Reader.

Do you think what I'm asking for is possible, and if so, how to do it ?



Ext.onReady(function(){

//Ext.useShims = true; // Tried this, doesn't work

var mediaWindow = new Ext.ux.MediaWindow({
title: 'Test Media Window',
width: 300,
height: 300,
mediaCfg: {
mediaType: 'PDFFRAME', // Tried 'PDF' as well, doesn't work either
url: 'http://www.lpl.univ-aix.fr/lpl/ressources/techinfo/creation-pdf.pdf'
}
}).show();

var mediaWindow2 = new Ext.ux.MediaWindow({
title: 'Test Media Window2',
width: 300,
height: 300,
mediaCfg: {
mediaType: 'PDFFRAME',
url: 'http://www.lpl.univ-aix.fr/lpl/ressources/techinfo/creation-pdf.pdf'
}
}).show();

var mediaPanel = new Ext.ux.MediaPanel({
title: 'Test Media Panel',
width: 300,
height: 300,
mediaCfg: {
mediaType: 'PDFFRAME',
url: 'http://www.lpl.univ-aix.fr/lpl/ressources/techinfo/creation-pdf.pdf'
},
renderTo: document.body
});

});

hendricd
22 Apr 2009, 3:55 AM
@Saneth -- The Acrobat plugins are implemented as 'windowed' (layered) controls on most browsers. As such, IFRAME shimming will not work. I have yet to find any solution for managing overlapping PDF's.

hendricd
22 Apr 2009, 4:09 AM
@hlimaiem -- Review this Technet thread (http://social.technet.microsoft.com/Forums/en-US/itprovistaapps/thread/090d02ac-ed23-4a13-901f-007cc233073a). The problem exists in and out of the Browser. The only thing I could recommend is adding a stop command on a beforedestroy listener for the component.


Hi,
I'm trying to use your new ux.Media and i've got a problem i explain:

I'm listing all the (.avi) contained in a folder (in the west side of my viewport as the tree of my existing folder).

All works fine, all my file appears correctly in my list, and my video start correctly as i want, but the problem came when i close the tab (which contain the runing video), the tab disappear (also the video) but the sound of the video continue running and don't stop until i completely close the browser (closing the tab of my browser doesn't stop the sound of the video).

So i've got a look arround this part of code in uxmedia.js
,
I've tryed to add Ext.destroy(...), but it doesn't stop the sound of the video.

Can you please give a suggestion or solution to run away this problem.
THANKS

hlimaiem
22 Apr 2009, 6:12 AM
Thank you for your answer,
So i'm little novice on Ext, can you please tell me where exactly i have to add the before destroy listeners? and which parameters take?

Thanks

hendricd
22 Apr 2009, 12:43 PM
Thank you for your answer,
So i'm little novice on Ext, can you please tell me where exactly i have to add the before destroy listeners? and which parameters take?

Thanks

@hlimaiem - Try adding this listeners block to your tab component:


listeners : {
beforedestroy : function(){
//stop playback for IE
/*
Firefox will require the latest WMPplayer plugin to support Javascript interaction:
http://port25.technet.com/videos/downloads/wmpfirefoxplugin.exe

*/
var player = this.getInterface();
if(player){

(player.controls || player).stop();
}
}
}

hendricd
22 Apr 2009, 5:54 PM
Does the latest versions of Media/Flash and managedIFrames work with Ext 3.0 or at least mostly work? About to attempt a migration of our code base. Looking for a heads up on issues we could expect.

Albert

The latest version of ux.Media and Chartpack classes (available in SVN/trunk) are now compatible with vers 2 and 3 of Ext.

bhangale.parag
28 Apr 2009, 4:54 AM
hi hendricd,
I am new to this API...
I am using your Media Panel Extension in sample web application. It is Great but I have one problem regarding AVI file.I want to play AVI file I have Used "MediaType" as "WMV" so it is working fine but if suppose user having MAC operating system then??
Also I have one confusion that Videos which plays on Youtube.com that dont require plugin installed which player they are using???
Thanks in advance

hendricd
28 Apr 2009, 5:09 AM
hi hendricd,
I am new to this API...
I am using your Media Panel Extension in sample web application. It is Great but I have one problem regarding AVI file.I want to play AVI file I have Used "MediaType" as "WMV" so it is working fine but if suppose user having MAC operating system then??
Also I have one confusion that Videos which plays on Youtube.com that dont require plugin installed which player they are using???
Thanks in advance

The Youtube player is a Flash player (the Flash plugin is available for virtually every browser). The decision to distribute WMV narrows your browser/plugins choices drastically. Depending on your needs, you'll need to decide on a video/stream format that covers the most browsers possible.

That said, the Quicktime player is also capable of playing WMV, but only on certain platforms. You might check that out.

ux.Media does provide a default mediaCfg for the QT player (see the media demo for usage).

bhangale.parag
28 Apr 2009, 7:12 AM
thanks for a such a nice response.....
But
(the Flash plugin is available for virtually every browser). how's this i dont get it completely....
Sorry for this but please can u explore it more
Thanks in advance..

hendricd
28 Apr 2009, 7:35 AM
thanks for a such a nice response.....
But how's this i dont get it completely....
Sorry for this but please can u explore it more
Thanks in advance..

Browsers cannot natively render video streams. Browser Plugins/addons are always required to 'play' them. If your goal is supply video that is 'playable' on as many browsers as possible, you must select a video format/plugin that can be played on all those browsers (and likely, has the browser plugin already installed by the user). Currently, the widest installation coverage is made available with the Adobe Flash plugin (its also what Youtube requires).

Thats the plugin side.

A flash-based video player (there are several of them) would need to be rendered into your page (enter uxMedia) that can play your desired video formats (MP4, FLV, etc). The JW FLV Player (http://www.longtailvideo.com/players/jw-flv-player/) is a good candidate for streaming several popular video formats.

There is an example of a uxMedia.Panel containing the JW PLayer in the examples.

Your final choice(s) will depend on your goals of your site. ;)

MindCore
28 Apr 2009, 10:17 AM
Hey Hendricd:

Do you plan on adding support to the ux.Media plug-in to support the Video and Audio tags from the HTML5 specs? It appears that Firefox 3.5 will support this and I'm sure WebKit base browsers aren't far behind, if not already there.

-MC

hendricd
28 Apr 2009, 10:21 AM
Hey Hendricd:

Do you plan on adding support to the ux.Media plug-in to support the Video and Audio tags from the HTML5 specs? It appears that Firefox 3.5 will support this and I'm sure WebKit base browsers aren't far behind, if not already there.

-MC

@MC -- Yes, it would be a simple matter to add the requisite mediaCfgs for the new tags when they become mainstream (and equally simple to add html:'<video ...>' to your Panels as well). ;)

Celandro
28 Apr 2009, 12:15 PM
Working from the latest SVN, Im having issues with this:



{
id : 'tradeSchedulePortal',
text : 'Trade Schedule',
items : [{
id : 'tradeScheduleChart',
xtype : 'flashpanel',
externalsNamespace: 'customFlashObj',
mediaCfg : {
id: 'good',
mediaType: 'SWF',
url: '/flash/TradeSchedule.swf',
start: true,
unsupportedText: 'The Flash player is required',
scripting:true,
id: 'TradeSchedule',
height: 294,
width : 360,
allowScriptAccess :'sameDomain',
params: {
quality : 'high',
flashvars :'bridgeName=example'
},
boundExternals :['setChartData']
}
}]



and



var divFlash = Ext.ComponentMgr.get('tradeScheduleChart');
divFlash.customFlashObj.setChartData(intradayChartData14.labels, intradayChartData14.values);
// values created with:
for (d=0; d<5; d++) {
dayData = [];
values[d] = dayData;



for (i = 0; i<labels.length; i++) {
dayData[i] = Math.floor(Math.random()*(maxValue + 1))
}
}
Bug 1
Passing in an array to a flash javascript object doesnt work
Fix:


uxflash.js line 473

(Array.prototype.slice.call(arguments,1)).map(this._toXML).join(''),
needs to be changed to




(Array.prototype.slice.call(arguments,1)).map(this._toXML,this).join(''),

or



uxflash.js line 551
{return this._arrayToXML(value);}

will not work.



Bug 2
Firefox crashes on this line:



uxflash.js line 478
r=Ext.decode(obj.CallFunction(c));

Any ideas?

hendricd
28 Apr 2009, 12:47 PM
@Celandro -- Your code paste is/was a bit difficult to read, but nice catch on the map scope argument (SVN will be updated shortly). ;)

Note: params and flashVars should be specified as objects, not strings.

Regarding Bug 2: What is the actual return response from your ExternalInterface method at Line 478?





{
id : 'tradeSchedulePortal',
text : 'Trade Schedule',
items : [{
id : 'tradeScheduleChart',
xtype : 'flashpanel',
externalsNamespace: 'customFlashObj',
mediaCfg : {
mediaType: 'SWF',
url: '/flash/TradeSchedule.swf',
start: true,
unsupportedText: 'The Flash player is required',
scripting:true,
id: 'TradeSchedule',
height: 294,
width : 360,
params: {
allowScriptAccess :'sameDomain',
quality : 'high',
flashVars : {bridgeName:'example' } //objects only, no raw strings
},
boundExternals :['setChartData']
}
}]
}

Celandro
28 Apr 2009, 1:49 PM
@Celandro -- Your code paste is/was a bit difficult to read, but nice catch on the map scope argument (SVN will be updated shortly). ;)

Note: params and flashVars should be specified as objects, not strings.

Regarding Bug 2: What is the actual return response from your ExternalInterface method at Line 478?

My apologies on the indentions. Tabs dont paste over properly.

As for #2, the c object is:

<invoke name="setChartData" returntype="javascript"><arguments><array><property id="0"><string>09:30</string></property><property id="1"><string>10:00</string></property><property id="2"><string>10:30</string></property><property id="3"><string>11:00</string></property><property id="4"><string>11:30</string></property><property id="5"><string>12:00</string></property><property id="6"><string>12:30</string></property><property id="7"><string>13:00</string></property><property id="8"><string>13:30</string></property><property id="9"><string>14:00</string></property><property id="10"><string>14:30</string></property><property id="11"><string>15:00</string></property><property id="12"><string>15:30</string></property></array><array><property id="0"><array><property id="0"><number>805664</number></property><property id="1"><number>891224</number></property><property id="2"><number>505213</number></property><property id="3"><number>109518</number></property><property id="4"><number>393303</number></property><property id="5"><number>319394</number></property><property id="6"><number>630336</number></property><property id="7"><number>745668</number></property><property id="8"><number>976502</number></property><property id="9"><number>130211</number></property><property id="10"><number>928</number></property><property id="11"><number>557224</number></property><property id="12"><number>813859</number></property></array></property><property id="1"><array><property id="0"><number>871568</number></property><property id="1"><number>770173</number></property><property id="2"><number>967172</number></property><property id="3"><number>884088</number></property><property id="4"><number>49938</number></property><property id="5"><number>746872</number></property><property id="6"><number>696936</number></property><property id="7"><number>517905</number></property><property id="8"><number>52112</number></property><property id="9"><number>233101</number></property><property id="10"><number>57583</number></property><property id="11"><number>865927</number></property><property id="12"><number>36046</number></property></array></property><property id="2"><array><property id="0"><number>609940</number></property><property id="1"><number>859635</number></property><property id="2"><number>6448</number></property><property id="3"><number>87166</number></property><property id="4"><number>297898</number></property><property id="5"><number>876973</number></property><property id="6"><number>681521</number></property><property id="7"><number>816268</number></property><property id="8"><number>606338</number></property><property id="9"><number>508285</number></property><property id="10"><number>490603</number></property><property id="11"><number>361337</number></property><property id="12"><number>30169</number></property></array></property><property id="3"><array><property id="0"><number>393780</number></property><property id="1"><number>868088</number></property><property id="2"><number>447993</number></property><property id="3"><number>752251</number></property><property id="4"><number>265392</number></property><property id="5"><number>324367</number></property><property id="6"><number>761859</number></property><property id="7"><number>466416</number></property><property id="8"><number>235473</number></property><property id="9"><number>239646</number></property><property id="10"><number>391093</number></property><property id="11"><number>148699</number></property><property id="12"><number>61954</number></property></array></property><property id="4"><array><property id="0"><number>965532</number></property><property id="1"><number>508407</number></property><property id="2"><number>73315</number></property><property id="3"><number>667242</number></property><property id="4"><number>111515</number></property><property id="5"><number>779297</number></property><property id="6"><number>195122</number></property><property id="7"><number>333596</number></property><property id="8"><number>671766</number></property><property id="9"><number>206856</number></property><property id="10"><number>1739</number></property><property id="11"><number>549518</number></property><property id="12"><number>82236</number></property></array></property><property id="5"><array><property id="0"><number>253395</number></property><property id="1"><number>76214</number></property><property id="2"><number>439666</number></property><property id="3"><number>388892</number></property><property id="4"><number>115253</number></property><property id="5"><number>905041</number></property><property id="6"><number>75090</number></property><property id="7"><number>454962</number></property><property id="8"><number>969552</number></property><property id="9"><number>916549</number></property><property id="10"><number>731071</number></property><property id="11"><number>538399</number></property><property id="12"><number>860285</number></property></array></property><property id="6"><array><property id="0"><number>341142</number></property><property id="1"><number>336610</number></property><property id="2"><number>630350</number></property><property id="3"><number>646007</number></property><property id="4"><number>247512</number></property><property id="5"><number>942640</number></property><property id="6"><number>661215</number></property><property id="7"><number>92538</number></property><property id="8"><number>27960</number></property><property id="9"><number>25253</number></property><property id="10"><number>52974</number></property><property id="11"><number>761458</number></property><property id="12"><number>681098</number></property></array></property><property id="7"><array><property id="0"><number>835790</number></property><property id="1"><number>124772</number></property><property id="2"><number>818820</number></property><property id="3"><number>471689</number></property><property id="4"><number>811340</number></property><property id="5"><number>543305</number></property><property id="6"><number>268385</number></property><property id="7"><number>935065</number></property><property id="8"><number>267279</number></property><property id="9"><number>350403</number></property><property id="10"><number>399813</number></property><property id="11"><number>737482</number></property><property id="12"><number>207662</number></property></array></property><property id="8"><array><property id="0"><number>97264</number></property><property id="1"><number>434621</number></property><property id="2"><number>604023</number></property><property id="3"><number>109829</number></property><property id="4"><number>268081</number></property><property id="5"><number>451373</number></property><property id="6"><number>382053</number></property><property id="7"><number>966347</number></property><property id="8"><number>485428</number></property><property id="9"><number>676429</number></property><property id="10"><number>320946</number></property><property id="11"><number>700393</number></property><property id="12"><number>955560</number></property></array></property><property id="9"><array><property id="0"><number>137715</number></property><property id="1"><number>817752</number></property><property id="2"><number>309977</number></property><property id="3"><number>233849</number></property><property id="4"><number>496380</number></property><property id="5"><number>203666</number></property><property id="6"><number>741857</number></property><property id="7"><number>668922</number></property><property id="8"><number>594800</number></property><property id="9"><number>627605</number></property><property id="10"><number>547816</number></property><property id="11"><number>818595</number></property><property id="12"><number>889316</number></property></array></property><property id="10"><array><property id="0"><number>730873</number></property><property id="1"><number>833950</number></property><property id="2"><number>721587</number></property><property id="3"><number>472187</number></property><property id="4"><number>600896</number></property><property id="5"><number>877853</number></property><property id="6"><number>155978</number></property><property id="7"><number>829660</number></property><property id="8"><number>442137</number></property><property id="9"><number>59148</number></property><property id="10"><number>918790</number></property><property id="11"><number>831637</number></property><property id="12"><number>508788</number></property></array></property><property id="11"><array><property id="0"><number>425506</number></property><property id="1"><number>720546</number></property><property id="2"><number>703379</number></property><property id="3"><number>106521</number></property><property id="4"><number>299356</number></property><property id="5"><number>504579</number></property><property id="6"><number>890740</number></property><property id="7"><number>889531</number></property><property id="8"><number>819725</number></property><property id="9"><number>872843</number></property><property id="10"><number>797863</number></property><property id="11"><number>254270</number></property><property id="12"><number>209135</number></property></array></property><property id="12"><array><property id="0"><number>828358</number></property><property id="1"><number>349873</number></property><property id="2"><number>362779</number></property><property id="3"><number>857299</number></property><property id="4"><number>228981</number></property><property id="5"><number>213009</number></property><property id="6"><number>216136</number></property><property id="7"><number>21278</number></property><property id="8"><number>187990</number></property><property id="9"><number>290734</number></property><property id="10"><number>242563</number></property><property id="11"><number>56133</number></property><property id="12"><number>154060</number></property></array></property><property id="13"><array><property id="0"><number>806792</number></property><property id="1"><number>64872</number></property><property id="2"><number>610490</number></property><property id="3"><number>556533</number></property><property id="4"><number>884761</number></property><property id="5"><number>468424</number></property><property id="6"><number>148293</number></property><property id="7"><number>711443</number></property><property id="8"><number>38594</number></property><property id="9"><number>103407</number></property><property id="10"><number>490982</number></property><property id="11"><number>149580</number></property><property id="12"><number>399704</number></property></array></property></array></arguments></invoke>

The flash function definition is:


public function setChartData(binLabels:Array, chartData:Array):void {
...

}

The browser crashes completely and never returns from line 478.


Thank you for the quick response

hendricd
28 Apr 2009, 5:23 PM
@Celandro -- Does this work (making a direct call):



var divFlash = Ext.ComponentMgr.get('tradeScheduleChart');
divFlash.getInterface().setChartData(intradayChartData14.labels, intradayChartData14.values);You haven't mentioned what versions of :
the Flash plugin or
Actionscript your flash object was developed with,
or Browser (and version)but you might try modifying line uxflash.js further around line 467, as:



invoke : function(method /* , optional arguments, .... */ ){
var obj,r;
var c = [
'<invoke name="'+method+'" returntype="xml">',
'<arguments>',
(Array.prototype.slice.call(arguments,1)).map(this._toXML, this).join(''),
'</arguments>',
'</invoke>'].join('');

if(method && (obj = this.getInterface()) && typeof obj.CallFunction !== 'undefined' ){
r=obj.CallFunction(c);
console.log(r);
//r=Ext.decode(obj.CallFunction(c));
}
return r;
}
to see what the differences might be...

hendricd
29 Apr 2009, 6:12 AM
@Celandro( et all) -- SVN:media22: uxflash.js has been enhanced for better ExternalInterface call support.

The enhancements include support for this structure:



boundExternals :[{name:'setChartData',returnType:'xml'}, 'Stop']
This allows you to indicate what type of return format you want (and Flash object actually returns). If 'javascript' (the default) is indicated there, an Ext.decode will be attempted on the result. Any other value is simply returned as-is (gotta parse your own XML or string).

Here is a tested sample config (adapted for the JW Player sample included in mediademo.js) that uses the ExternalInterface exclusively (although certainly not required). The JW Player method bindings typically return simple strings.




new Ext.ux.Media.Flash.Window({
height:340,
width: 410,
title : 'LongTail (JWPlayer 4.1)',
externalsNamespace : 'JWP',
autoMask : true, //set true here because this player provides feedback when ready
listeners:{
//wait until the flashObject is ready before attempting anything
flashinit: function(C, player){
//construct a status callback for this instance
var cbName = 'recorder_'+player.id;
window[cbName] = function(state){this.setTitle(state.newstate);}.createDelegate(C);
C.setTitle('JWPlayer 4.1 Reports Ready: '+player.id);

//Use the externalsNamespace.externalInterface binding we defined earlier
with(C.JWP){
addModelListener("STATE",cbName);
sendEvent('PLAY','true');
}
},
delay : 100
}
,mediaCfg:{
mediaType : 'JWP'
,url : 'JWplayer.swf'
,autoSize : true
,volume : 25
,start :false
,loop :false
,scripting :'always'

//ExternalInterface bindings
,boundExternals : ['sendEvent' ,
{name:'addModelListener',returnType:'xml'}, //raw return
'addControllerListener',
'addViewListener',
'getConfig',
'getPlaylist']
,params:{
wmode :'opaque'
,allowfullscreen : true
,swliveconnect : true
,flashVars: {
play :'@start'
,file :'http://content.bitsontherun.com/videos/6AJT5nbx.m4v'
,duration : 30
,stretching :'fill'
,fullscreen : true
,volume :'@volume'
// ,tracecall : 'JWPtrace' //debug aid
}

}
}
});


Setting a returnType : 'xml' may help you debug results returned by your Actionscript more easily. ;)

Celandro
29 Apr 2009, 3:56 PM
@Celandro( et all) -- SVN:media22: uxflash.js has been enhanced for better ExternalInterface call support.

The enhancements include support for this structure:
Setting a returnType : 'xml' may help you debug results returned by your Actionscript more easily. ;)

Unfortunately, this did not change anything

All components are the newest version
firefox 3.0.10
flash player 10.0.22
flex builder 3.0.2


divFlash.getInterface().setChartData is not a function

Still crashes firefox on

484 r = obj.CallFunction(c);

In IE, I get an error on line 484
unknown name



Integration works on IE with the following call:



var flexApp = FABridge.example.root();
flexApp.setChartData(intradayChartData14.binLabels, intradayChartData14.binValues);


Note that I tried ux.Media.Flash both with and without the adobe FABridge and both had the same errors.

Celandro
30 Apr 2009, 10:01 AM
To help you out, I made a quick demo page

Works fine:
http://poseidonguild.com/flextest/FlexBridgeTest.html

Crashes firefox, does not work in IE:
http://poseidonguild.com/flextest/uxMediaTest.html

Source of swf file (includes swf inside it):
http://poseidonguild.com/flextest/FlexBridgeTest-src.zip

hendricd
30 Apr 2009, 11:49 AM
To help you out, I made a quick demo page

Works fine:
http://poseidonguild.com/flextest/FlexBridgeTest.html

Crashes firefox, does not work in IE:
http://poseidonguild.com/flextest/uxMediaTest.html

Source of swf file (includes swf inside it):
http://poseidonguild.com/flextest/FlexBridgeTest-src.zip

@Celandro- As you might (hopefully) have guessed by now, the Flex API bindings are not supported in the current ux.Media.Flash implementation. I'll review your samples further, but I have not had any demand for such functionality to date.

That said, I will ponder the possibilities...

Celandro
30 Apr 2009, 1:35 PM
I did not realize that you supported Flash and not Flex. Both generate SWF files and are not easy to distinguish between each other and are both played by the same Flash Player. I acutally was unaware that they generate different API bindings (which is bizarre on the part of Adobe). i took a quick look through FABridge.js and it doesnt look like they are doing any xml conversions so that is certainly a major difference.

Unfortunately, this is a show stopper for us so we are going to have to go with the FABridge.js at this time. Please feel free to email me if you decide to support Flex generated SWF files.

Choub
4 May 2009, 12:58 AM
@Saneth -- The Acrobat plugins are implemented as 'windowed' (layered) controls on most browsers. As such, IFRAME shimming will not work. I have yet to find any solution for managing overlapping PDF's.

Hello, I ran into this problem, but I think I found a workaround for firefox at least. If you set your overlapping div as overflow:auto, it's showed correctly under firefox. But that could probably lead to others problems.
Hope this helps.

Sesshomurai
4 May 2009, 7:48 AM
Hi,
A great component here! Is there an update that works with 3.0rc1? I tried the original links and they only work with 2.x.

Thanks!!

hendricd
4 May 2009, 7:51 AM
Hi,
A great component here! Is there an update that works with 3.0rc1? I tried the original links and they only work with 2.x.

Thanks!!
Yes, see the google.code SVN link on this threads first post.

Sesshomurai
4 May 2009, 2:36 PM
Hi,
Thank you for the tip. I get this error:



Error: El.addUnits is not a function
Source File: http://localhost/ontregrid/ext3/examples/media3/uxmedia.js
Line: 636


I tried to set up the example by copying the files, but am not sure which ones. The same files exist in trunk, 2.0 and media22. I put them under a 'media' folder in my ext-3.0rc1 examples directory.


Yes, see the google.code SVN link on this threads first post.

Nash-T
4 May 2009, 6:00 PM
Same problem here.
1. checked out latest code from svn
2. replaced original (uxmedia 2) uxmedia.js with new version
3. got same error on same line when sourcing uxmedia.js

Firefox 3 on Mac (Tiger)
Ext 3.0 RC1.1

BTW, thanks for this great ux.

-Tim

hendricd
4 May 2009, 6:35 PM
@Nash-T, Sesshomurai, (et-al) -- Try the latest from SVN/trunk/media22. It should handle the sudden nuances introduced with Ext 3 : Element.addUnits :s

Keep your eyes open tho, there may be more.

jay@moduscreate.com
5 May 2009, 10:34 AM
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... :-?

bhahah!! *how* did i miss this?

hendricd
5 May 2009, 10:37 AM
That mystix is one funny fella ;)

bhangale.parag
5 May 2009, 11:50 PM
hi hendricd, (http://extjs.com/forum/member.php?u=8730)

I am Back............
I have one question again...... I am using your mediapanel for playing my AVI file it's working fine i like it. but one query is like "how can play that avi video continuously ??" means i want to play that video continuous....

mediaType:'WMV', //here it would be required
url: "test.avi",
unsupportedText:'You need Flash to tell the time.',
autoStart:true,
controls:true,
start:false
my mediaconfig object is like this........
so can u please help me
Waiting for your reply
Thanks in advance..........

cool.akshay
6 May 2009, 3:01 AM
loop: true

paste it in ur code and try it.

Makor
7 May 2009, 8:03 AM
I cann`t understand how user ExternalInterface in last versions. Previously i use

mapPanel.call('reloadMap');

and call flash function 'reloadMap'.

Now i have :

new Ext.ux.FlashPanel({
width :230,
height :310,
id :'userFlash',
mediaCfg:{
mediaType:'SWF',
url :'/inc/flash/duel_geroy.swf?userOrEnemy=user',
width :'100%',
height :'100%',

controls :true,
scripting :'always',
start :true,
params:{
wmode:'opaque',
bgcolor : '#FFF'
}
}
})

How i can call functions from flash?? simple example, please...

hendricd
7 May 2009, 8:24 AM
@Makor -- If your Flash object supports 'direct' public method invokation, use:


myFlashPanel.getInterface().reloadMap();If you want to use the older ExternalInterface bindings, define your methods used by the Flash object:




myFlashPanel = new Ext.ux.FlashPanel({
width :230,
height :310,
id :'userFlash',
mediaCfg:{

url :'/inc/flash/duel_geroy.swf?userOrEnemy=user',
width :'100%',
height :'100%',
controls :true,
scripting :'always',
start :true,
params:{
wmode:'opaque',
bgcolor : '#FFF'
}
},
//ExternalInterface bindings
boundExternals : ['reloadMap' ],
externalsNamespace : 'duel' //optional
});

Then, you would invoke the method (via ExternalInterface) this way:


myFlashPanel.reloadMap();Or, if you specified a namespace, you would use:


myFlashPanel.duel.reloadMap();

Makor
7 May 2009, 8:38 AM
new Ext.ux.FlashPanel({
width :230,
height :310,
id :'userFlash',
externalsNamespace : 'Data',
boundExternals : ['refreshBattle'],
mediaCfg:{
mediaType:'SWF',
url :'/inc/flash/duel_geroy.swf?userOrEnemy=user',
width :'100%',
height :'100%',

controls :true,
scripting : true,
eventSynch : true,
allowScriptAccess: "always",

start :true,
params:{
wmode:'opaque',
bgcolor : '#FFF'
}
}
})

But
Ext.getCmp('userFlash').Data.refreshBattle();
don`t work, Error : 'Ext.getCmp('userFlash').Data' is undefined.