PDA

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



Pages : 1 2 [3] 4

hendricd
7 May 2009, 8:44 AM
...But
Ext.getCmp('userFlash').Data.refreshBattle();
don`t work, Error : 'Ext.getCmp('userFlash').Data' is undefined.

Are you using the latest from google.code/SVN ?

Makor
7 May 2009, 8:50 AM
Yes. Now replace from google svn, but size and date was identical.

hendricd
7 May 2009, 8:56 AM
Got a public site URL to snoop at it?

Makor
7 May 2009, 9:21 AM
No, but this example in firebug also dont work. I can send flash file if its need.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SeaHopes</title>

<link href="/seahopes/inc/js/extjs/resources/css/ext-all.css" media="all" type="text/css" rel="stylesheet" />

</head>
<body>



<script language="javascript" src="/seahopes/inc/js/extjs/ext-base.js"></script>
<script language="javascript" src="/seahopes/inc/js/extjs/ext-all.js"></script>


<script language="javascript" src="/seahopes/inc/js/ext-ext/uxmedia.js"></script>
<script language="javascript" src="/seahopes/inc/js/ext-ext/uxflash.js"></script>
<div id="test"></div>

<script language="javascript">
Ext.onReady(function(){
new Ext.ux.FlashPanel({ renderTo : 'test',
width :230,
height :310,
id :'userFlash',
externalsNamespace : 'Data',

mediaCfg:{
url :'/seahopes/inc/flash/duel_geroy.swf?userOrEnemy=user',
width :'100%',
height :'100%',
boundExternals : ['refreshBattle'],
controls :true,
scripting : true,
eventSynch : true,
allowScriptAccess: "always",

start :true,
params:{
wmode:'opaque',
bgcolor : '#FFFF'
}
}
})
})


</script>
</body>

ExtJS 2.2.1, mediapanel-latest.

hendricd
7 May 2009, 9:27 AM
That would be the only way to tell what's going on. PM me the SWF object, and I'll take a look at it when I get a chance.

hendricd
7 May 2009, 9:28 AM
And where is your body tag. That HTML doesn't look right !

Makor
7 May 2009, 10:10 AM
Corrected. Lose it when delete some html code :)

hendricd
7 May 2009, 10:24 AM
new Ext.ux.FlashPanel({ renderTo : 'test',
width :230,
height :310,
id :'userFlash',
externalsNamespace : 'Data',

mediaCfg:{
url :'/seahopes/inc/flash/duel_geroy.swf?userOrEnemy=user',
width :'100%',
height :'100%',
boundExternals : ['refreshBattle'],
controls :true,
scripting : true,
eventSynch : true,
allowScriptAccess: "always",

start :true,
params:{
wmode:'opaque',
bgcolor : '#FFFF'
}
},
listeners:{
//Must wait until the Flash object is rendered and initialized !
flashinit: function(panel){
panel.Data.refreshBattle();
},delay : 100
}
});

Makor
7 May 2009, 10:39 AM
See now. Console.log() dont passed. on loaded page in console print "panel.Data.refreshBattle(); " and error "panel.Data undefined" already exist.

hendricd
7 May 2009, 10:55 AM
@Makor -- You're not using the right version. You need 2.1 for ExternalInterface binding.
See: http://code.google.com/p/uxmedia/source/browse/#svn/trunk/source/media22%3Fstate%3Dclosed

Makor
8 May 2009, 12:50 AM
Update version. On manual start - data loaded, but flashinit dont started...

hendricd
8 May 2009, 6:02 AM
Update version. On manual start - data loaded, but flashinit dont started...

@Makor -- Try the more generic mediaload event instead. flashinit is for use with custom flash-ready signals.

Makor
8 May 2009, 6:20 AM
When i use 'mediaload' it work before flash load and crash firefox -
when i add alert() before call flash function, i see that it alerted before flash load.

now on seahopes.com/test.html

hendricd
8 May 2009, 6:31 AM
When i use 'mediaload' it work before flash load and crash firefox -
when i add alert() before call flash function, i see that it alerted before flash load.

now on seahopes.com/test.html
@Makor -- Timing will always be any issue for you, unless your Flash object can report that it is ready to be driven (usually a callback to a function defined in the browser's window object). Does it support that?

Here is how to wire that up:



//playerId is the DOM id of the SWF object
window.yourOnReadyHandler = function(playerId) {

//Search for a ux.Flash-managed player.
var flashComp, el = Ext.get(playerId);
if(flashComp = (el?el.ownerCt:null)){
flashComp.onFlashInit();
}
};
Then the flashinit event would do it's job.

bhangale.parag
11 May 2009, 6:08 AM
Hi hendricd, (http://extjs.com/forum/member.php?u=8730)
I am using your MediaPanel for playing AVI file I think u know it from my previous questions.But I have one question regarding Window media player. I want to aatach buffering event of WMV to my mediaObject how can i do that???????
Please help me................
in ur uxmedia.js file

/* WMV Interface Notes
* On IE only, to retrieve the object interface (for controlling player via JS)
* use mediaComp.getInterface().object.controls
*
* For all other browsers use: mediaComp.getInterface().controls
Related DOM attributes for WMV:
DataFormatAs :
Name :
URL :
OpenState:6
PlayState:0
Controls :
Settings :
CurrentMedia:null
MediaCollection :
PlaylistCollection :
VersionInfo:9.0.0.3008
Network :
CurrentPlaylist :
CdromCollection :
ClosedCaption :
IsOnline:false
Error :
Status :
Dvd :
Enabled:true
FullScreen:false
EnableContextMenu:true
UiMode:full
StretchToFit:false
WindowlessVideo:false
IsRemote:falseU have added this comment i was trying that but not able to get that playstate.............
Please Help me........

Thanks in advance..........

Waiting for reply.................

hendricd
11 May 2009, 8:03 AM
Hi hendricd, (http://extjs.com/forum/member.php?u=8730)
I am using your MediaPanel for playing AVI file I think u know it from my previous questions.But I have one question regarding Window media player. I want to aatach buffering event of WMV to my mediaObject how can i do that???????
.................

Add a listeners config to your mediaCfg block to trap player events:


mediaCfg:{
mediaType :'WMV'
,url :'http://www.sarahsnotecards.com/catalunyalive/fishstore.wmv'
,autoSize : true
,id :'wmplayer'
,unsupportedText : not['WMV']
,controls :true
,start :true
,status :true
,listeners: {
playstatechange : function(){ ... }
}
,params: {
stretchToFit : Ext.isIE

}
}

...and, this thread (http://forums.techarena.in/media-player/1032301.htm) may help out, dunno.

dbagchi77
12 May 2009, 4:05 AM
Hi,
I am a newbie using ux.Media[.Flash]...and I have run into some problems with Mozilla..

I am making a scope in flash - which seems to work fine in IE8.0 and Chrome, but the controls are frozen in Firefox 3.0... see attached image mozilla_issue_flash.jpg.. the sliders just does not move or respond.

I am using the flash panel like -


<script type="text/javascript" src="/packages/media/uxmedia.js"></script>
<script type="text/javascript" src="/packages/media/uxflash.js"></script>
<script type="text/javascript" src="/packages/media/uxofc.js"></script>
.
.
.
.
In my JS file...along with some other code..


expWin = desktop.createWindow({
id: 'PerformExperiment/' + exp_id,
title: 'Experiment: ' + exp_name,
width: 813,
height: 631,
iconCls: 'view_run',
resizable: true,
maximizable: true,
items:[{
xtype:'flashpanel',
border :true,
id: 'flash-exp',
width: 813,
height: 631,
mediaCfg : {
mediaType:'SWF',
url : '/schematic/Schematic.swf',
id: 'flash-exp',
start : true,
controls :true,
status:true,
params: {
allowScriptAccess: 'always',
wmode :'transparent',
scale :'exactfit',
salign :'t'
}
}
}]
});

expWin.show();


I would really appreciate any help or feedback that you may have. If this kind of an issue has already been answered, pleased help me by pointing to the right thread as I did not find such a discussion.

hendricd
12 May 2009, 4:30 AM
@dbagchi77 -- Try setting autoScroll:true on both the Window and the flashpanel configs, and/or set wmode to 'opaque'.

dbagchi77
12 May 2009, 5:00 AM
@hendricd : Thanks a lot, it worked like a charm.

hendricd
15 May 2009, 7:51 AM
Just completed RC1 of the ux.Media.Flex classes (for the latest ux.Media 2.1 release only).

Now you can interact directly with (using its built-in FABridge emulation) embedded Flex Applications within ux.Media: Component, Panel, Portal, or Window.

See the flexdemo files in SVN/demos (http://code.google.com/p/uxmedia/source/browse/#svn/trunk/demos).

I'll try to get a public demo site of the latest release available soon.

Celandro
21 May 2009, 9:06 AM
There is an issue in both IE7 and Firefox when you set draggable to true.
After drag, in IE7, getBridge() is null
In Firefox, the content gets reset.

I can work around the Firefox issue, but did not have any luck with working around the IE7 issue. Is there something simple that can be done? I would prefer that the current state of the behavior for both IE7 and Firefox was consistant, but simply working would solve the last issue we are having.


http://www.poseidonguild.com/flextest/uxMediaTest2.html

hendricd
21 May 2009, 9:22 AM
@Celandro -- A few issues I've noticed with your sample:

uxmedia.js is included twice ?

This is going to realign anything in it during/after your drag: <div align="center">

You need to wrap your script code in an Ext.onReady function.

If you need draggable support, why not use the Media.Flex.Window instead ? It's fully draggable. A Panel is not easily so.

Celandro
21 May 2009, 9:48 AM
@Celandro -- A few issues I've noticed with your sample:

uxmedia.js is included twice ?

This is going to realign anything in it during/after your drag: <div align="center">

You need to wrap your script code in an Ext.onReady function.

If you need draggable support, why not use the Media.Flex.Window instead ? It's fully draggable. A Panel is not easily so.
I removed the duplicate uxmedia.js, removed the align and added the Ext.onReady function and have the same problem in IE.

I am simply trying to post the most simple example code I can. The actual application we are working on is based on the Portal demo which uses panels.


Is there some simple 'rebindBridge' function I could try?

hendricd
21 May 2009, 9:58 AM
@Celandro -- Portals will be near impossible to handle because of the DOM reflow problems associated with dragging them from one column to another. (But, you shouldn't be seeing that problem on IE). Once reflow occurs, Flash objects will re-initialize and you'll lose any bindings.

The only solution I can offer would be to call panel.renderMedia() again after the column move is complete. That'll force the media to render again and restablish the bindings.

Celandro
22 May 2009, 3:58 PM
There is a bug when using 2 windows:
http://poseidonguild.com/flextest/uxMediaTest2.html

The first click on Test Me works properly. After that, portal.getBridge().getRoot() always returns the example3 bridge. However if you move the top one (and renderMedia is called again), it will always return the example2 bridge

Also, the flexinit method does not always get triggered. What appears to happen is bridgeId[0]='example' gets returned to onFlexBridge even though the proper bridgeName= parameter is set.

The full example is here
http://poseidonguild.com/flextest/test.htm

There are a few other issues, but I suspect most of them are due to the getBridge().getRoot() and the onFlexBridge issues.

PS. the getBridge().getRoot() is not due to having the same method SWF loaded twice. It happens even if you have seperate SWFs which you can test on the full example.

Sesshomurai
23 May 2009, 6:38 AM
Hi,
Is it possible to allow Ext.Window's to hover over a mediapanel with PDF? It seems the example a some configs for this, but I couldn't get it to work in my app. FWIW I'm using Ext3.0rc1, FF3


thanks for any tips!

hendricd
23 May 2009, 7:17 AM
There is a bug when using 2 windows:
http://poseidonguild.com/flextest/uxMediaTest2.html

The first click on Test Me works properly. After that, portal.getBridge().getRoot() always returns the example3 bridge. However if you move the top one (and renderMedia is called again), it will always return the example2 bridge

Also, the flexinit method does not always get triggered. What appears to happen is bridgeId[0]='example' gets returned to onFlexBridge even though the proper bridgeName= parameter is set.

The full example is here
http://poseidonguild.com/flextest/test.htm

There are a few other issues, but I suspect most of them are due to the getBridge().getRoot() and the onFlexBridge issues.

PS. the getBridge().getRoot() is not due to having the same method SWF loaded twice. It happens even if you have seperate SWFs which you can test on the full example.

@Celandro -- Try the latest uxflex.js from SVN/trunk/./media22. It corrects the multi-instance tangle and should be compat with the latest and older versions of the Flex SDK. ;)

Also, for your portlet frenzy, use the xtype:'flexportlet' instead of 'flexpanel'.

Celandro
26 May 2009, 9:52 AM
@Celandro -- Try the latest uxflex.js from SVN/trunk/./media22. It corrects the multi-instance tangle and should be compat with the latest and older versions of the Flex SDK. ;)

Also, for your portlet frenzy, use the xtype:'flexportlet' instead of 'flexpanel'.
Thank you so much for all your hard work. http://poseidonguild.com/flextest/test.htm now works correctly! Multiple SWF portlets all working independently, movable, etc.

This was the key for handling movement of portlets in IE:


draggable: {
ddGroup:'portal',
startDrag : function(e){
if (Ext.isIE) {
this.panel.clearMedia();
}
},
endDrag : function(e){
if (Ext.isIE) {
this.panel.renderMedia();
}
this.panel.fireEvent.defer(300,this.panel,['flexinit',this.panel]);
}
}
Im not sure why I had to fire my own flexinit event, you might be better suited to figuring that one out.


Edit:
Spoke a bit too soon.
Still having an issue when closing the window or when the applySate method is called.
Inside clearMedia, M.releaseASObjects() is being called and throwing an exception in IE. I think the issue is that the flex object has already been removed by the browser.

Any ideas?

hendricd
26 May 2009, 10:05 AM
@celandro -- Glad to hear that. ;)


...Im not sure why I had to fire my own flexinit event, you might be better suited to figuring that one out.

Review your 'this.runOnce' logic one more time ;)

Celandro
26 May 2009, 11:00 AM
Any quick solution to the clearMedia issue in IE?

PS. running in a debugger, the flexinit event is only triggered by my own event code. Its not being triggered when a flex object is actually initialized. The runonce seems correct. The way its supposed to work, is after you click the settings tool once and then move the portal, it should trigger to restore the flex object to the way it was before it moved (outside of the #calls counter)

hendricd
26 May 2009, 11:15 AM
Any quick solution to the clearMedia issue in IE?
WHat issue are you having?

Celandro
26 May 2009, 12:19 PM
In IE, http://poseidonguild.com/flextest/test.htm
Click Flex Portlet Example.
Click on the X
Inside onDestroy() it calls clearMedia() which calls releaseASObjects(); which throws an exception in the flash player.

I actually just fixed it in my my copy by moving clearMedia into beforeDestroy
aka:


uxmedia.js line 635:
beforeDestroy : function(){
this.clearMedia();
},
onDestroy : function(){
Ext.destroy(this.mediaMask,this.loadMask);
this.lastCt = this.mediaObject = this.renderTo = this.applyTo = this.mediaMask = this.loadMask = null;


}
Edit:
basically, after the flex object has been removed from the dom, it is too late to call clearMedia.

hendricd
26 May 2009, 7:22 PM
@Celandro -- Nice catch! =D> Took me a bit, but got it straightened out. There was a problem in the base class heirarchy during tear-down. Fixed now.

Try again with the latest (uxmedia, uxflash, uxflex).js from SVN/trunk.

Celandro
27 May 2009, 8:03 AM
It seems to have fixed the problem. There is 1 remaining problem in IE when I minimize the portlet, the swf is visible in a strange location. Restore doesnt place it back, but moving the portlet will fix it

These 2 functions:


panel.on('expand', function() {
panel.initialConfig.collapsed = false;
panel.ownerCt.ownerCt.saveState();
panel.ownerCt.ownerCt.doLayout();
});

//the collapse event is deferred because panels that start collapsed fire the collapse event before rendering
panel.on.defer(50, panel, ['collapse', function() {
panel.initialConfig.collapsed = true;
panel.ownerCt.ownerCt.saveState();
panel.ownerCt.ownerCt.doLayout();
}]);

hendricd
27 May 2009, 8:09 AM
It seems to have fixed the problem. There is 1 remaining problem in IE when I minimize the portlet, the swf is visible in a strange location. Restore doesnt place it back, but moving the portlet will fix it


Delayed execution of your handler should look like:



//the collapse event is deferred because panels that start collapsed fire the collapse event before rendering
panel.on('collapse', function(p) {
p.initialConfig.collapsed = p.collapsed;
p.ownerCt.ownerCt.saveState();
p.ownerCt.ownerCt.doLayout();
}, panel, {delay:50});
Try things out with that adjustment.

Celandro
27 May 2009, 9:22 AM
Unfortunately, that change didn't do anything.

I just checked and IE6 is different than IE7
IE7:
flex object is moved to top left corner on collapse. It is partially obscured by a panel. On expand, does not restore position
IE6:
flex object is moved up to the title bar of the panel, obscuring the window.

Firefox works perfectly.

hendricd
27 May 2009, 9:26 AM
Unfortunately, that change didn't do anything.

I just checked and IE6 is different than IE7
IE7:
flex object is moved to top left corner on collapse. It is partially obscured by a panel. On expand, does not restore position
IE6:
flex object is moved up to the title bar of the panel, obscuring the window.

Firefox works perfectly.
Are you using the uxvismode plugin (http://uxdocs.theactivegroup.com/index.html?class=Ext.ux.plugin.VisibilityMode)? You're probably battling reflow issues with all that animation going on.

Celandro
27 May 2009, 2:09 PM
Are you using the uxvismode plugin (http://uxdocs.theactivegroup.com/index.html?class=Ext.ux.plugin.VisibilityMode)? You're probably battling reflow issues with all that animation going on.
I am including uxvismode.js (http://uxdocs.theactivegroup.com/repo/trunk/Ext/ux/plugin/uxvismode.js) but am not doing anything besides that as I havent looked through it to see how to use it. I do notice that uxvismode.js says it does not support Internet Explorer.

My current thought for internet explorer is to clearMedia on collapse and to renderMedia on restore, then handle restoring the state to the flex app in flexinit.

ciait
4 Jun 2009, 9:03 AM
hi,

i try to run my Dashboard application from Ext2 to Ext3
this application use uxmedia.js and uxfusion.js to display fusionCharts
i got an error on line 636 El.addUnits is not a function.

With firebug i was able to see that addUnits is fonction of El.prototype
I try the change and it works

i am not able to explain why.





//Convert element height and width to inline style to avoid issues with display:none;
if(m.height || m.autoSize)
{
Ext.apply(m.style, {
//height:El.addUnits( m.autoSize ? '100%' : m.height ,El.prototype.defaultUnit)});
height:El.prototype.addUnits( m.autoSize ? '100%' : m.height ,El.prototype.defaultUnit)});
}
if(m.width || m.autoSize)
{
Ext.apply(m.style, {
//width :El.addUnits( m.autoSize ? '100%' : m.width ,El.prototype.defaultUnit)});
width :El.prototype.addUnits( m.autoSize ? '100%' : m.width ,El.prototype.defaultUnit)});
}
hope this help

hendricd
4 Jun 2009, 9:11 AM
hi,

i try to run my Dashboard application from Ext2 to Ext3
this application use uxmedia.js and uxfusion.js to display fusionCharts
i got an error on line 636 El.addUnits is not a function.

With firebug i was able to see that addUnits is fonction of El.prototype
I try the change and it works

i am not able to explain why.





//Convert element height and width to inline style to avoid issues with display:none;
if(m.height || m.autoSize)
{
Ext.apply(m.style, {
//height:El.addUnits( m.autoSize ? '100%' : m.height ,El.prototype.defaultUnit)});
height:El.prototype.addUnits( m.autoSize ? '100%' : m.height ,El.prototype.defaultUnit)});
}
if(m.width || m.autoSize)
{
Ext.apply(m.style, {
//width :El.addUnits( m.autoSize ? '100%' : m.width ,El.prototype.defaultUnit)});
width :El.addUnits( m.autoSize ? '100%' : m.width ,El.prototype.defaultUnit)});
}
hope this help

Ext 3 compat was addressed in googleSVn/trunk/media22 (http://code.google.com/p/uxmedia/source/browse/#svn/trunk/source/media22). I'll be releasing a new package for uxMedia 2.1 shortly.

Celandro
4 Jun 2009, 2:07 PM
I am having an extremely strange issue with the flex integration

In IE, everything works perfectly.
In firefox, onFlexBridge is never being called. Also, this.dom.getRoot, this.dom.releaseASObjects and all other flash related methods are never being created.

Everything was working fine until i added some code for a second flex based portlet. I reverted the code (I believe) but its still broken.

The swf does not appear to get into the loaded state either. It only shows a blank white screen which you can right click on and see the Settings and About Adobe menu.




Logic.app.PortletVolumeMonitor = Ext.extend(Logic.app.FlexPortlet,{
title:'Volume Monitor',
height: 330,
initComponent:function() {
var config = {
mediaCfg : {
id: 'FlexBridgeTest1',
url: 'FlexBridgeTest.swf',
autoSize:true
}
};
// Ext.apply(this, Ext.apply(this.initialConfig, config));
Ext.apply(this, config);
Logic.app.PortletVolumeMonitor.superclass.initComponent.apply(this, arguments);
},
});


Logic.app.FlexPortlet = Ext.extend(Ext.ux.Media.Flex.Portlet, {
// default config, can be overriden
title: 'Flex Portlet',
collapsible: false,
settings: false,
autoScroll: false,
resizeable: false,
closeable: true,

mediaCfg:{
url:null,
id: null,
height:300,
width:320
},
initComponent:function() {
var config = {
draggable: {
ddGroup:'portal',
startDrag : function(e){
if (Ext.isIE) {
this.panel.clearMedia();
}
},
endDrag : function(e){
if (Ext.isIE) {
this.panel.renderMedia();
}
}
}
};
Ext.apply(this, Ext.apply(this.initialConfig, config));
this.on({
scope:this,
flexinit:this.customFlexInit
});
Logic.app.FlexPortlet.superclass.initComponent.apply(this, arguments);
},

plugins: Ext.ux.PortletPlugin,
customFlexInit:function() {
alert("flex init")
}
});
Ext.reg('logicflexportlet', Logic.app.FlexPortlet);


Any ideas as to why the flex app is never being inited? The html generated for the panel is identical to what was on my test page.

Celandro
4 Jun 2009, 4:01 PM
PS. Calling Play seems to fix it:
Ext.getCmp('volumeMonitor').getInterface().Play()

The html generated (from firebug) is:

<object id="FlexBridgeTest1" class="x-media x-media-flex" name="FlexBridgeTest1" style="height: 100%; width: 100%;" data="FlexBridgeTest.swf" type="application/x-shockwave-flash">
<param value="FlexBridgeTest.swf" name="movie"/>
<param value="true" name="play"/>
<param value="false" name="loop"/>
<param value="false" name="menu"/>
<param value="high" name="quality"/>
<param value="#FFFFFF" name="bgcolor"/>
<param value="opaque" name="wmode"/>
<param value="sameDomain" name="allowscriptaccess"/>
<param value="false" name="allowfullscreen"/>
<param value="all" name="allownetworking"/>
<param value="bridgeName=FlexBridgeTest1" name="flashVars"/>
<div>
</div>
</object>

I can certainly hack a call to Play in a bunch of places but Im very curious as to what the root of the problem is.

hendricd
5 Jun 2009, 3:28 AM
@Celandro -- by chance, are you nesting those components in parent container with animated effects (eg. collapsible)? If so, you must disable that with animCollapse:false and make sure you are loading the uxvismode.js plugin script as well.

A variety of Ext transition effects will put the Flash object to sleep.

The problem is less of an issue on IE (of all things).

Celandro
5 Jun 2009, 9:11 AM
Unfortunately there are no animated effects. Unfortunately I can not easily get you a publicly accessable site.

I can verify the following works:



in uxflash.js:
line 102, change start to false
line 507, put a delayed called to Play() in pollReadyState
pollReadyState : function(cb, readyRE){
var media;

if(media= this.getInterface()){
if(typeof media.PercentLoaded != 'undefined'){
var perc = media.PercentLoaded() ;

this.fireEvent( 'progress' ,this , this.getInterface(), perc) ;
if( perc = 100 ) {
cb();
var dt = new Ext.util.DelayedTask(function() {this.getInterface().Play()},this,null);
dt.delay(100);
return;
}
}

this._countPoll++ > this._maxPoll || arguments.callee.defer(10,this,arguments);

}

},
Unfortunately, this breaks dragging in Firefox but luckily, its the same problem IE has so you need to do in your panel:


draggable: {
ddGroup:'something',
startDrag : function(e){
this.panel.saveSate();
this.panel.clearMedia();
},
endDrag : function(e){
this.panel.renderMedia();
}
}
this.on({
scope:this,
flexinit:this.restoreState
});

Writing restore and save state may be somewhat difficult but for our particular application, we just call the same javascript we are using to load the data into the flex app and the end user loses only the state they themselves modified (for example sorting or filtering). Adding more functions to the flex app to truly save the state and restore the full state would resolve this if needed.

You may have a better solution but the big pro to this solution is that it makes Firefox and IE identical in their handling of draggable. You also may be able to make some code in FlashPanel to by default add the clear and render medias to their start drag and end drag so your other users dont have to struggle as much as I have :)

hendricd
5 Jun 2009, 9:26 AM
ux.Media[.Flash/Flex] Components 2.1 are now available for Ext 2,3.

See first post for more details.

kirill533
7 Jun 2009, 12:24 PM
Hello!

This code shows empty window in my browser:



var win = new Ext.ux.Media.Window({
mediaCfg: {
mediaType :'QT',
url: 'http://common.local/extjs/extensions/media/demos/demo.mp3',
start :true,
controls : 'yes',
height :100,
width :280
}
});
win.show();

My FF shows quicktime controlls only if I use <embed> tag.
In uxmedia.js I found text "Notes: the <embed> tag is NOT used(or necessary) in this implementation". But It looks like it tag is required.

hendricd
7 Jun 2009, 4:06 PM
Hello!

This code shows empty window in my browser:



var win = new Ext.ux.Media.Window({
mediaCfg: {
mediaType :'QT',
url: 'http://common.local/extjs/extensions/media/demos/demo.mp3',
start :true,
controls : 'yes',
height :100,
width :280
}
});
win.show();
My FF shows quicktime controlls only if I use <embed> tag.
In uxmedia.js I found text "Notes: the <embed> tag is NOT used(or necessary) in this implementation". But It looks like it tag is required.

@kirill533 -- Is '.mp3' a registered mime-type (or configured) for the QUicktime player on your browser?. It may not be.

johnsilly57
7 Jun 2009, 7:47 PM
Hi, all,
I followed the FlexBridgeTest example with uxmedia2.1 release, which has flexpanel, my flexpanel is like this:




var flexPanel = new Ext.ux.Media.Flex.Panel({
//title:'Live'

id :

'swfPanelId'

//,xtype:'flexpanel'
,externalsNamespace:


'customFlashObj'

,mediaCfg : {
mediaType:'SWF'
,url:


'media/swf/webcast-debug.swf'

,id:


'SWFwebcastId'

,start :


true

,scripting :


true

//,controls:true
,height:294


//fixedheightforaspectratio

,width : 360
,params: {
allowScriptAccess :'sameDomain'
,quality :


'high'

,flashvars :{bridgeName:


'SWFwebcastId'}


},
boundExternals :[{name:'jsGetMediaDevices',returnType: 'xml'}]
}
}
);


When I make call to jsGetMediaDevices() like this:




var


flash = Ext.ComponentMgr.get('swfPanelId');

flash.getBridge().jsGetMediaDevices();


It said jsGetMediaDevices is undefined.

In the actionscript code, I have:




var


wasSuccessful:Boolean = ExternalInterface.addCallback("jsGetMediaDevices", asGetMediaDevices);


function


asGetMediaDevices() {

trace("calling viewCommute asGetMediaDevices...");
}


Could anybody tell me what is wrong?

Also I could not find the actionscript source code for
FlexBridgeTest.swf, so I could not figure out how is done for the FlexBridgeTest example on the actionscript side.

Thanks in advance.

John

mystix
7 Jun 2009, 7:53 PM
@johnsilly57 -- to prevent everyone from going blind, could you post code fragments in a human-readable size? and please format your code while you're at it. thanks.

johnsilly57
8 Jun 2009, 4:15 AM
Just reorganized the code, sorry for that.when I posted this from IE, the font is readable, but I just found out in Firefox, the font is too small to read, now I just changed again.

Also I just debugged the code deeper, I found in this call of uxflex.js:


getRoot : function(){
return this.dom.getRoot ? this.deserialize(this.dom.getRoot()): undefined;
},
this.dom.getRoot is undefined, so in order to define it, what should I do?
By the way, for the FlexBridgeTest example, this.dom.getRoot is defined.

Thanks

Hi, all,
I followed the FlexBridgeTest example with uxmedia2.1 release, which has flexpanel, my flexpanel is like this:



var flexPanel = new Ext.ux.Media.Flex.Panel({
id : 'swfPanelId'
,externalsNamespace: 'customFlashObj'
,mediaCfg : {
mediaType:'SWF'
,url: 'media/swf/webcast-debug.swf'
,id: 'SWFwebcastId'
,start : true
,scripting : true
,height:294
,width : 360
,params: {
allowScriptAccess :'sameDomain'
,quality : 'high'
,flashvars :{bridgeName:'SWFwebcastId'}
},
boundExternals :[{name:'jsGetMediaDevices',returnType: 'xml'}]
}


});

When I make call to jsGetMediaDevices() like this:

var flash = Ext.ComponentMgr.get('swfPanelId');
flash.getBridge().jsGetMediaDevices();

It said jsGetMediaDevices is undefined.

In the actionscript code, I have:


var wasSuccessful:Boolean = ExternalInterface.addCallback("jsGetMediaDevices", asGetMediaDevices);

function asGetMediaDevices() {
trace ("calling viewCommute asGetMediaDevices...");

}

Could anybody tell me what is wrong?

Also I could not find the actionscript source code for

FlexBridgeTest.swf, so I could not figure out how is done for the FlexBridgeTest example on the actionscript side.

Thanks in advance.

John

kirill533
8 Jun 2009, 6:50 AM
@kirill533 -- Is '.mp3' a registered mime-type (or configured) for the QUicktime player on your browser?. It may not be.

Yes, it is. When I open mp3 file directly in browser, Quicktime starts automaticly. And it works fine when I use <embed> tag.

It is not my problem. I think about my users. I see two correct ways:
1. Show information about how configure Quicktime properly if it is not.
2. Use <embed> tag for compatibility.

hendricd
8 Jun 2009, 6:52 AM
Yes, it is. When I open mp3 file directly in browser, Quicktime starts automaticly. And it works fine when I use <embed> tag.

It is not my problem. I think about my users. I see two correct ways:
1. Show information about how configure Quicktime properly if it is not.
2. Use <embed> tag for compatibility.

What version of uxMedia and Firefox does this apply to ?

kirill533
8 Jun 2009, 7:02 AM
What version of uxMedia and Firefox does this apply to ?

latest

ux.Media - 2.1
FireFox - 3.0.10
QuickTime Plug-in 7.6.2

hendricd
8 Jun 2009, 7:23 AM
latest

ux.Media - 2.1
FireFox - 3.0.10
QuickTime Plug-in 7.6.2

Just tested this mediaCfg, with same browser and QT plugin version. Rendered/Plays/Loops just fine. :-?



new Ext.ux.Media.Window({
title : 'MP3 QT Audio',
height : 70,
width : 310,
mediaCfg: {
mediaType :'QT'
,url :'sit.mp3'
,start :true
,controls :true
,scripting :true
,loop :true
,height :44
,width :280
,params: { wmode : 'opaque'}
}
}).show();

I'll see if I can add a QT config demo to the new Demo site.

hendricd
8 Jun 2009, 7:37 AM
Just reorganized the code, sorry for that.when I posted this from IE, the font is readable, but I just found out in Firefox, the font is too small to read, now I just changed again.

Also I just debugged the code deeper, I found in this call of uxflex.js:


getRoot : function(){
return this.dom.getRoot ? this.deserialize(this.dom.getRoot()): undefined;
},
this.dom.getRoot is undefined, so in order to define it, what should I do?
By the way, for the FlexBridgeTest example, this.dom.getRoot is defined.

Thanks

Hi, all,
I followed the FlexBridgeTest example with uxmedia2.1 release, which has flexpanel, my flexpanel is like this:



var flexPanel = new Ext.ux.Media.Flex.Panel({
id : 'swfPanelId'
,externalsNamespace: 'customFlashObj'
,mediaCfg : {
mediaType:'SWF'
,url: 'media/swf/webcast-debug.swf'
,id: 'SWFwebcastId'
,start : true
,scripting : true
,height:294
,width : 360
,params: {
allowScriptAccess :'sameDomain'
,quality : 'high'
,flashvars :{bridgeName:'SWFwebcastId'}
},
boundExternals :[{name:'jsGetMediaDevices',returnType: 'xml'}]
}


});

When I make call to jsGetMediaDevices() like this:

var flash = Ext.ComponentMgr.get('swfPanelId');
flash.getBridge().jsGetMediaDevices();

It said jsGetMediaDevices is undefined.

In the actionscript code, I have:


var wasSuccessful:Boolean = ExternalInterface.addCallback("jsGetMediaDevices", asGetMediaDevices);

function asGetMediaDevices() {
trace ("calling viewCommute asGetMediaDevices...");

}

Could anybody tell me what is wrong?

Also I could not find the actionscript source code for

FlexBridgeTest.swf, so I could not figure out how is done for the FlexBridgeTest example on the actionscript side.

Thanks in advance.

John

@johnsilly57 -- I had the bindExternals method and boundExternals cfg of the Flex (Flash subclass) disabled for testing. I'll post a current version to SVN shortly.

The .as examples source is available in the latest Flex SDK (upon which -- the ux.Media.Flex FAbridge emulation is based). Have you downloaded it?

Keep in mind also that ExternalInterface is a Flash specification, whereas the FABridge is unique to the Flex SDK.

hendricd
8 Jun 2009, 7:44 AM
@johnsilly -- Also note, that:




var flexPanel = new Ext.ux.Media.Flex.Panel({
id : 'swfPanelId'
,externalsNamespace: 'customFlashObj'
,mediaCfg : {
mediaType:'SWF' //not necessary
,url: 'media/swf/webcast-debug.swf'
,id: 'SWFwebcastId' //this IS the default bridgeName
,start : true
,scripting : true
,height:294
,width : 360
,params: {
allowScriptAccess :'sameDomain'
,quality : 'high'
,flashvars :{bridgeName:'SWFwebcastId'} //not necessary
},
boundExternals :[{name:'jsGetMediaDevices',returnType: 'xml'}]
}


});

johnsilly57
8 Jun 2009, 8:21 AM
@johnsilly57 -- I had the bindExternals method and boundExternals cfg of the Flex (Flash subclass) disabled for testing. I'll post a current version to SVN shortly.

The .as examples source is available in the latest Flex SDK (upon which -- the ux.Media.Flex FAbridge emulation is based). Have you downloaded it?

Keep in mind also that ExternalInterface is a Flash specification, whereas the FABridge is unique to the Flex SDK.

Hi, Hendricd, thanks very much for your response, I got the flex/flash/media code from SVN yestoday, you mean this version has bindExternals and boundExternals diabled? but when I used the FlexBridageTest for testing, it worked:


var flexPanel2 = new Ext.ux.Media.Flex.Panel({
id : 'tradeScheduleChart',
externalsNamespace: 'customFlashObj2',
mediaCfg : {
id: 'example2',
mediaType: 'SWF',
url: 'media/swf/FlexBridgeTest.swf',
start: true,
scripting: true,
height: 294,
width : 360,
params : {
allowScriptAccess :'sameDomain',
quality : 'high',
flashvars :{bridgeName:'example2'}
},
boundExternals :[
{name:'setTestData',returnType:'xml'}
]
}
});and:


var divFlash = Ext.ComponentMgr.get('tradeScheduleChart');
var bridge2 = divFlash.getBridge();
if(bridge2)
bridge2.setTestData(data);This code worked, it can populate data for the FlexBridgeTest.swf.

The .as file I am looking for is for FlexBridgeTest.swf, since I want to see how setTestData() function is defined inside the .as file, I could not find that code inside the the latest Flex SDK.

Thanks again.

John

kirill533
8 Jun 2009, 8:27 AM
So, thank you, hendricd. With this line

,params: { wmode : 'opaque'}
My browser shows controlls too.

hendricd
8 Jun 2009, 8:57 AM
@johnsilly57 -- Of coarse it worked. ;)
That's because you are accessing 'setTestData' thru the bridge, not the standard Flash.ExternalInterface:


var bridge2 = divFlash.getBridge();
if(bridge2)
bridge2.setTestData(data);I did not write the FlexBridgeTest.as example. Contact Celandro (http://extjs.com/forum/member.php?u=70859) for that.

Celandro
8 Jun 2009, 9:15 AM
@johnsilly57 -- Of coarse it worked. ;)
That's because you are accessing 'setTestData' thru the bridge, not the standard Flash.ExternalInterface:


var bridge2 = divFlash.getBridge();
if(bridge2)
bridge2.setTestData(data);I did not write the FlexBridgeTest.as example. Contact Celandro (http://extjs.com/forum/member.php?u=70859) for that.

Somehow the source got deleted.

http://poseidonguild.com/flextest/FlexBridgeTest-src.zip

Hendricd: Feel free to take the source for this and put it in svn somewhere so it doesnt get lost again. Its an extremely trivial example so should be easy to read.

As for getBridge returning null, it may be the same problem I was having in firefox where you had to manually call getInterface().Play() to initialize the flex app. I posted a fix a few pages back that involved modifying uxflash.js slightly. This is only if you have a blank white area where the flex app should be.

hendricd
8 Jun 2009, 9:20 AM
Somehow the source got deleted.

http://poseidonguild.com/flextest/FlexBridgeTest-src.zip

Hendricd: Feel free to take the source for this and put it in svn somewhere so it doesnt get lost again. Its an extremely trivial example so should be easy to read.

As for getBridge returning null, it may be the same problem I was having in firefox where you had to manually call getInterface().Play() to initialize the flex app. I posted a fix a few pages back that involved modifying uxflash.js slightly. This is only if you have a blank white area where the flex app should be.

Thanks for the source. I'm working on a more comprehensive Flex demo for the new Demo site anyway.

I'm still testing for FF issues. It seems dependent on the Flex SDK version, as the FABridge implementations have changed slightly over 3.1 - 3.3. I'll post again when know more...

johnsilly57
8 Jun 2009, 9:25 AM
@johnsilly57 -- Of coarse it worked. ;)
That's because you are accessing 'setTestData' thru the bridge, not the standard Flash.ExternalInterface:


var bridge2 = divFlash.getBridge();
if(bridge2)
bridge2.setTestData(data);I did not write the FlexBridgeTest.as example. Contact Celandro (http://extjs.com/forum/member.php?u=70859) for that.

Ok, so that means on the actionscript side, I cannot use standard Flash.ExternalInterface, that is why I want to see FlexBridgeTest.as example to know how it is done on the actionscript side.

Thanks for your great work.

John

hendricd
8 Jun 2009, 11:27 AM
@Celandro, et al --
Did some more testing, using a newer Flex SDK 3.3 and older Flex 3.2 implementations on the same page, and realized things broke after a recent update to Java's JRE 1.6.0_07. If you disable that release in your Java Control Panel (and restart your browser), Flex 3.3 apps (actually Play like they are supposed to) and send their FABridge initialization callbacks again on Firefox 3.10.

Pre-Flex 3.3 implementations are not affected by the JRE Update.

hendricd
8 Jun 2009, 11:41 AM
Ok, so that means on the actionscript side, I cannot use standard Flash.ExternalInterface, that is why I want to see FlexBridgeTest.as example to know how it is done on the actionscript side.

Thanks for your great work.

John
@johnsilly57 -- SVN for uxflex.js has been updated to re-enable the ExternalInterface/boundExternals stuff (but doubtful you'll need to be using that anyway with the FABridge). ;)

johnsilly57
8 Jun 2009, 12:31 PM
@johnsilly57 -- SVN for uxflex.js has been updated to re-enable the ExternalInterface/boundExternals stuff (but doubtful you'll need to be using that anyway with the FABridge). ;)

Thanks, hendricd, I am using Flex sdk3.2 compiler to generate swf file, I thought with Flex, the only way to call actionscript from javascript is to use FABridge, the ExternalInterface is for Flash generated swf only, is that right?

Thanks again
John

hendricd
8 Jun 2009, 12:42 PM
Thanks, hendricd, I am using Flex sdk3.2 compiler to generate swf file, I thought with Flex, the only way to call actionscript from javascript is to use FABridge, the ExternalInterface is for Flash generated swf only, is that right?

Thanks again
John

No, Flex apps can use either approach to talk to JS. In fact, the FABridge uses Flash's ExternalInterface to implement the Bridge.

With the latest uxflex.js from SVN you can now use either approach. (The FABridge is a bit more expensive in terms of resources, but much easier to use in Components)

Celandro
8 Jun 2009, 12:55 PM
@Celandro, et al --
Did some more testing, using a newer Flex SDK 3.3 and older Flex 3.2 implementations on the same page, and realized things broke after a recent update to Java's JRE 1.6.0_07. If you disable that release in your Java Control Panel (and restart your browser), Flex 3.3 apps (actually Play like they are supposed to) and send their FABridge initialization callbacks again on Firefox 3.10.+

Pre-Flex 3.3 implementations are not affected by the JRE Update.

:-?

Going to have to think about this. We can't tell our clients to uninstall a java plugin.

johnsilly57
8 Jun 2009, 12:59 PM
No, Flex apps can use either approach to talk to JS. In fact, the FABridge uses Flash's ExternalInterface to implement the Bridge.

With the latest uxflex.js from SVN you can now use either approach. (The FABridge is a bit more expensive in terms of resources, but much easier to use in Components)

Ok, got you, thanks very much, I just tested the ExternalInterface approach, my code looks like this:


var flexPanel = new Ext.ux.Media.Flex.Panel({
id : 'swfPanelId'
,externalsNamespace: 'customFlashObj'
,mediaCfg : {
url: 'media/swf/webcast-debug.swf'
,id: 'SWFwebcastId'
,start : true
,scripting : true
,height:294 //fixed height for aspect ratio
,width : 360
,params: {
allowScriptAccess :'sameDomain'
,quality : 'high'
},
boundExternals :[{name:'jsGetMediaDevices',returnType: 'xml'}]
}
}
);

var swfCmp = Ext.getCmp('swfPanelId');
swfCmp.customFlashObj.jsGetMediaDevices();
var wasSuccessful:Boolean = ExternalInterface.addCallback("jsGetMediaDevices", asGetMediaDevices);
function asGetMediaDevices() {
trace("calling viewCommute asGetMediaDevices...");
}But it caused firefox crashed. From debugger, I can see the customFlashObj exists, and also it has the function jsGetMediaDevices(), but when called this function, it crashed firefox.

Any error in my code?

John

hendricd
8 Jun 2009, 1:09 PM
Ok, got you, thanks very much, I just tested the ExternalInterface approach, my code looks like this:


var flexPanel = new Ext.ux.Media.Flex.Panel({
id : 'swfPanelId'
,externalsNamespace: 'customFlashObj'
,mediaCfg : {
url: 'media/swf/webcast-debug.swf'
,id: 'SWFwebcastId'
,start : true
,scripting : true
,height:294 //fixed height for aspect ratio
,width : 360
,params: {
allowScriptAccess :'sameDomain'
,quality : 'high'
},
boundExternals :[{name:'jsGetMediaDevices',returnType: 'xml'}]
}
}
);

var swfCmp = Ext.getCmp('swfPanelId');
swfCmp.customFlashObj.jsGetMediaDevices();
var wasSuccessful:Boolean = ExternalInterface.addCallback("jsGetMediaDevices", asGetMediaDevices);
function asGetMediaDevices() {
trace("calling viewCommute asGetMediaDevices...");
}But it caused firefox crashed. From debugger, I can see the customFlashObj exists, and also it has the function jsGetMediaDevices(), but when called this function, it crashed firefox.

Any error in my code?

John
If you change the returnType in:
boundExternals :[{name:'jsGetMediaDevices',returnType: 'string'}]

what happens? Are you returning something/anything compatible?

console.log('your world'); ;)

hendricd
8 Jun 2009, 1:12 PM
:-?

Going to have to think about this. We can't tell our clients to uninstall a java plugin.

Yes, it'll be tricky narrowing down. It might be a combination of Flash Player (I'm using 10) and/or the JRE build included in the SDK, the FABridge.as version, or other.

johnsilly57
8 Jun 2009, 1:42 PM
If you change the returnType in:
boundExternals :[{name:'jsGetMediaDevices',returnType: 'string'}]

what happens? Are you returning something/anything compatible?

console.log('your world'); ;)


I changed to:


boundExternals :[{name:'jsGetMediaDevices',returnType: 'string'}]and


var wasSuccessful:Boolean = ExternalInterface.addCallback("jsGetMediaDevices", asGetMediaDevices);
function asGetMediaDevices() :String {
return "hi";
}it still crashed.

John

hendricd
8 Jun 2009, 1:44 PM
I changed to:


boundExternals :[{name:'jsGetMediaDevices',returnType: 'string'}]and


var wasSuccessful:Boolean = ExternalInterface.addCallback("jsGetMediaDevices", asGetMediaDevices);
function asGetMediaDevices() :String {
return "hi";
}it still crashed.

John

How about just:
boundExternals :['jsGetMediaDevices'],

johnsilly57
8 Jun 2009, 1:57 PM
How about just:
boundExternals :['jsGetMediaDevices'],

I tried:


boundExternals :['jsGetMediaDevices']It still crashed Firefox, the crashing code is at the line 473 of uxflash.js:


r = obj.CallFunction(c);with c value equals:

"<invoke name="jsGetMediaDevices" returntype="javascript"><arguments></arguments></invoke>"

Both obj and CallFunction() exist.

Thanks

John

johnsilly57
8 Jun 2009, 5:00 PM
Ok, hendricd, thanks a lot, finally I got both ExternalInterface.addCallBack and the FABridge ways working, it is my bad that I did not code the actionscript right.

Thanks very much.

John

johnsilly57
9 Jun 2009, 8:46 PM
Hi, all,

I have the following code:



var flexPanel = new Ext.ux.Media.Flex.Panel({
...
,mediaCfg : {
url: 'webcast-debug.swf'
,id: 'SWFwebcastId'
,start : true
,scripting : true
,height: 240 //fixedheightforaspectratio
,width : 320
,params: {

allowScriptAccess :'sameDomain'
,quality : 'high'
},
...
}

);

so the size for the video window is {320, 240}, I coded a Box inside the swf with the same size: {320, 240}, when video shows up, there is always a 10px margin around the video with a swf generated horizontal and vertical scrollbars, if I reduced the UI size enough in the swf, the scrollbars will be gone, but still 10px margin boundary around the video still exists, how can I remove the margin and make the video fit the size {320, 240} specifed from the mediaCfg?
If I remove the mediaCfg width and height, the problem still exists.
Also if I donot create the Box inside the swf, the video will never show up, not sure why?

Thanks very much in advance.

John

damian79
11 Jun 2009, 11:58 AM
Hello Doug,

I'm stuck with some problem, I have two mediapanels running inside two tabs (one for each), DOM Reflow is fixed with hideMode:'nosize', so I can switch with no reload of the media object, by the way I did't use the visibility plugin and it worked ok.

The problem I have is that those two tabs are inside a border layout with collapsible property set to true, so when I collapse that region the DOM reflow occurs, I have used the Ext.ux.plugin.VisibilityMode plugin for the parent container (the region which has the tabpanel) and I had no luck, I also set bubble to true and nothing...

Any clue?? I will appreciate your help.

Greetings
Damian

hendricd
11 Jun 2009, 12:23 PM
Hello Doug,

I'm stuck with some problem, I have two mediapanels running inside two tabs (one for each), DOM Reflow is fixed with hideMode:'nosize', so I can switch with no reload of the media object, by the way I did't use the visibility plugin and it worked ok.

The problem I have is that those two tabs are inside a border layout with collapsible property set to true, so when I collapse that region the DOM reflow occurs, I have used the Ext.ux.plugin.VisibilityMode plugin for the parent container (the region which has the tabpanel) and I had no luck, I also set bubble to true and nothing...

Any clue?? I will appreciate your help.

Greetings
Damian

What ux.Media.*, and Ext version(s)?

Can you post some of the your layout?

damian79
11 Jun 2009, 1:04 PM
What ux.Media.*, and Ext version(s)?

Can you post some of the your layout?

I'm using the last ux.Media, version from SVN. and Ext 2.2,

I hate silverlight but visifire charts are pretty for the client :p



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

{ //south
region:'south',
layout:'fit',
//collapsible: true, //this makes DOM reflow
border:false,
title:'Incidencias',
split:true,
height: 200,
minSize: 200,
maxSize: 200,
margins:'0 0 0 0',
items:{ //charts and grid data here
layout:'border',
border:false,
items:[
{
region:'west',
border:false,
layout:'fit',
collapsible: true,
split:true,
collapseMode:'mini',
border:false,
width:230,
items: absenceGrid
},
{
region:'center', //tabs region
border:false,
layout:'fit',
items: new Ext.TabPanel(
{
plugins: V,
border:false,
defaults:{ plugins: V },
activeTab:0,
items:[
{ //mediapanel 1
title :'Mensual',
xtype :'mediapanel',
hideMode:Ext.isIE ? 'display' : 'nosize',
mediaMask:false,
mediaCfg:{
mediaType:'SILVERLIGHT2',
url:'SL.Visifire.Charts.xap',
start:true,
params:{
source: 'SL.Visifire.Charts.xap',
initParams: logLeve1,controlId=monthChart,setVisifireChartsRef=setVisifireChartsRef1,onChartLoaded=visifireChartLoaded1,dataXml=getVisifireDataXml1,widt600,height=100',
background:'white',
enableHtmlAccess:'true',
windowless:'false'
}

}
},
{ //mediapanel2
title :'Historico',
xtype :'mediapanel',
hideMode:Ext.isIE ? 'display' : 'nosize',
mediaMask :false,
mediaCfg:{
mediaType:'SILVERLIGHT2',
url:'SL.Visifire.Charts.xap',
start:true,
params:{
source: 'SL.Visifire.Charts.xap',
initParams: 'logLevel=1,controlId=HistoricChart,setVisifireChartsRef=setVisifireChartsRef2,onChartLoaded=visifireChartLoaded2,dataXml=getVisifireDataXml2,width=600,height=100',
background:'white',
enableHtmlAccess:'true',
windowless:'false'
}
}
}
]
})

}
]
}
}
sorry about the tab mess.

Thank you.
Damian

hendricd
11 Jun 2009, 5:20 PM
@Damian --Any region that is reflow-sensitive (to its children) will also require

animCollapse:false,
animFloat:false

but, it also looks like you're overnesting panels anyway, Make the tabPanel the center region of the South. It is a Panel. Same with the south region in general, it's over-nested too.

For your layout, the vismode plugin is only really required for the tabPanel.

damian79
11 Jun 2009, 7:53 PM
@Damian --Any region that is reflow-sensitive (to its children) will also require

animCollapse:false,
animFloat:false

but, it also looks like you're overnesting panels anyway, Make the tabPanel the center region of the South. It is a Panel. Same with the south region in general, it's over-nested too.

For your layout, the vismode plugin is only really required for the tabPanel.

Thanks Doug! I appreciate your quick response. I will take care of my overnesting issues and do some tests with different configurations from your mediademo to see what's wrong, but many thanks.

Greetings
Damian

Sesshomurai
13 Jun 2009, 8:31 PM
Strange problem related to my managed iframe that shows a JW Player flash video.

I show a window that shows the player and the video plays fine. I close the window.

Now, the right mouse clicks elsewhere in my app do not seem to get fired because my popup menu no longer displays. It only happens after I _close_ the window with the video player in it.

Is this related to the EventManager patch? I'm not using it (wasn't sure how to apply it).

thanks for tips gang!

kirill533
14 Jun 2009, 4:12 PM
File uxmedia.js overrides some library`s code. And this bug occurs: "me.dom is null".

I show it there:

Page with uxmedia.js:
http://master-test.net/public/bug2.htm

Page without uxmedia.js:
http://master-test.net/public/bug.htm

I use FF 3.0

hendricd
14 Jun 2009, 6:22 PM
File uxmedia.js overrides some library`s code. And this bug occurs: "me.dom is null".

I show it there:

Page with uxmedia.js:
http://master-test.net/public/bug2.htm

Page without uxmedia.js:
http://master-test.net/public/bug.htm

I use FF 3.0
@kirill533 -- This occurs for two primary reasons:

1) Line 932 of uxMedia, patches Ext.Element.remove method to nullify the Element's dom property after it is removed (to prevent leaks/orphans for IE), which is why the error is raised with this statement:
if (me.dom.className) {2) Ext.Button does not cleanup dependent listeners (mouseover/mouseout) before destruction.

You basicly have two choices:
Remark-out line line 932 of uxMedia:

// this.dom = null; //clear ANY DOM references.. and/or report the errant Ext.Button cleanup behaviour as a bug.

Sesshomurai
15 Jun 2009, 8:01 PM
Some more investigation of my problem with my popupmenus missing after closing a window with media player in it reveals that whole chunks of my application DOM get removed. entire sets of objects in the global namespace disappear after closing the media window.

I am using FF3/Linux. I create my window like this, taken mostly from the examples:



var flashVideo = {
text: name,
winCfg: {
_cls:'FlashWindow',
height:340,
width: 410,
externalsNamespace : 'JWP',
autoMask : true, //set true here because this player provides feedback when ready
listeners:{

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 externalInterface binding we defined earlier
with(C.JWP){

addModelListener("STATE",cbName);
sendEvent('PLAY','true');
}
},
delay : 100
}
},
config:{
mediaType : 'JWP',
url : 'ext3/examples/media3/jwl/player.swf',
autoSize : true,
volume : 25,
start :false,
loop :false,
scripting :'always',

//ExternalInterface bindings
boundExternals : ['sendEvent' ,
'addModelListener',
'addControllerListener',
'addViewListener',
'getConfig',
'getPlaylist'],
params:{
wmode :'opaque'
,
allowfullscreen : true
,
swliveconnect : true
,
flashVars: {
play :'@start'
,
file :'http://localhost/symphony/'+url
//,file :'http://content.bitsontherun.com/videos/6AJT5nbx.m4v'
,
duration : 30
,
stretching :'fill'
,
fullscreen : true
,
volume :'@volume'
// ,tracecall : 'JWPtrace' //debug aid
}

}
}
}




function showMedia(NA){
var winClass = (NA.winCfg?NA.winCfg._cls:null) || 'MediaWindow';
vwin = Ext.getCmp('viewWin');

if(vwin){
vwin.close();
vwin=null;
}
var mConfig = Ext.apply({},NA.config);

vwin = new Ext.ux[winClass]
(Ext.apply(
{
id :'viewWin'
,
height : NA.winCfg.autoHeight? null : 430
,
width : NA.winCfg.autoWidth? null :430
,
mediaMask : {
autoHide : 2000
} //default 2 second auto-hide mask
,
autoMask : false
,
minHeight : (parseInt(mConfig.height,10)||0)+32
,
collapsible: true
// ,autoScroll : false
,
hideMode :'nosize'
,
constrain : true
,
renderTo : document.body
,
title : (NA.tabTitle || NA.text || "Who knows?")
,
mediaCfg : mConfig
,
listeners : NA.listeners || false
,
tools: [{
id:'refresh',
handler:function(e,t,p){
p.renderMedia();
},
qtip: {
text:'Refresh the Media'
}
}]
,
plugins: !Ext.isIE ? new Ext.ux.plugin.VisibilityMode({
mode:'x-hide-nosize',
hideMode:'nosize'
}) : null
}
,NA.winCfg || {})
);
vwin.show();

}


I thought maybe the renderTo: document.body might be responsible for trashing my global DOM objects, but removing that had no noticeable affect.

mystix
15 Jun 2009, 9:01 PM
2) Ext.Button does not cleanup dependent listeners (mouseover/mouseout) before destruction.


i scanned the Ext.Button code for orphaned mouseover / mouseout handlers, but those are getting removed correctly (by Ext.Component#purgeListeners()).

the handlers that don't get removed onDestroy() are


onMouseOver: function(e) {
if (!this.disabled) {
var internal = e.within(this.el, true);
if (!internal) {
this.el.addClass('x-btn-over');
if (!this.monitoringMouseOver) {
Ext.getDoc().on('mouseover', this.monitorMouseOver, this);
this.monitoringMouseOver = true;
}
this.fireEvent('mouseover', this, e);
}
if (this.isMenuTriggerOver(e, internal)) {
this.fireEvent('menutriggerover', this, this.menu, e);
}
}
},

and


onMouseDown: function(e) {
if (!this.disabled && e.button === 0) {
this.getClickEl(e).addClass('x-btn-click');
Ext.getDoc().on('mouseup', this.onMouseUp, this);
}
},


the following code should resolve the issue:


Ext.override(Ext.Button, {
onDestroy: function() {
var doc = Ext.getDoc();
doc.un('mouseover', this.monitorMouseOver, this);
doc.un('mouseup', this.onMouseUp, this);

if (this.rendered) {
Ext.ButtonToggleMgr.unregister(this);
}
}
});


p.s. reported this as a bug in the following thread:
71439
bug has just been fixed by @evan in SVN.

hendricd
16 Jun 2009, 3:22 AM
Strange problem related to my managed iframe that shows a JW Player flash video.

I show a window that shows the player and the video plays fine. I close the window.

Now, the right mouse clicks elsewhere in my app do not seem to get fired because my popup menu no longer displays. It only happens after I _close_ the window with the video player in it.

Is this related to the EventManager patch? I'm not using it (wasn't sure how to apply it).

thanks for tips gang!


Some more investigation of my problem with my popupmenus missing after closing a window with media player in it reveals that whole chunks of my application DOM get removed. entire sets of objects in the global namespace disappear after closing the media window.

I am using FF3/Linux. I create my window like this, taken mostly from the examples:



var flashVideo = {
text: name,
winCfg: {
_cls:'FlashWindow',
height:340,
width: 410,
externalsNamespace : 'JWP',
autoMask : true, //set true here because this player provides feedback when ready
listeners:{

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 externalInterface binding we defined earlier
with(C.JWP){

addModelListener("STATE",cbName);
sendEvent('PLAY','true');
}
},
delay : 100
}
},
config:{
mediaType : 'JWP',
url : 'ext3/examples/media3/jwl/player.swf',
autoSize : true,
volume : 25,
start :false,
loop :false,
scripting :'always',

//ExternalInterface bindings
boundExternals : ['sendEvent' ,
'addModelListener',
'addControllerListener',
'addViewListener',
'getConfig',
'getPlaylist'],
params:{
wmode :'opaque'
,
allowfullscreen : true
,
swliveconnect : true
,
flashVars: {
play :'@start'
,
file :'http://localhost/symphony/'+url
//,file :'http://content.bitsontherun.com/videos/6AJT5nbx.m4v'
,
duration : 30
,
stretching :'fill'
,
fullscreen : true
,
volume :'@volume'
// ,tracecall : 'JWPtrace' //debug aid
}

}
}
}


function showMedia(NA){
var winClass = (NA.winCfg?NA.winCfg._cls:null) || 'MediaWindow';
vwin = Ext.getCmp('viewWin');

if(vwin){
vwin.close();
vwin=null;
}
var mConfig = Ext.apply({},NA.config);

vwin = new Ext.ux[winClass]
(Ext.apply(
{
id :'viewWin'
,
height : NA.winCfg.autoHeight? null : 430
,
width : NA.winCfg.autoWidth? null :430
,
mediaMask : {
autoHide : 2000
} //default 2 second auto-hide mask
,
autoMask : false
,
minHeight : (parseInt(mConfig.height,10)||0)+32
,
collapsible: true
// ,autoScroll : false
,
hideMode :'nosize'
,
constrain : true
,
renderTo : document.body
,
title : (NA.tabTitle || NA.text || "Who knows?")
,
mediaCfg : mConfig
,
listeners : NA.listeners || false
,
tools: [{
id:'refresh',
handler:function(e,t,p){
p.renderMedia();
},
qtip: {
text:'Refresh the Media'
}
}]
,
plugins: !Ext.isIE ? new Ext.ux.plugin.VisibilityMode({
mode:'x-hide-nosize',
hideMode:'nosize'
}) : null
}
,NA.winCfg || {})
);
vwin.show();

}
I thought maybe the renderTo: document.body might be responsible for trashing my global DOM objects, but removing that had no noticeable affect.

@Sesshomurai -- Your bouncing around too much. First an IFRAME, then ux.Media.Flash component. Please post an actual component configuration you are contemplating/playing-with. These little fragments say nothing about what you are trying.

Sesshomurai
16 Jun 2009, 4:57 AM
@Sesshomurai -- Your bouncing around too much. First an IFRAME, then ux.Media.Flash component. Please post an actual component configuration you are contemplating/playing-with. These little fragments say nothing about what you are trying.

I'm sorry about that. The configuration I posted above is exactly what I'm using. I'm not sure the correct terminology (iframe/media frame etc?) but you can see from my code above. It plays a flash JW Player video in a window. I took the configs from the demo and made minor adjustments. It plays the video fine. Closing the window destroys many objects in my global DOM.

Previously, I only noticed my popupmenu's weren't showing after closing the "media window?" and thought it related to the right mouse button, but come to find that the javascript objects simply disappeared from the DOM and others as well.

That's about all I know right now.

I appreciate any leads that might come to mind! Thanks for this awesome code too.

PS. I'm using the latest 3.0 uxmedia code.

hendricd
16 Jun 2009, 5:14 AM
@Sesshomurai -- See if it happens with this JWPlayer demo (http://demos.theactivegroup.com/demodesk.html?demo=media&script=jwplayer) I just posted. (The site is run on the latest Ext 3.0 SVN build)

BTW: The current version for ux.Media products is 2.1.

Sesshomurai
16 Jun 2009, 12:10 PM
I am using 2.1, but just including the .js scripts via normal html and not your dependency packer system (looks good though).

Anyway, I seem to have narrowed the culprit of the missing DOM to this line of code in uxmedia.js, using FF3/linux.



clearMedia : function(){

var mo;

if(Ext.isReady && (mo = this.mediaObject)){

mo.remove(true,true);

}

this.mediaObject = null;

return this;

},


I can't say for sure if its related, but if I comment out that line, my menus (and other DOM objects) don't get trashed. Still narrowing though...

I will look closely at your example and map the configs onto my code so my app uses it and see.

Thanks a ton!

hendricd
16 Jun 2009, 12:19 PM
@Sesshomurai -- Flash on Linux has long been frought with problems. What Flash version is installed there?

Does the Demo link I gave you, run?

Good luck.

Sesshomurai
16 Jun 2009, 1:39 PM
Yeah, the demo ran fine on its own, but I guess I need to integrate it into my app (which also does things like dynamic dependency loading of javascript, etc.) and see how it behaves there.

I have no problem running the player and viewing flash videos, but so far it seems the media library javascript code might inadvertently be affecting some of my apps global DOM objects (i.e. this could really be a javascript issue and not related directly to flash or the player).

I believe I have Flash 9 installed.

I'll post more exact details after some further tracing.

damian79
19 Jun 2009, 3:31 PM
@Damian --Any region that is reflow-sensitive (to its children) will also require

animCollapse:false,
animFloat:false

but, it also looks like you're overnesting panels anyway, Make the tabPanel the center region of the South. It is a Panel. Same with the south region in general, it's over-nested too.

For your layout, the vismode plugin is only really required for the tabPanel.

Hi Doug, could you take a look at this problem:

take your mediademo example and at the west region there is an accordion, look at clock item and replace the url with some youtube content..

with FF I tried to collapse the region and the video stops and reloads.. with IE, the video doesn't stop but the sound goes out. Really weird.

I would like to be able to collapse regions which have media content inside.

Do you have some advise for this?

thank you.
Damian

dulisse.simone
20 Jun 2009, 10:07 AM
I'm new in using extjs... and so i 'm trying to learn from the tutorial...

I have this code..

var tabs = new Ext.TabPanel({
renderTo: Ext.getBody(),
enableTabScroll:true,
activeTab: 0,
items: [{
title: 'Home', <-------HERE I'D LIKE TO INSERT THE MEDIA PANEL...
html:'wsedws'
}]
});

how can i do it??

hendricd
20 Jun 2009, 10:14 AM
@dulisse.simone--
Here (http://demos.theactivegroup.com/demodesk.html?demo=media&script=jwplayer)is an online demo for a Flash video/audio player to get you started.

The items mediaCfg determines what (and how its) rendered in the component, but what type of media are trying to render ?

damian79
21 Jun 2009, 8:51 PM
Hi Doug, could you take a look at this problem:

take your mediademo example and at the west region there is an accordion, look at clock item and replace the url with some youtube content..

with FF I tried to collapse the region and the video stops and reloads.. with IE, the video doesn't stop but the sound goes out. Really weird.

I would like to be able to collapse regions which have media content inside.

Do you have some advise for this?

thank you.
Damian

Hi Doug,

Using Ext 2.2, uxmedia 2.1 files, and using your mediademo.html example from uxmedia2.0 and changing from



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

to

plugins: [new Ext.ux.plugin.VisibilityMode({hideMode:'nosize'}) ]

Having a flash video playing when collapsing west region, on IE7 works fine, it doesn't restart the video, but in FF3 the video stops when collapsing, any suggestions to make it work on FF3?

by the way, I saw that in svn you have an ext 3.0 version of your uxmedia, do you recommend upgrading?

many thanks
Damian

hendricd
22 Jun 2009, 3:18 AM
Having a flash video playing when collapsing west region, on IE7 works fine, it doesn't restart the video, but in FF3 the video stops when collapsing, any suggestions to make it work on FF3?

by the way, I saw that in svn you have an ext 3.0 version of your uxmedia, do you recommend upgrading?

@damian- --Yes you'll want to use the latest from SVN. You'll also want to add

animCollapse : false
animFloat: false

for all browsers to your west region, and apply an instance of the VisibilityMode plugin to that region as well.

Flash will its Javascript bindings without them.

damian79
24 Jun 2009, 9:58 AM
@damian- --Yes you'll want to use the latest from SVN. You'll also want to add

animCollapse : false
animFloat: false

for all browsers to your west region, and apply an instance of the VisibilityMode plugin to that region as well.

Flash will its Javascript bindings without them.

Thanks Doug, I think it is late for me to upgrade since I have other extensions that only work for ext 2.2 version, I will absolutely do the upgrade in my next project.

Do you have a clue on why using ext 2.2, , uxmedia 2.1 and FF3, collapsible regions still reflow my media content (a silverlight but also flash stops and js bidings are lost).. on IE7 works ok! reflow doesn't happen, I have follow your advice of using the visimode plugin and the animCollapse : false, animFloat: false config.

by the way, on your mediaTypes, for silverlight update to this (you still have beta configs)


SILVERLIGHT2 : {
tag : 'object'
,cls : 'x-media x-media-silverlight'
,type :"application/x-silverlight-2"
,data : "data:application/x-silverlight,"
,params : { MinRuntimeVersion: "2.0" }
,unsupportedText: '<a href="http://go2.microsoft.com/fwlink/?LinkID=114576&v=2.0"><img style="border-width: 0pt;" alt="Get Microsoft Silverlight" src="http://go2.microsoft.com/fwlink/?LinkID=108181"/></a>'
}


Thank you Doug.
Damian

hendricd
24 Jun 2009, 10:08 AM
@damian -- Try the VERY latest version of uxvismode (http://uxdocs.theactivegroup.com/repo/trunk/Ext/ux/plugin/uxvismode.js), and leave the hideMode: 'whatever' off your layout configs when you apply it. Beyond that, I'd have to see more of your layout code.

Thanks for SL2 update! ;)

NOSLOW
2 Jul 2009, 5:06 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?


I'm encountering the same problem and was able to track it down to the object tag used in this implementation. For whatever reason, the object tag calls the URL specified in the "data" attribute twice. You can see for yourself by trying this simple example, replacing the "data" attribute value with a URL to your own server:



<html>
<head>
<title>PDF in Object Tag</title>
</head>

<body>
<h1>PDF Object:</h1>
<object type="application/pdf" data="http://example.com/render_pdf/123" height="400" width="500"></object>
</body>
</html>

BTW, embed tag also calls the server twice:


<html>
<head>
<title>PDF in Embed Tag</title>
</head>

<body>
<h1>PDF Object:</h1>
<embed src="http://example.com/render_pdf/123" height="400" width="500"></embed>
</body>
</html>
So if your URL links to a dynamically generated PDF that gets streamed back to the client (as apposed to a link to a previoulsy generated static PDF saved on the server), your server will be generating the streaming the PDF twice every time you go to view it. Since this appears to be the behavior of the object and embed tags, I don't know if it can be fixed. I guess I'll revert back to displaying the pdf old-school in a new browser window:s

hendricd
2 Jul 2009, 5:10 AM
@Noslow -- What browser(s) are involved ?

NOSLOW
2 Jul 2009, 5:28 AM
Both Firefox 3.5 and IE7 call the server twice with the object tag example. Just tested in Opera 9.64 and it only called it once. If I enable Firebug's Net tab, I see the 2 server requests being made in immediate succession. Any ideas?

hendricd
2 Jul 2009, 5:30 AM
@noslow -- Is suspect what you are seeing are symptoms of another problem. DOM-reflow.

On most browsers, dom reflow causes the <OBJECT/EMBED/IFRAME> Elements to reload each time upstream reflow occurs.

The trick is to mimimize reflow.

This Ext 3.0 uxMedia demo (http://demos.theactivegroup.com/demodesk.html?demo=media&script=acrobat), shows the proper use of uxvismode plugin to solve most reflow issues.

Give it a shot. ;)

dulisse.simone
2 Jul 2009, 6:37 AM
@dulisse.simone--
Here (http://demos.theactivegroup.com/demodesk.html?demo=media&script=jwplayer)is an online demo for a Flash video/audio player to get you started.

The items mediaCfg determines what (and how its) rendered in the component, but what type of media are trying to render ?

i'm trying to render a simple xml file.
I'm using the 3.0 version , and i'd like having the mediapanel into the central region of a wiewport...
what's the correct version of uxmedia to use for ext3.0?
thanks

hendricd
2 Jul 2009, 6:42 AM
i'm trying to render a simple xml file.
I'm using the 3.0 version , and i'd like having the mediapanel into the central region of a wiewport...
what's the correct version of uxmedia to use for ext3.0?
thanks

Please explain. If you're just displaying the XML in a Panel, there are several ways of doing it without needing ux's.

dulisse.simone
2 Jul 2009, 7:12 AM
i' d like to know every ways , because I have to insert in the panel also xml files and ,for example ,also powerpoint and pdf files.
thanks

hendricd
2 Jul 2009, 7:42 AM
i' d like to know every ways , because I have to insert in the panel also xml files and ,for example ,also powerpoint and pdf files.
thanks

@dulisse.simone --
Recommendations:

For rendering
XML : use the ux.ManagedIFramePanel, (recommended if you need Form POST support)

{
xtype: 'iframepanel',
defaultSrc : 'some.xml'
}or,

you can even define your own ux.Media.mediaType to add support for any other browser plugins/adaptations you find along the way (GET-only Ajax support):


Ext.ux.Media.mediaTypes['MYXML'] = { //DomHelper config with macro support
tag : 'iframe',
src : '@url',
cls : 'my-xml-preview',
style : {overflow : 'auto'}
};

comp.add({
xtype: 'mediapanel',
mediaCfg : {
mediaType : 'MYXML',
url : 'some.xml'
}
});
for PPT: use ux.Media's existing (experimental) mediaType definition 'POWERPOINT': (This will likely be IE only )


{
xtype: 'mediapanel',
mediaCfg : {
mediaType : 'POWERPOINT',
url : 'test.ppt',

//(default) Tweak as necessary to see what non-IE browsers have plugin/mime support installed for Office
type : : 'application/vnd.ms-powerpoint',

//(default) Might adjust this for desired Office version support
classid :"CLSID:EFBD14F0-6BFB-11CF-9177-00805F8813FF"}),
unsupportedText: ' You need Office 35, Fool. ' //optional
}
}
PDF: See this demo (http://demos.theactivegroup.com/demodesk.html?demo=media&script=acrobat).

dulisse.simone
2 Jul 2009, 8:36 AM
i have tried in several ways but always doesn't appear nothing when i click on the menu.
The js file is uncorrect...
Please can you help me ??
In this simple example i give you, i'd like to insert the file green.xml on the central panel...
Please scuse my ignorance(i'm new in using ext),

This is the html code....


<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<link rel="stylesheet" type="text/css" href="ext-3.0-rc1.1/resources/css/ext-all.css">
<script type="text/javascript" src="ext-3.0-rc1.1/adapter/ext/ext-base.js"></script>

<script type="text/javascript" src="ext-3.0-rc1.1/ext-all-debug.js"></script>
<script type="text/javascript" src="ext-3.0-rc1.1/uxmedia.js"></script>
<title id="page-title">help</title>
<script type="text/javascript" src="ext-3.0-rc1.1/wiewport2.js"></script>
</head>
<body>
</body>
</html>
and this is the js code....


Ext.BLANK_IMAGE_URL = 'ext-3.0-rc1.1/resources/images/default/s.gif';

Ext.onReady(function() {
var testo;
var tabs = new Ext.TabPanel({
renderTo: Ext.getBody(),
enableTabScroll:true,
activeTab: 0,
items: [{
title: 'Home',
html: 'this is a panel with a simple html'

}]
});


new Ext.Viewport({
layout: 'border',
items: [{
region: 'north',
html: ' <center> help me!!!</center>',
height:300,
autoHeight: true,
autoWidth:true,
border: false,
margins: '0 0 5 0'
},{

region: 'west',
collapsible: true,
title: 'Menu ',
xtype: 'treepanel',
width: 200,
autoScroll: true,
split: true,
loader: new Ext.tree.TreeLoader(),
root: new Ext.tree.AsyncTreeNode({
expanded: true,
children: [ {
text: 'something',

leaf: false,
id:6,
children:[{
text: 'green'
,id :'z'
,leaf:true
}]
}]
}),
rootVisible: false,
listeners: {

click: function(n) {
tabs.add({
title: n.text,
iconCls: 'tabs',
items:[{
xtype: 'iframepanel',
defaultSrc : 'green.xml'
}]
,closable:true
}).show();
}

}
},



{
region: 'center',
items: [ tabs ]

}, {
region: 'south',
title: 'Information',
collapsible: true,
html: 'thanks for help me',
split: true,
height: 100,
autoHeigth:true,
minHeight: 100
}]
});
});

hendricd
2 Jul 2009, 8:46 AM
@dulisse.simone --

Further advice. Start with the 'shell' of your overall layout. Get each region sized and working properly. Review the Layout /examples more thoroughly.

You'e not quite ready to tackle all these media issues without a basics of Layout construction.

cheenu1979
12 Jul 2009, 11:33 PM
Hi there,
I am a newbie to EXTJS, am using MediaPanel to display PDF files using JSON Store to get the file names from server and display in the Panel one by one using pagingBar.
Everything seems to work fine except few issues in both FF and IE

In FF 3.5
am getting huge grey area in PDF component followed by actual Content. Please look at the image.

In IE 7 & 8
grey area isnt there, but the height of the component is less.

same code behaves differently in 2 different browsers.

here is the code snippet :

var pdfPanel = new Ext.ux.MediaPanel(
{
id: "pdfViewer",
loadMask: true,
xtype: 'mediapanel',
height:'100%',
//width: 710,
mediaCfg:
{
mediaType: 'PDFFRAME',
autoSize:true,
height:'100%',
url: article_path,
unsupportedText: 'PDF viewer is not installed.'
}
});

pdfPanel.renderMedia();

this.editorialPanel.add(pdfPanel);

really appreciate any help

hendricd
13 Jul 2009, 3:33 AM
In FF 3.5
am getting huge grey area in PDF component followed by actual Content. Please look at the image.

In IE 7 & 8
grey area isnt there, but the height of the component is less.

same code behaves differently in 2 different browsers.

@cheenu1979 -- Ext UI Components do not support % in height/width Component properties.

Since your MediaPanel is be managed by another parent Container(this.editorialPanel), you should never specify width/height at all. Remove them and let the Layout manager do its job. ;)




var pdfPanel = new Ext.ux.MediaPanel(
{
id: "pdfViewer",
loadMask: true,
xtype: 'mediapanel',
height:'100%', //invalid (numbers only)
//width: 710,
mediaCfg:
{
mediaType: 'PDFFRAME',
autoSize:true,
height:'100%',
url: article_path,
unsupportedText: 'PDF viewer is not installed.'
}
});

pdfPanel.renderMedia();

this.editorialPanel.add(pdfPanel);

cheenu1979
13 Jul 2009, 4:48 PM
Thanks Doug,

I`ve removed all the height and width properties but still no use, am getting same issue in both FF and IE.


this.editorialPanel = new Ext.Panel({
id : 'editorial-panel',
layout : 'form'
});

var data = thisStore.reader.jsonData['articles'];
var article_path = data['article_path'];
var article_date = data['article_date'];

var dtPanel = new Ext.Panel({
id: 'date-panel',
layout : 'form',
border : false,
html:'<div class="article-text">'+article_date+'</div>'
});

var pdfPanel = new Ext.ux.MediaPanel(
{
id: "pdfViewer",
loadMask: true,
xtype: 'mediapanel',
mediaCfg:
{
mediaType: 'PDFFRAME',
url: article_path,
unsupportedText: 'PDF viewer is not installed.'
}
});
pdfPanel.renderMedia();
this.editorialPanel.add(dtPanel);
this.editorialPanel.add(pdfPanel);
this.editorialPanel.doLayout();

appreciate your response.

cheers
Cheenu

hendricd
13 Jul 2009, 7:28 PM
@cheenu -- Please post your entire layout. Now you have no height anywhere. Layouts need something to base sizing on. Start with a simple layout:



this.editorialPanel = new Ext.Panel({
id : 'editorial-panel',
//layout : 'form' //why??
layout : 'border',
height : 400,
width : 500
});

var data = thisStore.reader.jsonData['articles'];
var article_path = data['article_path'];
var article_date = data['article_date'];

var dtPanel = new Ext.Panel({
id: 'date-panel',
layout : 'form', // again, why?
region : 'north',
border : false,
height : 40,
html:'<div class="article-text">'+article_date+'</div>'
});

var pdfPanel = new Ext.ux.MediaPanel(
{
id: "pdfViewer",
loadMask: true,
region : 'center',
xtype: 'mediapanel',
mediaCfg:
{
mediaType: 'PDFFRAME',
autoSize : true,
url: article_path,
unsupportedText: 'PDF viewer is not installed.'
}
});
[/s]pdfPanel.renderMedia();[/s] //only use this to re-render the media
this.editorialPanel.add(dtPanel);
this.editorialPanel.add(pdfPanel);
this.editorialPanel.rendered && this.editorialPanel.doLayout();
There is much you have not explained about your layout.

cheenu1979
14 Jul 2009, 6:30 PM
Doug,
Thanks for your reply.

I`ve got lot of containers sitting on top of the editorialPanel, Its kinda complicated but i`ll try to explain as clear as possible.

Top container is ViewPort here is the code snippet:


var quickSearch = new QuickSearch();
var mainPanel = new MainPanel();

var viewport = new Ext.Viewport({
id: 'viewport',
layout: 'border',
items: [{
xtype:'panel',
region: 'north',
contentEl: 'header',
margins: '0 0 0 0',
height: 107,
border: false
},
quickSearch,
mainPanel,
{
xtype: 'panel',
region : 'south',
border: false,
html: '<p>This application requires us to capture and store some information about you. Our privacy policy can be found at <a href="Privacy.html" target="_blank">Privacy Policy</a></p>'
}
]
});

Here is the main Panel (card layout ) snippet :


MainPanel = function() {
MainPanel.superclass.constructor.call(this, {
id : 'main-panel',
border : false,
layout : 'card',
region : 'center',
autoScroll : true,
activeItem : 0,
defaults : {
xtype : 'panel',
autoScroll : true
},
cmargins : {
left : 0,
right : 0
},
items : [ item1, //mockup
editorial.getEditorialPanel(), //code where have issues for PDF
item3,
item4,etc....],
tbar : [{
scope : this,
text : messages.home,
handler : function() {
loadItem1(),//mockup
this.layout.setActiveItem(0);
}
}
, '-',{
scope : this,
text : messages.editorial,
handler : function() {
editorial.loadEditorial();
this.layout.setActiveItem(1);
}
}
, '-', { },{},...]
});


and then then editorial code which I mentioned in the previous will be called using getEditorialPanel in to MainPanel layout



this.editorialPanel = new Ext.Panel({
id : 'editorial-panel'
});

this.articleStore = new Ext.data.JsonStore({
url : 'Editorial.php',
root : 'articles',
totalProperty: 'articleCount',
baseParams : {
action : 'getArticles'
},
fields : ['article_path','article_date'],
listeners: {
loadexception: function(proxy, store, response, e) {
alert(e);
}
}
});

var pagingBar = new Ext.PagingToolbar({
pageSize: 1,
displayInfo: true,
displayMsg: 'Displaying Articles {0} - {1} of {2}',
store: this.articleStore,
emptyMsg: "Displaying Articles",
listeners : {
beforechange : function(thisPagingBar, event) {
Ext.ux.event.Broadcast.publish('cleararticle');
}
}

});

function clearArticleHandler() {
if (this.articleFieldSet != null) {
this.articleFieldSet.removeAll();
}
if (this.articleStore != null) {
this.articleStore.removeAll();
}
}

this.articleFieldSet = new Ext.form.FieldSet({
collapsible : false,
tbar : pagingBar
});

this.editorialPanel.add(this.articleFieldSet);

var renderArticle = function(thisStore, records, options) {
this.editorialPanel.remove('date-panel');
this.editorialPanel.remove('pdfViewer');

var data = thisStore.reader.jsonData['articles'];
var article_path = data['article_path'];
var article_date = data['article_date'];
var dtPanel = new Ext.Panel({
id: 'date-panel',
//layout : 'form',
border : false,
html:'<div class="article-text">'+article_date+'</div>'
});
var pdfPanel = new Ext.ux.MediaPanel(
{
id: "pdfViewer",
loadMask: true,
xtype: 'mediapanel',
mediaCfg:
{
mediaType: 'PDFFRAME',
url: article_path,
unsupportedText: 'PDF viewer is not installed.'
}
});
pdfPanel.renderMedia();
this.editorialPanel.add(dtPanel);
this.editorialPanel.add(pdfPanel);
this.editorialPanel.doLayout();
};


this.articleStore.addListener('load', renderArticle, this);
Ext.ux.event.Broadcast.subscribe('cleararticle', clearArticleHandler, this);

this.loadEditorial = function() {

this.articleStore.load({params:
{
start:0,
limit : 1
}
});
};

this.getEditorialPanel = function() {
return this.editorialPanel;
};


I`ve pretty much pasted 90% of the code, I feel like missing a bit somewhere. Hope this info would help, if you need more, i am ready to provide.

cheers
Cheenu

mystix
14 Jul 2009, 6:33 PM
@cheenu, please post your code in
tags (click the "Edit" button to edit your existing post).
it's a real eyesore as it is now.

see http://extjs.com/forum/misc.php?do=bbcode for more info.

hendricd
14 Jul 2009, 7:34 PM
@cheenu -- You are adding many items to a Panel with no size and no layout (worse).

this.editorialPanel = new Ext.Panel({
id : 'editorial-panel',
layout : '?????'
});What are your layout goals for that card in the center region? Why not just add the
MediaPanel as the card rather than overnest it in this.editorialPanel without a layout?

Put the date? of the Document in that Panel's title:


var pdfPanel = new Ext.ux.MediaPanel(
{
id: "pdfViewer",
loadMask: true,
xtype: 'mediapanel',
title : article_date
mediaCfg:
{
mediaType: 'PDFFRAME',
url: article_path,
unsupportedText: 'PDF viewer is not installed.'
}
});
pdfPanel.renderMedia(); //only necessary to refresh after Panel is rendered.
this.editorialPanel.add(dtPanel); // extra baggage
MainPanel.add(pdfPanel);
Life with Ext is just a bunch of Panels.
Get your basic layout functional first. PDF can wait. ;)

mystix
16 Jul 2009, 11:40 PM
just upgraded to revision 52 of uxmedia.js and snagged a bug.

the current code for the Element#remove() override in uxmedia.js is this:


remove: function(cleanse, deep) {
this.unmask(true);
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
}
}

the call to this.unmask() causes an error if this.dom is undefined
(this happened to me when i simply closed a tab)


in a previous version, deletion of the mask was done within the existential check for this.dom:


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.maskEl = null;
this.dom = null; //clear ANY DOM references
}
}

which prevented this error from occurring.


the fix for this is thus trivial:


remove: function(cleanse, deep) {
if (this.dom) {
this.unmask(true);
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
}
}

DTT_11-1983
17 Jul 2009, 12:59 AM
Hi,
Is it possible to allow Ext.Window's to hover over a mediapanel with PDF? It seems the example a some configs for this, but I couldn't get it to work in my app. FWIW I'm using Ext3.0rc1, FF3


thanks for any tips!

I have the same problem here. Is there any example that could help. Thanks :)

hendricd
18 Jul 2009, 6:24 AM
just upgraded to revision 52 of uxmedia.js and snagged a bug.

....
the fix for this is thus trivial:


remove: function(cleanse, deep) {
if (this.dom) {
this.unmask(true);
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
}
}


Fixed in SVN.

yanghengtao
24 Jul 2009, 5:32 AM
hi,everyone,,

i have two tabs ,one with a swf file,which show a map,named 'tabA',the other with a button,named 'tabB'. when i click the button,i want to call a method in the swf and draw a point on the map.now, the problem is that when i draw the point the first time ,it works well,but when i switch the tab with the swf and do some operation,for example zoom out the map, then i switch to 'tabB' click the button, it does no work,it shows that there is no attributes or methods.

the code segment is like this:

var object='<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"\
id="SelectLineChart" width="100%" height="100%"\
codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">\
<param name="movie" value="../Swf/map.swf" />\
<param name="quality" value="high" />\
<param name="bgcolor" value="#869ca7" />\
<param name="../Swf/map.swf" value="sameDomain" />\
<embed id="MqiDetailChart" src="map.swf" quality="high" bgcolor="#869ca7"\
width="100%" height="100%" name="map" align="middle"\
play="true" loop="false" quality="high"\
allowScriptAccess="sameDomain"\
type="application/x-shockwave-flash"\
pluginspage="http://www.adobe.com/go/getflashplayer">\
</embed>\
</object>';


MqiDetailTab =new Ext.TabPanel( {
id : 'MqiDetailTab',
region : 'center',//把内容放到层里去 margins : '2',
deferredRender : false,
enableTabScroll : true,
activeTab : 0,
items : [ {
id : 'lkData',
cls : 'center1',
contentEl : 'center1',//读层里的内容 title : 'map,
autoScroll : false
}, {
id : 'lkChart',
html : object,
title : 'map',
cls: 'margin',
autoScroll : false
}]
});




in addition,i had used the ux.media ,and this problem is still not solved, anyone can help me? thanks!!

yanghengtao
24 Jul 2009, 5:34 AM
hi,everyone,,

i have two tabs ,one with a swf file,which show a map,named 'tabA',the other with a button,named 'tabB'. when i click the button,i want to call a method in the swf and draw a point on the map.now, the problem is that when i draw the point the first time ,it works well,but when i switch the tab with the swf and do some operation,for example zoom out the map, then i switch to 'tabB' click the button, it does no work,it shows that there is no attributes or methods.

the code segment is like this:

var object='<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"\
id="SelectLineChart" width="100%" height="100%"\
codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">\
<param name="movie" value="../Swf/map.swf" />\
<param name="quality" value="high" />\
<param name="bgcolor" value="#869ca7" />\
<param name="../Swf/map.swf" value="sameDomain" />\
<embed id="MqiDetailChart" src="map.swf" quality="high" bgcolor="#869ca7"\
width="100%" height="100%" name="map" align="middle"\
play="true" loop="false" quality="high"\
allowScriptAccess="sameDomain"\
type="application/x-shockwave-flash"\
pluginspage="http://www.adobe.com/go/getflashplayer">\
</embed>\
</object>';


MqiDetailTab =new Ext.TabPanel( {
id : 'MqiDetailTab',
region : 'center', margins : '2',
deferredRender : false,
enableTabScroll : true,
activeTab : 0,
items : [ {
id : 'lkData',
cls : 'center1',
contentEl : 'center1',
title : 'map,
autoScroll : false
}, {
id : 'lkChart',
html : object,
title : 'map',
cls: 'margin',
autoScroll : false
}]
});




in addition,i had used the ux.media ,and this problem is still not solved, anyone can help me? thanks!!

hendricd
24 Jul 2009, 11:30 AM
hi,everyone,,

i have two tabs ,one with a swf file,which show a map,named 'tabA',the other with a button,named 'tabB'. when i click the button,i want to call a method in the swf and draw a point on the map.now, the problem is that when i draw the point the first time ,it works well,but when i switch the tab with the swf and do some operation,for example zoom out the map, then i switch to 'tabB' click the button, it does no work,it shows that there is no attributes or methods.
.....
in addition,i had used the ux.media ,and this problem is still not solved, anyone can help me? thanks!!



@yanghengtao --
Your problem is DOM reflow during tab switches. Common with Flash object when they are hidden by an upstream parent Element using display:none;

Since you have a ux.Media project started, follow this example (http://demos.theactivegroup.com/?demo=charts&script=fusion) to see how you must construct your Ext layout (tabs) to support Flash in RIA (using the uxvismode plugin in your layout).

Add:
1) Wrap your code samples in wiki [code/] or [html/] tags when posting them.
2) Avoid duplicate posting (Use the edit button) ;)

yanghengtao
26 Jul 2009, 12:18 AM
hi hendricd
thanks for your reply , but now i use the " hideMode : 'nosize' " ,it does not work in ie ,i use "hideMode : 'offset' " ,it has the same problem i had refered to in the first post.




var vizPlugin = Ext.ux.plugin && Ext.ux.plugin.VisibilityMode && !Ext.isIE ? new Ext.ux.plugin.VisibilityMode({hideMode:'nosize'}): {init: Ext.emptyFn};

// 中间要显示的TabPanel页面
var tabs = new Ext.TabPanel({
region : 'center',
margins : '0 3 3 0',
activeTab : 0,
resizeTabs : true,
tabWidth : 200,
//tabHeight : 135,
enableTabScroll : true,
plugins : [vizPlugin],
defaults : { hideMode : 'nosize'},

……


thanks

yanghengtao
26 Jul 2009, 3:29 AM
hi hendricd.
my project run well now ,thanks for your tips. Appreciate you very much.

NOSLOW
12 Aug 2009, 4:02 AM
Doug,

Have you noticed in your example (http://demos.theactivegroup.com/?demo=charts&script=fusion) that tooltips are displaying with "width:0!important" (from class .x-hide-nosize) overriding its "width:auto", causing them to display each word of the tooltip on a new line? The tooltips are on the toolbar buttons after your add the chart.

How would you resolve this? Remove the "!important" off the width for the .x-hide-nosize style?

Oh, I'm viewing it in FF3.5.

Thanks,
Gary

Glug-LP
13 Aug 2009, 8:54 PM
谢谢。学习!

Bazen
31 Aug 2009, 5:53 AM
Hi!
I've a Problem with the JW Medieplayer.
The "playerReady" Event does not Fire and i can't send Events to the Flashplayer. Could you help me please?





window.playerReady= function(obj) {

alert('playerReady')


};

window.JWPtrace = function(ac){
console.log(arguments);
};

this.view = new Ext.ux.Media.Flash.Panel({
id : 'jwplaything',
title : 'LongTail (JWPlayer 4.4)',
autoMask : true, //set true here because this player provides feedback when ready
autoScroll : false,
autoShow: true,
height: 50,

externalsNamespace : 'player',
listeners:{
/*
* we MUST wait until the Flash object renders fully
* and reports ready
*/

flashinit: function(C, playerObj){
//construct a global status callback for this instance
console.debug('flashinit');
var cbName = 'recorder_'+playerObj.id;
debug(cbName);
window[cbName] = function(state){
Demo.balloon(null,'Player Reports:',state.newstate);
}.createDelegate(this);

Demo.balloon(null,'Player Reports:','Ready');

//Use the externalsNamespace 'player' binding we defined earlier
with(C.player){
addModelListener("STATE",cbName);
}
//Or, use the direct <object> tag reference instead
playerObj.sendEvent('PLAY','true');
},
scope: this,
delay : 100
},

mediaCfg:{
url : '/~felix/mel/lib/JWP/player-viral2.swf',
autoSize : true,
volume : 25,
start :false,
loop :false,
scripting :'always',

//ExternalInterface bindings
boundExternals : ['sendEvent' ,
'addModelListener',
'addControllerListener',
'addViewListener',
'getConfig',
'getPlaylist'
],
params:{
wmode :'opaque',
allowfullscreen : true,
flashVars: {
autostart :'@start',
file :'http://content.bitsontherun.com/videos/6AJT5nbx.m4v',
duration : 30,
stretching :'fill',
fullscreen : true,
shuffle : false,
repeat : false,
volume :'@volume' //(0-100)
,tracecall : 'JWPtrace' //debug aid
}

}
}



});

hendricd
31 Aug 2009, 7:10 AM
This binding is necessary:


//JWV Player sends notifications through a global 'playerReady' function handler.
//This will be mapped to each player instance.
window.playerReady= function(obj) {
//Search for a ux.Flash-managed player.
var mediaComp, el = Ext.get(obj['id']);
if(mediaComp = (el?el.ownerCt:null)){
mediaComp.onFlashInit();
}
};


Does the player render in the Component?

hendricd
31 Aug 2009, 7:25 AM
Doug,

Have you noticed in your example (http://demos.theactivegroup.com/?demo=charts&script=fusion) that tooltips are displaying with "width:0!important" (from class .x-hide-nosize) overriding its "width:auto", causing them to display each word of the tooltip on a new line? The tooltips are on the toolbar buttons after your add the chart.

How would you resolve this? Remove the "!important" off the width for the .x-hide-nosize style?

Oh, I'm viewing it in FF3.5.

Thanks,
Gary

@NOSLOW, et al -- This has been resolved by the latest build Zip 2.1.1. The uxvismode plugin has been reworked and should resolve those issues.

Bazen
31 Aug 2009, 12:52 PM
This binding is necessary:


//JWV Player sends notifications through a global 'playerReady' function handler.
//This will be mapped to each player instance.
window.playerReady= function(obj) {
//Search for a ux.Flash-managed player.
var mediaComp, el = Ext.get(obj['id']);
if(mediaComp = (el?el.ownerCt:null)){
mediaComp.onFlashInit();
}
};
Does the player render in the Component?

Thank you for replying. Now I found the real problem:

You have to add the same id in the flashpanel config AND in the flashvars of the mediaCfg, otherwise the jw-player does not fire the event. Very strange...


Ext.ns('Mel.View.Index.Menu');

Mel.View.Index.Menu.Player = Ext.extend(Ext.ux.Media.Flash.Panel, {

constructor: function(config) {

config = Ext.apply({
id : 'jwplaything',
title : MEL._('player'),
autoMask : true, //set true here because this player provides feedback when ready
autoScroll : false,
autoShow: true,
height: 47,

externalsNamespace : 'player',
listeners:{


flashinit: function(C, playerObj){
//construct a global status callback for this instance

var cbName = 'recorder_'+playerObj.id;

window[cbName] = function(state){

MEL.getCS('Player').stateChange(state)
}.createDelegate(this);

//Use the externalsNamespace 'player' binding we defined earlier
with(C.player){
addModelListener("STATE",cbName);
}
//Or, use the direct <object> tag reference instead
playerObj.sendEvent('PLAY','true');
},
scope: this,
delay : 100
},

mediaCfg:{
url : MEL.getConfiguration('baseUrl')+'lib/JWP/player-viral2.swf',
autoSize : true,
volume : 25,
start :true,
loop :false,
scripting :'always',
swliveconnect : true,

//ExternalInterface bindings
boundExternals : ['sendEvent' ,
'addModelListener',
'addControllerListener',
'addViewListener',
'getConfig',
'getPlaylist'
],
params:{
wmode :'opaque',
allowfullscreen : true,
flashVars: {
autostart :'@start',
id:'jwplaything',
file :'http://content.bitsontherun.com/videos/6AJT5nbx.m4v',
duration : 30,
stretching :'fill',
fullscreen : true,
shuffle : false,
repeat : false,
volume :'@volume' //(0-100)
//,tracecall : 'JWPtrace' //debug aid
}

}
}



}, config);
Mel.View.Index.Menu.Player.superclass.constructor.call(this,config);
Mel.View.Index.Menu.Player.superclass.initComponent.apply(this, arguments);


}


});

Celandro
8 Sep 2009, 8:59 AM
Is the source available for flexapp.swf (http://code.google.com/p/uxmedia/source/browse/trunk/demos/flexapp.swf)? Im having problems with addEventListener, and would rather check source than bug you for more information :)

hendricd
8 Sep 2009, 9:10 AM
Not much to it, really:

app.mxml --


<?xml version="1.0" encoding="utf-8"?>

<!--
Copyright 2006 Adobe Systems Incorporated

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"),
to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.


THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE
OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

-->


<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" height="400" viewSourceURL="srcview/index.html">

<mx:Script>
<![CDATA[
import mx.controls.dataGridClasses.DataGridColumn;
import mx.controls.Alert;
import mx.controls.*;
import mx.charts.*;
import mx.charts.series.*;
import mx.charts.effects.*;

public function testFunc(val1:String = "defaultParam" ):void
{
Alert.show(val1, "called remotely");
}

// these just force datagrid to be linked into the application
public var refs:Array = [DataGrid, DataGridColumn, ColumnChart, ColumnSeries, LineSeries, CategoryAxis, SeriesInterpolate, SeriesSlide, SeriesZoom ];

]]>
</mx:Script>

<mx:Panel width="100%" height="100%" id="panel" paddingLeft="20" paddingTop="20" >
<mx:Text width="100%" height="16">
<mx:text>
Refer to the controls below, via javascript, as slider(), check(), and button() respectively
</mx:text>
</mx:Text>
<mx:CheckBox x="49" y="34" label="Checkbox" id="check"/>
<mx:HSlider snapInterval=".01" id="slider" liveDragging="true"/>
<mx:Button id="button" label="generic button" />
</mx:Panel>

<fab:FABridge xmlns:fab="bridge.*" />

</mx:Application>

Celandro
8 Sep 2009, 9:41 AM
It seems that setting a variable as [Bindable] is not enough to give it the addEventListener method. I'll figure out a workaround. Im pretty sure its a flex issue not uxflex :)

Celandro
15 Sep 2009, 2:32 PM
I've been looking into onFlexInit not firing and believe I have found a bug


mediaCfg : {
id: 'volumeMonitorBridge',
url: '/flex/Logic-' + Logic.app.version + '.swf',
autoSize:true,
}
will fire onFlexInit

while


mediaCfg : {
id: 'volumeMonitorBridge',
url: '/flex/Logic-' + Logic.app.version + '.swf',
autoSize:true,
params: {flashVars:{
styleURL: '/flex/style-' + Logic.app.version + '.swf',
moduleName:'/flex/VolumeMonitor/VolumeMonitor-' + Logic.app.version + '.swf'
}
}
}
will not.

The issue appears to be that the bridgeName passed into flex is @id in the 2nd case, and when it comes back to onFlexBridge, bridge=["flash"] instead of bridge=["volumeMonitorBridge"]

I could look into it more, but figure you could fix it faster than I could figure out how the @ variable substitution was working :)

PS. the following does work:


mediaCfg : {
id: 'volumeMonitorBridge',
url: '/flex/Logic-' + Logic.app.version + '.swf',
autoSize:true,
params: {flashVars:{
bridgeName: 'volumeMonitorBridge',
styleURL: '/flex/style-' + Logic.app.version + '.swf',
moduleName:'/flex/VolumeMonitor/VolumeMonitor-' + Logic.app.version + '.swf'
}
}
}
AND change getMediaType to
getMediaType: function(){
var mt = Ext.apply({},{
cls : 'x-media x-media-flex'
}, this.mediaType);

mt.params[this.varsName] || (mt.params[this.varsName]={});
//change for passing in your own bridge name
Ext.applyIf(mt.params[this.varsName],{
bridgeName: '@id' //default to the ID of the SWF object.
});
return mt;
},

Eric24
23 Sep 2009, 8:02 AM
Doug,

Is there any reason not to use MIF (which seems lighter-weight for this purpose) to show a PDF (Acrobat) in an Ext window, vs ux.Media PDFFRAME?

On that note, if I use ux.Media (for this or any other purpose), do I need just uxmedia.js or this plus other files in the uxMedia ZIP?

Tnx!
Eric

hendricd
23 Sep 2009, 8:12 AM
@Eric24 --
With regard to PDF, if you have a need to POST to generate/download your PDF stream, I would recommend MIF over ux.Media, as it provides 'targeted' Form handling (MIF : submitAsTarget) for that purpose.

Otherwise, uxmedia.js and uxvismode.js would be lighter-weight alternatives.

hellogavin
24 Sep 2009, 3:49 AM
There are something been lost in the demo such as examples.css.Coundn't you send it to me?thank you:)

hendricd
24 Sep 2009, 4:08 AM
There are something been lost in the demo such as examples.css.Coundn't you send it to me?thank you:)

@hellogavin -- examples.css is included in the /examples folder of the older Ext 2.0.x builds. That (older) demo zip was designed to be dropped into a new /examples folder on your machine along-side the older Ext builds.

If you are just getting started with Ext 3 and ux.Media, consider one of the demo links on the first post of this thread instead.

hellogavin
27 Sep 2009, 4:20 PM
Thanks so much for your help:D=D>

EZboy
28 Sep 2009, 12:47 PM
Hey everyone,

I have noticed a strange issue when using "uxvismode.js" with extjs 3.0 and comboboxes.

I am using new Ext.ux.plugin.VisibilityMode({hideMode:'nosize', bubble : false }) as a plugin in my tab panel. The issue appears to be with combo boxes - the combo box works but drop down select list is not displayed.

I found the issue is in

CSS.createStyleSheet('.x-hide-nosize{height:0px!important;border:none!important;zoom:1;}.x-hide-nosize * {height:0px!important;width:0px!important;border:none!important;zoom:1;}');

It looks like this overrides css class used by combobox and dropdown becomes hidden.

Please advice, thanks

hendricd
28 Sep 2009, 4:00 PM
Hey everyone,

I have noticed a strange issue when using "uxvismode.js" with extjs 3.0 and comboboxes.

I am using new Ext.ux.plugin.VisibilityMode({hideMode:'nosize', bubble : false }) as a plugin in my tab panel. The issue appears to be with combo boxes - the combo box works but drop down select list is not displayed.

I found the issue is in

CSS.createStyleSheet('.x-hide-nosize{height:0px!important;border:none!important;zoom:1;}.x-hide-nosize * {height:0px!important;width:0px!important;border:none!important;zoom:1;}');It looks like this overrides css class used by combobox and dropdown becomes hidden.

Please advice, thanks

@EZBoy -- Grab the latest version from here (http://uxdocs.theactivegroup.com/repo/trunk/Ext/ux/plugin/uxvismode.js), there was a problem resolved earlier today involving Flyweights that may have been impacted.

Let me know if that doesn't solve it.

EZboy
29 Sep 2009, 6:10 AM
The latest version indeed fixed it. Thanks

Eric24
30 Sep 2009, 5:34 PM
@Doug,

On your "Demo Desk", I'm seeing a lot of strange behavior (on FF 3.5 and IE8) with certain windows not being displayed correctly when they overlap. For example, with the Chart window and the media player window on the desktop at the same time, their respective Z values seem to be fixed once they are created (i.e., if you create the chart window first, it will always be on the bottom). Similarly, there is quite a bit of "bleed-through" with the PDF window when it is positioned above/below other windows. I realize the "full story" is quite complex, but my question is really whether any of this is just an artifact of your demo, as opposed to things I would expect to see when using the uxmedia components in a real app? Can you summarize the pitfalls?

hendricd
30 Sep 2009, 6:44 PM
@Doug,

On your "Demo Desk", I'm seeing a lot of strange behavior (on FF 3.5 and IE8) with certain windows not being displayed correctly when they overlap. For example, with the Chart window and the media player window on the desktop at the same time, their respective Z values seem to be fixed once they are created (i.e., if you create the chart window first, it will always be on the bottom). Similarly, there is quite a bit of "bleed-through" with the PDF window when it is positioned above/below other windows. I realize the "full story" is quite complex, but my question is really whether any of this is just an artifact of your demo, as opposed to things I would expect to see when using the uxmedia components in a real app? Can you summarize the pitfalls?

@Eric -- That's because each demo group ( mif, media, basex, etc) has a unique window-manager (z-seed) assigned to each (experimental) button in the west region. When you click on those western toggle-buttons, it is designed to hide all demo-windows in that shortcut-group. ;)

Eric24
30 Sep 2009, 6:48 PM
Tnx for the quick response, but I'm even seeing this if I use two windows from the same buttom (like the media player and the PDF window--with or without an iframe). Just wondering if this is an artifact of your demo page (or your z-order experiment).

Isabella
6 Oct 2009, 6:51 AM
How to apply these code in extjs. please give sample:((

Isabella
6 Oct 2009, 6:52 AM
How to apply these code in extjs. please give sample

hendricd
6 Oct 2009, 6:54 AM
How to apply these code in extjs. please give sample

@Isabella -- Did you have something specific in mind ( a goal) ?

Matt202
8 Oct 2009, 11:27 PM
Hello! First, thanks for a great addon!

Second, would you happen to have a guess why my flex app in a Ext.ux.Media.Flex.Panel is not responding to the mouse wheel? It works when I run the flex app standalone, so my guess is something is eating the wheel event and not sharing. I tried doing a search for wheel in just this thread, but if there is a way to do that also I haven't found it :(

Eric24
13 Oct 2009, 8:19 AM
Doug,

Is there a way to do either of the following with PDFFRAME?
1) Have Javascript that's embedded in the PDF (tied to an event, for example) call or otherwise interact with an Ext function?
2) Have Ext detect when certain PDF events occur (such as printing or saving)?

Regards,
Eric

hendricd
13 Oct 2009, 11:18 AM
Doug,

Is there a way to do either of the following with PDFFRAME?
1) Have Javascript that's embedded in the PDF (tied to an event, for example) call or otherwise interact with an Ext function?
2) Have Ext detect when certain PDF events occur (such as printing or saving)?

Regards,
Eric

@Eric -- full interaction with the browsers PDF Plugin is possible, but only on IE.

I added a print button for example to this (http://demos.theactivegroup.com/demodesk.html?demo=media&script=acrobat)demo, but again it only works on IE. I'm not at all sure about events tho. :-?

dante
27 Oct 2009, 7:01 AM
Hello,

I am having an issue in IE8 when trying to access a column chart js flash object via javascript. I am using latest IE8 and latest Flash Plugin (10.0.32.18). IE8 crashes on line 74 of ux.Media.ChartPack 2.1.1 due to this command:



r=obj.CallFunction(c)


The IE8 script debugger indicates that there is no "CallFunction" method in obj. At least there is none listed under [Methods] when inspecting obj.

In Firefox everything is working fine.

Any ideas?

hendricd
27 Oct 2009, 7:06 AM
Hello,

I am having an issue in IE8 when trying to access a column chart js flash object via javascript. I am using latest IE8 and latest Flash Plugin (10.0.32.18). IE8 crashes on line 74 of ux.Media.ChartPack 2.1.1 due to this command:



r=obj.CallFunction(c)
The IE8 script debugger indicates that there is no "CallFunction" method in obj. At least there is none listed under [Methods] when inspecting obj.

In Firefox everything is working fine.

Any ideas?

What Chart?
What Ext version?
Some config code?
What Chart method are you trying to invoke (and when)?

Downloaded the latest 2.1.2?

dante
27 Oct 2009, 8:00 AM
I just downloaded tested with 2.1.2 and the problem still persists. Sorry for supplying incomplete information, here we go:

Ext 2.2, AmCharts (line chart). I am using a panel:



new Ext.ux.Chart.amChart.Panel({
title: 'Line',
chartCfg:{
params: {
flashVars: {
ChartNoDataText: 'Select a row to view a chart.',
data_file: '/amcharts/amline/default_data.xml',
settings_file: '/amcharts/amline/default_settings.xml'
}
}
,id : 'dashboardLineChart'
},
id: 'dashboardLineChartPanel',
chartURL : '/amcharts/amline/amline.swf',
width : 300,
height : 280
})


The method being called on the chart to change its title is (panelRef = above Panel):



panelRef.chart.setParam('labels.label[0].text', '<b>'+chartTitle+'</b>');


That provokes the error in line 2125 of uxamchartpak-debug.js (2.1.2):


r = obj.CallFunction(c);

The chart is already displayed at that point, with a minimal config which I think is okay as it is working in FF. Some information from the console:



>>typeof obj.CallFunction
"unknown"

>>c
"<invoke name="setParam" returntype="javascript"><arguments><string>labels.label[0].text</string><string>&lt;b&gt; My Title&lt;/b&gt;</string></arguments></invoke>"


obj looks okay, type is "DispHTMLObjectElement".

As I mentioned before, all this is working fine in Firefox.

Just a direction to investigate into would be very helpful. I am not a flash/actionscript expert. Any help appreciated :">

hendricd
27 Oct 2009, 8:28 AM
@dante--

A couple notes here (see inlines):


new Ext.ux.Chart.amChart.Panel({
title: 'Line',
chartCfg:{
params: {
flashVars: {
ChartNoDataText: 'Select a row to view a chart.',
data_file: '/amcharts/amline/default_data.xml',
settings_file: '/amcharts/amline/default_settings.xml'
}
}
,id : 'dashboardLineChart'
},
id: 'dashboardLineChartPanel',
chartURL : '/amcharts/amline/amline.swf',
dataURL : '/amcharts/amline/default_data.xml',
width : 300,
height : 280,
//prevents Flash interface from breaking during DOM reflow (use when Panel is part of an Ext.Layout)
hideMode : 'nosize'
})
See if it behaves the same way with:


panelRef.getInterface().setParam('labels.label[0].text', '<b>'+chartTitle+'</b>');

dante
28 Oct 2009, 1:38 AM
Indeed, the first two changes did the trick. Thank you very much Doug!

ibet
2 Nov 2009, 7:57 PM
how to add a maxwin button to the MediaWindow.? thankx

hendricd
3 Nov 2009, 4:57 AM
how to add a maxwin button to the MediaWindow.? thankx

As ux.Media.Window extends Ext.Window, that's a standard config option (http://www.extjs.com/deploy/dev/docs/?class=Ext.Window&member=maximizable).

EZboy
6 Nov 2009, 2:08 PM
Hey everyone,

I have noticed another strange issue when using "uxvismode.js" with extjs 3.0 and tabs. This is happening with all UX versions including 2.12

So in IE 6,7 and 8, the content of each tab seems to be offset from the top by the height of the content in a previous tab.

Lets say I have 3 tabs open, each one has content height 100px. First tab would display normally, second would be offset from top by 100px, third would be offset by 200px.

The content is html loaded via ajax for each tab.

Please advice, thanks

hendricd
6 Nov 2009, 6:42 PM
Hey everyone,

I have noticed another strange issue when using "uxvismode.js" with extjs 3.0 and tabs. This is happening with all UX versions including 2.12

So in IE 6,7 and 8, the content of each tab seems to be offset from the top by the height of the content in a previous tab.

Lets say I have 3 tabs open, each one has content height 100px. First tab would display normally, second would be offset from top by 100px, third would be offset by 200px.

The content is html loaded via ajax for each tab.

Please advice, thanks

Would need to see your layout strategy to assist any further with that. :-?

SimoAmi
8 Nov 2009, 1:57 PM
I'm getting the following message when Flash is not installed or disabled:

mo.dom is undefined

I noticed that in your demos the prompt for flash download works well and no errors are thrown.

Any idea what might went wrong?

SimoAmi
8 Nov 2009, 2:02 PM
I'm getting the following message when Flash is not installed or disabled:

mo.dom is undefined

I noticed that in your demos the prompt for flash download works well and no errors are thrown.

Any idea what might went wrong?

This is the error log:



mo.dom is undefinedanonymous()uxmedia.js (line 517)
anonymous()uxflash.js (line 337)
anonymous()uxmedia.js (line 429)
anonymous()uxmedia.js (line 627)
anonymous()uxmedia.js (line 692)
anonymous(Object dom=div#ext-gen369.x-column-inner id=ext-gen369, div#ext-gen370.x-clear)ext-widg...ts-min.js (line 42)
anonymous(<div>The Adobe Flash Player 8 is required.<br/><a href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" target="_flash"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"/></a></div> requiredVersion=8, 1, Object dom=div#ext-gen369.x-column-inner id=ext-gen369)ext-all.js (line 65)
anonymous(Object initialConfig=Object layout=Object labelAlign=left, Object dom=div#ext-gen369.x-column-inner id=ext-gen369)ext-all.js (line 65)
anonymous(Object initialConfig=Object layout=Object labelAlign=left, Object dom=div#ext-gen332.x-panel-body id=ext-gen332)ext-all.js (line 69)
anonymous()ext-all.js (line 65)
anonymous(Object name=D)ext-all.js (line 64)
anonymous(Object name=D)ext-all.js (line 64)
anonymous(Object name=D)ext-all.js (line 64)
anonymous(Object initialConfig=Object fullView=true)ext-all.js (line 64)
anonymous()ext-all.js (line 12)
anonymous()ext-all.js (line 12)
anonymous()ext-all.js (line 58)
anonymous(Object id=13229845 data=Object srcData=Object store=Object)Campaign...mCards.js (line 45)
anonymous(Object initialConfig=Object, Object id=13229845 data=Object srcData=Object store=Object)Campaign...ePanel.js (line 79)
anonymous()ext-all.js (line 12)
anonymous()ext-all.js (line 12)
anonymous()GridActions.js (line 65)
anonymous()ext-all.js (line 12)
anonymous()ext-all.js (line 12)
anonymous(Object name=B value=0, Object name=D, Object name=A)ext-exte...ns-min.js (line 862)
anonymous()GridActions.js (line 11)
anonymous()ext-all.js (line 12)
anonymous()ext-all.js (line 20)


chrome://firebug/content/blank.gif if(mo.dom.tagName !== 'OBJECT'){\n uxmedia.js (line 517)

hendricd
9 Nov 2009, 5:29 AM
I'm getting the following message when Flash is not installed or disabled:

mo.dom is undefined

I noticed that in your demos the prompt for flash download works well and no errors are thrown.


@SimoAmi --
Can you try this override and let me know if that solves it?



Ext.override ( Ext.ux.Media, {
onAfterMedia : function(ct){
var mo;
if(this.mediaCfg && ct
&& (mo = ct.child('.x-media', true))
&& (mo = new (this.elementClass || Ext.ux.Media.Element)(mo))
&& mo.dom
){

(this.mediaObject = mo).ownerCt = this;

var L; //Reattach any DOM Listeners after rendering.
if(L = this.mediaCfg.listeners ||null){
mo.on(L); //set any DOM listeners
}
this.fireEvent('mediarender',this, this.mediaObject );

//Load detection for non-<object> media (iframe, img)
if(mo.dom.tagName !== 'OBJECT'){
mo.on({
load :this.onMediaLoad
,scope:this
,single:true
});
} else {
//IE, Opera possibly others, support a readyState on <object>s
this._countPoll = 0;
this.pollReadyState( this.onMediaLoad.createDelegate(this,[{type:'load'}],0));
}

}
if(this.autoWidth || this.autoHeight){
this.syncSize();
}
}
});


If not, can you post your Media Panel config ?

EZboy
9 Nov 2009, 6:36 AM
Hendricd

The layout is fairly simple

I am using

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


tabs = new Ext.TabPanel({
id: 'main_tabbed_panel',
layoutOnTabChange: true,
renderTo: Ext.getBody(),
activeTab: 0,
bodyStyle:'border:0px;',
plugins : V,
defaults :{ plugins: V },
items: []
});that resides in one of viewport panels:


var viewport = new Ext.Viewport({
layout: 'border',
renderTo: Ext.getBody(),
items: [ header_panel
,{
region: 'west',
xtype: 'panel',
id:'main_menu',
split: true,
title: 'Menu',
bodyStyle:'padding:0px;',
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
margins: '0 0 0 5',
rootVisible:false,
lines:false,
html: 'West',
layout: {
type: 'accordion',
animate: true
},
items: [
{
contentEl: 'menu1',
autoScroll:true,
title: 'Info',
border: false,
iconCls: 'search'
}
]

},{
region: 'center',
xtype: 'panel',
layout: 'fit',
id:'center_panel',
bodyStyle:'padding:0px;border:0px;',
items: [ tabs ]
}

]
});
I am adding tabs dynamically and content is loaded via ajax. The content is as simple as "<div style="border:1 px solid black; height:100px;"></div>"

Please let me know, thanks

SimoAmi
9 Nov 2009, 6:45 AM
@SimoAmi --
Can you try this override and let me know if that solves it?



Ext.override ( Ext.ux.Media, {
onAfterMedia : function(ct){
var mo;
if(this.mediaCfg && ct
&& (mo = ct.child('.x-media', true))
&& (mo = new (this.elementClass || Ext.ux.Media.Element)(mo))
&& mo.dom
){

(this.mediaObject = mo).ownerCt = this;

var L; //Reattach any DOM Listeners after rendering.
if(L = this.mediaCfg.listeners ||null){
mo.on(L); //set any DOM listeners
}
this.fireEvent('mediarender',this, this.mediaObject );

//Load detection for non-<object> media (iframe, img)
if(mo.dom.tagName !== 'OBJECT'){
mo.on({
load :this.onMediaLoad
,scope:this
,single:true
});
} else {
//IE, Opera possibly others, support a readyState on <object>s
this._countPoll = 0;
this.pollReadyState( this.onMediaLoad.createDelegate(this,[{type:'load'}],0));
}

}
if(this.autoWidth || this.autoHeight){
this.syncSize();
}
}
});
If not, can you post your Media Panel config ?

Works like a charm! Thank you!

Are you going to include the patch in the next release?

hendricd
9 Nov 2009, 7:13 AM
Works like a charm! Thank you!

Are you going to include the patch in the next release?

Indeed ! ;)

hendricd
9 Nov 2009, 7:42 AM
@EZboy --

Try it this way:

var V = new Ext.ux.plugin.VisibilityMode({elements:['bwrap'], bubble : false });

EZboy
10 Nov 2009, 7:09 AM
That did not fix it, the problem still exists in IE

I am using :

var V = new Ext.ux.plugin.VisibilityMode({elements:['bwrap'], bubble : false}) ;


@EZboy --

Try it this way:

var V = new Ext.ux.plugin.VisibilityMode({elements:['bwrap'], bubble : false });

hendricd
10 Nov 2009, 7:55 AM
That did not fix it, the problem still exists in IE

I am using :

var V = new Ext.ux.plugin.VisibilityMode({elements:['bwrap'], bubble : false}) ;

SInce not tabs are Media Panels, force them to use the same hideMode:



tabs = new Ext.TabPanel({
id: 'main_tabbed_panel',
layoutOnTabChange: true,
renderTo: Ext.getBody(),
activeTab: 0,
bodyStyle:'border:0px;',
plugins : V,
defaults :{ plugins: V, hideMode : 'nosize' },
items: []
});

EZboy
10 Nov 2009, 10:19 AM
Hendicd,

That did not fix it :(

This is the current code:


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



// Main (Tabbed) Panel
tabs = new Ext.TabPanel({
id: 'main_tabbed_panel',
layoutOnTabChange: true,
renderTo: Ext.getBody(),
activeTab: 0,
bodyStyle:'border:0px;',
plugins : V,
defaults :{ plugins: V, hideMode : 'nosize' },
items: [{
title: 'Main',
autoLoad:{url: 'extdata/info_main.php'+'?trick='+(new Date().getTime()), callback:loaded, scope: this,params:'', scripts:true},
autoScroll:true
}
]
});

Can you suggest what may be other alternatives?
Thank you

hendricd
10 Nov 2009, 12:13 PM
@EZboy -- I cannot replicate your issue here. Make sure you are using the latest version of the plugin (http://www.extjs.com/forum/showthread.php?p=148112#post148112).

Do you have any CSS that might be interfering?
Online example to look at?

EZboy
10 Nov 2009, 12:56 PM
Just double checked, the plugin is latest.
I removed all custom css except standard "ext-all.css" and the issue is still there.
I do not have an online example, however I can post any js part here.

Maybe the issue is in a viewport?



var viewport = new Ext.Viewport({
layout: 'border',
renderTo: Ext.getBody(),
items: [ header_panel
,{
region: 'west',
xtype: 'panel',
id:'main_menu',
split: true,
title: 'Menu',
bodyStyle:'padding:0px;',
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
margins: '0 0 0 5',
rootVisible:false,
lines:false,
html: 'West',
layout: {
type: 'accordion',
animate: true
},
items: [
{
contentEl: 'menu1',
autoScroll:true,
title: 'Info',
border: false,
iconCls: 'search' // see the HEAD section for style used
}
]

},{
region: 'center',
xtype: 'panel',
layout: 'fit',
id:'center_panel',
bodyStyle:'padding:0px;border:0px;',
items: [ tabs ]
}

]
});

hendricd
11 Nov 2009, 5:44 AM
@EZBoy -- A few further points...

Why are you over-nesting here:



},{
region: 'center',
xtype: 'panel',
layout: 'fit',
id:'center_panel',
bodyStyle:'padding:0px;border:0px;',
items: [ tabs ]
}
]
});Just make tabs the 'center' region.

What are you autoLoading into those tabs? Your own layouts?
Are you setting height and width on each tab yourself when you add them to tabs? (Bad! Let the viewport do its job -- it doesn't need your help. ;) )
Does the loaded content join the fit layout of the Panel that loaded them, or are you just throwing markup in there?
Any of it abs-positioned?
Setting it's own resize listeners for the content?

Here is the CSS rule applied to the document.

.x-hide-nosize {height:0px!important;width:0px!important;border:none!important;zoom:1;}
.x-hide-nosize * {height:0px!important;width:0px!important;border:none!important;zoom:1;}(The second rule may be giving you problems depending on what you autoLoad in those tabs). :-?

You can override/modify it by defining it somewhere before the plugin source is loaded or, add specific rules unique to your layout to handle oddities.

or, simply don't use the plugin in that portion of your layout, and try other hideModes ( eg. offsets ) for various tabs.

BTW: hideMode: visibility on even one tab will cause the others to appear stacked.

Understand : the uxvismode plugin was designed to assist standard Ext.Layout participants with DOM Reflow issues. It cannot solve all reflow issues you might create yourself.

Good luck. ;)

mschwartz
12 Nov 2009, 12:51 PM
Or maybe not compatible with Ext.ux.panel.DDTabPanel...

Here's a snippet of code.

If I uncomment the red lines and comment out the blue ones, just about anything rendered in a tab in the panel in IE is rendered with a top offset of ~400. I can provide a screenshot tomorrow (not at my workstation today). Picture a grid in a tab in the panel, but the top of the grid is rendered (top of grid starts) about halfway down the panel.





var panel = new Ext.ux.panel.DDTabPanel({ // Ext.TabPanel({
id: 'workspace-tabs',
// plugins : [ vismode, new Ext.ux.TabCloseMenu() ],
// defaults : {autoScroll:true, split: true, hideMode : 'nosize', plugins : vismode},
// defaults: { hideMode: 'nosize' },
activeTab: 0,
enableTabScroll: true,
hideMode: 'offsets',
plugins: new Ext.ux.TabCloseMenu(),



Here's the plugin source I'm using. Maybe I'm not using the right one?



Ext.namespace('Ext.ux.plugin');
Ext.onReady(function(){

/* This important rule solves many of the <object/iframe>.reInit issues encountered
* when setting display:none on an upstream(parent) element (on all Browsers except IE).
* This default rule enables the new Panel:hideMode 'nosize'. The rule is designed to
* set height/width to 0 cia CSS if hidden or collapsed.
* Additional selectors also hide 'x-panel-body's within layouts to prevent
* container and <object, img, iframe> bleed-thru.
*/
var CSS = Ext.util.CSS;
if(CSS){
CSS.getRule('.x-hide-nosize') || //already defined?
CSS.createStyleSheet('.x-hide-nosize{height:0px!important;width:0px!important;border:none!important;zoom:1;}.x-hide-nosize * {height:0px!important;width:0px!important;border:none!important;zoom:1;}');
CSS.refreshCache();
}

});

(function(){

var El = Ext.Element, A = Ext.lib.Anim, supr = El.prototype;
var VISIBILITY = "visibility",
DISPLAY = "display",
HIDDEN = "hidden",
NONE = "none";

var fx = {};

fx.El = {

/**
* Sets the CSS display property. Uses originalDisplay if the specified value is a boolean true.
* @param {Mixed} value Boolean value to display the element using its default display, or a string to set the display directly.
* @return {Ext.Element} this
*/
setDisplayed : function(value) {
var me=this;
me.visibilityCls ? (me[value !== false ?'removeClass':'addClass'](me.visibilityCls)) :
supr.setDisplayed.call(me, value);
return me;
},

/**
* Returns true if display is not "none"
* @return {Boolean}
*/
isDisplayed : function() {
return !(this.hasClass(this.visibilityCls) || this.dom.style[DISPLAY] == NONE);
},
// private
fixDisplay : function(){
var me = this;
supr.fixDisplay.call(me);
me.visibilityCls && me.removeClass(me.visibilityCls);
},

/**
* Checks whether the element is currently visible using both visibility, display, and nosize class properties.
* @return {Boolean} True if the element is currently visible, else false
*/
isVisible : function(deep) {
return this.visible ||
(!this.isStyle(VISIBILITY, HIDDEN) &&
this.visibilityCls ? !this.hasClass(this.visibilityCls) :!this.isStyle(DISPLAY, NONE));
}
};

//Add basic capabilities to the Ext.Element.Flyweight class
Ext.override(El.Flyweight, fx.El);

/**
* @class Ext.ux.plugin.VisibilityMode
* @version 1.3.1
* @author Doug Hendricks. doug[always-At]theactivegroup.com
* @copyright 2007-2009, Active Group, Inc. All rights reserved.
* @license <a href="http://www.gnu.org/licenses/gpl.html">GPL 3.0</a>
* @donate <a target="tag_donate" href="http://donate.theactivegroup.com"><img border="0" src="http://www.paypal.com/en_US/i/btn/x-click-butcc-donate.gif" border="0" alt="Make a donation to support ongoing development"></a>
* @singleton
* @static
* @desc This plugin provides an alternate mechanism for hiding Ext.Elements and a new hideMode for Ext.Components.<br />
* <p>It is generally designed for use with all browsers <b>except</b> Internet Explorer, but may used on that Browser as well.
* <p>If included in a Component as a plugin, it sets it's hideMode to 'nosize' and provides a new supported
* CSS rule that sets the height and width of an element and all child elements to 0px (rather than
* 'display:none', which causes DOM reflow to occur and re-initializes nested OBJECT, EMBED, and IFRAMES elements)
* @example
var div = Ext.get('container');
new Ext.ux.plugin.VisibilityMode().extend(div);
//You can override the Element (instance) visibilityCls to any className you wish at any time
div.visibilityCls = 'my-hide-class';
div.hide() //or div.setDisplayed(false);

// In Ext Layouts:
someContainer.add({
xtype:'flashpanel',
plugins: [new Ext.ux.plugin.VisibilityMode() ],
...
});

// or, Fix a specific Container only and all of it's child items:
// Note: An upstream Container may still cause Reflow issues when hidden/collapsed

var V = new Ext.ux.plugin.VisibilityMode({ bubble : false }) ;
new Ext.TabPanel({
plugins : V,
defaults :{ plugins: V },
items :[....]
});
*/
Ext.ux.plugin.VisibilityMode = function(opt) {

Ext.apply(this, opt||{});

var CSS = Ext.util.CSS;

if(CSS && !Ext.isIE && this.fixMaximizedWindow !== false && !Ext.ux.plugin.VisibilityMode.MaxWinFixed){
//Prevent overflow:hidden (reflow) transitions when an Ext.Window is maximize.
CSS.updateRule ( '.x-window-maximized-ct', 'overflow', '');
Ext.ux.plugin.VisibilityMode.MaxWinFixed = true; //only updates the CSS Rule once.
}

};


Ext.extend(Ext.ux.plugin.VisibilityMode , Object, {

/**
* @cfg {Boolean} bubble If true, the VisibilityMode fixes are also applied to parent Containers which may also impact DOM reflow.
* @default true
*/
bubble : true,

/**
* @cfg {Boolean} fixMaximizedWindow If not false, the ext-all.css style rule 'x-window-maximized-ct' is disabled to <b>prevent</b> reflow
* after overflow:hidden is applied to the document.body.
* @default true
*/
fixMaximizedWindow : true,

/**
*
* @cfg {array} elements (optional) A list of additional named component members to also adjust visibility for.
* <br />By default, the plugin handles most scenarios automatically.
* @default null
* @example ['bwrap','toptoolbar']
*/

elements : null,

/**
* @cfg {String} visibilityCls A specific CSS classname to apply to Component element when hidden/made visible.
* @default 'x-hide-nosize'
*/

visibilityCls : 'x-hide-nosize',

/**
* @cfg {String} hideMode A specific hideMode value to assign to affected Components.
* @default 'nosize'
*/
hideMode : 'nosize' ,

ptype : 'uxvismode',
/**
* Component plugin initialization method.
* @param {Ext.Component} c The Ext.Component (or subclass) for which to apply visibilityMode treatment
*/
init : function(c) {

var hideMode = this.hideMode || c.hideMode,
plugin = this,
bubble = Ext.Container.prototype.bubble,
changeVis = function(){

var els = [this.collapseEl, this.actionMode].concat(plugin.elements||[]);

Ext.each(els, function(el){
plugin.extend( this[el] || el );
},this);

var cfg = {
visFixed : true,
animCollapse : false,
animFloat : false,
hideMode : hideMode,
defaults : this.defaults || {}
};

cfg.defaults.hideMode = hideMode;

Ext.apply(this, cfg);
Ext.apply(this.initialConfig || {}, cfg);

};

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

// Bubble up the layout and set the new
// visibility mode on parent containers
// which might also cause DOM reflow when
// hidden or collapsed.
if(plugin.bubble !== false && this.ownerCt){

bubble.call(this.ownerCt, function(){
this.visFixed || this.on('afterlayout', changeVis, this, {single:true} );
});
}

changeVis.call(this);

}, c, {single:true});

},
/**
* @param {Element/Array} el The Ext.Element (or Array of Elements) to extend visibilityCls handling to.
* @param {String} visibilityCls The className to apply to the Element when hidden.
* @return this
*/
extend : function(el, visibilityCls){
el && Ext.each([].concat(el), function(e){

if(e && e.dom){
if('visibilityCls' in e)return; //already applied or defined?
Ext.apply(e, fx.El);
e.visibilityCls = visibilityCls || this.visibilityCls;
}
},this);
return this;
}

});

Ext.preg && Ext.preg('uxvismode', Ext.ux.plugin.VisibilityMode );
/** @sourceURL=<uxvismode.js> */
Ext.provide && Ext.provide('uxvismode');
})();

ktcorby
17 Nov 2009, 11:00 AM
I am having a problem with a Ext.ux.Media.Panel that contains a quicktime video. I am viewing it in Firefox 3.5.5 and I have quicktime 7.6.4 installed. I am trying to display the movie in two panels: one small and one large. The idea is that the app looks like a dashboard panel with lots of little portlets that can be maximized, but maximizing them actually just brings another panel to the front of a card layout. The actual size of the movie is 600x510 but the small panel is about half of that size and the large panel is much larger.

Things seem to work if I set the scale parameter to 1, but then the movie is too large for the small panel and too small for the larger one. The 'TOFIT' scale value works for the larger panel but not the smaller one, 'ASPECT' doesn't work for either, and other numeric scaling values also don't work. By "don't work" I mean that the movie's control panel is visible and the movie is downloaded by the browser, but you can't actually see the content.

Here is the relevant part of my code:



function PredictionMoviePanel(options) {
this.parseOptions(options, {
dashboardPanelId: { required: true }
});
StalkDashboardPanel.call(this, CcriObject.combine(options, {
title: "Tracking -> Where -> Prediction vs. Time",
maxPanelId: 'preictionVsTimeMaxPanel'
}));

this.maxPanel = {
layout: 'border',
items: [
{
region: 'center',
layout: 'fit',
items: new Ext.ux.Media.Panel({
mediaCfg: {
mediaType: 'QT',
url: 'sampleMovie.mov',
autoSize: true,
start: false,
controls: true,
loop: false,
scale: "TOFIT",
params:{
QTSRC : '@url',
QTSRCDontUseBrowser: true,
src : null //disable browser download
}
}
})
},
{
region: 'east',
collapsible: true,
width: 300,
frame: true,
bodyStyle:'padding:5px 5px 0',
title: 'Options',
html: '<p>Maybe some controls here.</p>'
}
]
};
this.minPanel = {
layout: 'fit',
height: 350,
items: new Ext.ux.Media.Panel({
mediaCfg: {
mediaType: 'QT',
url: 'sampleMovie.mov',
autoSize: true,
start: false,
controls: true,
loop: false,
scale: 'TOFIT',
params:{
QTSRC : '@url',
QTSRCDontUseBrowser: true,
src : null //disable browser download
}
}
})
};
this.initPanels(this.minPanel, this.maxPanel);
}

PredictionMoviePanel.prototype = new StalkDashboardPanel("proto");

hendricd
17 Nov 2009, 11:22 AM
@ktcorby --

In order for autoSize to be effective, you would need to specify macro placeHolders for the calculated Component size metrics:



items: new Ext.ux.Media.Panel({
mediaCfg: {
mediaType: 'QT',
url: 'sampleMovie.mov',
autoSize: true,
start: false,
controls: true,
height : '@height',
width : '@width',
renderOnResize : true, //this may be required (and ugly if necessary)
loop: false,
scale: "TOFIT",
params:{
QTSRC : '@url',
QTSRCDontUseBrowser: true,
src : null //disable browser download
}
}
})
You may have to set fixed widths/heights to maintain reasonable rendering aspect ratios for QT to render to.

But, given your border layout, I'm not sure how QT is going to react to region resizing (via the splitter). :-?

Beyond that, seeing it in action might shed some more light on your layout. Got a public demo url to look at?

ktcorby
23 Nov 2009, 10:13 AM
@ktcorby --

In order for autoSize to be effective, you would need to specify macro placeHolders for the calculated Component size metrics:

<snipped>

Beyond that, seeing it in action might shed some more light on your layout. Got a public demo url to look at?

Doug, thanks very much - that did the trick for me. It doesn't seem that I need the renderOnResize tag.

Thanks again!
- Kevin

chatfipa
24 Nov 2009, 5:20 AM
Hi.

I noticed that Ext.Element.isMasked () stopped working when I included the uxmedia lib in my app - sample app attached.

The reason for this is that uxmedia defines an override for Ext.Element.mask (), unmask (), etc. but doesn't provide an override for Ext.Element.isMasked ()
The default isMasked () function attempts to access "data" which causes a Javascript error.

I can fix this by providing my own override - e.g.:
Ext.override(Ext.Element, {
isMasked : function() {
return this._mask && this._mask.isDisplayed ();
}
});

There also appears to be another override to Ext.Element.Flyweight

Some questions for Doug:
* is it a requirement to override standard Ext classes or could these be moved to Ext.ux.Media classes (e.g. Ext.ux.Media.Element) ?
* other missing Ext.Element overrides (e.g. Ext.Element.enableDisplayMode () uses "data" also) ?

Thanks.

hendricd
24 Nov 2009, 5:37 AM
* is it a requirement to override standard Ext classes or could these be moved to Ext.ux.Media classes (e.g. Ext.ux.Media.Element) ?
* other missing Ext.Element overrides (e.g. Ext.Element.enableDisplayMode () uses "data" also) ?


@chatfipa --
Ext's current Element.mask design is not capable of masking IFRAME, EMBED, OBJECTS (as these tags do not support renderable childNodes). Thus, the media element's immediate parent must become the mask target. The overrides are necessary to control overflow and other style attributes that might cause the (masked) child element to reflow when the mask is shown/removed (trashing your Flash object, movie, or audio player).

This is all compounded somewhat since ux.Media and subclasses are designed to support Ext 2 and 3 with the same build. (Ext 3 has undergone many internal changes along it's short life, and you've just noticed some of the growing pains). ;)

What specific Ext 3/uxMedia versions are you dealing with at the moment? There is a latest compatibility build available in SVN that may resolve some of the masking issues, but I'll review the overrides again.

Thanks for the report.

chatfipa
24 Nov 2009, 6:14 AM
@chatfipa --
What specific Ext 3/uxMedia versions are you dealing with at the moment? There is a latest compatibility build available in SVN that may resolve some of the masking issues, but I'll review the overrides again.


The function that I had a problem with was isMasked () and the fix I posted takes care of that. Looking at the source for Ext.Element, it looks like enableDisplayMode () should also need a fix as it refers to the same "data" element.

ktcorby
24 Nov 2009, 6:45 AM
I have a new problem with my Ext.ux.Media.Panel that contains a quicktime movie. I am opening a model dialog (Ext.Window) over top of it and it is bleeding through on top of the dialog. Is there some way to fix the depth of the media panel so that it doesn't cover the dialog?

Thanks,
Kevin

Movie panel:


this.minPanel = {
id: 'predictionMovieMinPanel',
layout: 'fit',
items: new Ext.ux.Media.Panel({
mediaCfg: {
mediaType: 'QT',
url: 'sampleMovie.mov',
autoSize: true,
start: false,
controls: true,
loop: false,
height: '@height',
width: '@width',
scale: "ASPECT",
params:{
QTSRC : '@url',
QTSRCDontUseBrowser: true,
src : null //disable browser download
}
}
})
};
Modal dialog:


this.window = new Ext.Window({
title: 'New Threat Track',
modal: true,
layout: 'fit',
iconCls: 'tracking-nav-icon'
});
Button to show modal dialog:


new Ext.Button({
text: 'New',
iconCls: 'add-tracking-icon',
listeners: {
scope: this,
'click': function() {
_.each(self.modalDialogListeners, function(l) {l.onModalDialog();});
(new AddTrackingPanel({
modalDialogListeners: self.modalDialogListeners,
analysisGroupStore: this.analysisGroupStore,
layers: this.layers,
featuresStore : this.featuresStore,
queriesStore : this.queriesStore,
queryCriteriaStore: this.queryCriteriaStore,
wfsUrl: this.wfsUrl
})).show(this.controlPanel);
}
}

hendricd
24 Nov 2009, 7:05 AM
@ktcorby -- Try these:

Movie panel:


this.minPanel = {
id: 'predictionMovieMinPanel',
layout: 'fit',
items: new Ext.ux.Media.Panel({
mediaCfg: {
mediaType: 'QT',
url: 'sampleMovie.mov',
autoSize: true,
start: false,
controls: true,
loop: false,
height: '@height',
width: '@width',
scale: "ASPECT",
params:{
wmode : 'transparent', //QT might not honor it ?
QTSRC : '@url',
QTSRCDontUseBrowser: true,
src : null //disable browser download
}
}
})
};
and/or:


Ext.useShims = true;
this.window = new Ext.Window({
title: 'New Threat Track',
modal: true,
layout: 'fit',
iconCls: 'tracking-nav-icon',
shim : true
});

chatfipa
25 Nov 2009, 4:37 AM
@chatfipa --
What specific Ext 3/uxMedia versions are you dealing with at the moment? There is a latest compatibility build available in SVN that may resolve some of the masking issues, but I'll review the overrides again.

Thanks for the report.

Ext 3.0
uxMedia 2.1.2

hendricd
25 Nov 2009, 4:45 AM
@chatfipa -- My goal in the next day or two, is remove the Ext.Element overrides altogether, but testing will be required to assess Ext 2.0 compatibility with that decision. :-?

My concern is the DOM reflow issues that may occur by removing it.

So, for now (for Ext 3.x), simply remove the overrides from uxMedia.js.

thesilentman
13 Dec 2009, 1:42 PM
Hello Doug,

I was playing around with uxmedia and Ext 3.1 (from the SVN) and I noticed a problem. In the beginning I thought it was an Ext bug but it seems it's not.
Here's the link:
http://www.extjs.com/forum/showthread.php?p=418282#post418282
Greets,
Frank

ibarm
14 Dec 2009, 1:54 AM
Hi,
Thanks for this nice lib, viewing media is easy with it but I can't find a generic function which show a media.
In fact, I'm looking for a method like: "showMedia(mediaUrl, mimeType)"
This method has to choice the best mediaType and display it inside a mediaWindow for example.
Is there any method looking like that? I think it exists, else i just have to write a map between mimetype and mediatype to realize it or perhaps i forgot something???
Thanks for answers,
Igor

dtex-lab
23 Dec 2009, 11:34 PM
Hi

Can maybe this extension help me?

I generate directly from javascript a excel and I want ask to the user to save it... exactly simulatina a response with content-disposition "Attachment".

A solution should be to send a request to the backend with target a new window or an iframe... but this is not possible with ajax... (i'm using Struts framework.. and I don't know what kind of response I will recieve.... it depending on the business logic on the server side....)
Anyway I can have on the client side (ExtJS / JS) the fully response (with also the content-disposition type)....

Content type can be a PDF or Excel or XML.... and so on..


Can this extension help me ? There is a way to don't use a url but directly "pass" data?
and maybe force user to save it ?

Or someone know some way to do it ? (wihout post to the server something and return it back... ) ?

I know that server side can save result on a temporary file and send back a "command" to the client in order to request again it in a new window/frame... but I would like found a solution without send another request to the server.

thanks

hendricd
24 Dec 2009, 6:03 AM
@dtex-lab --

In short, no. IF browsers permitted that (saving content directly to local filesystems), our world would have crashed long ago.

Data URLs are a possibility (for rendering such documents) but not for saving them, but legacy browsers don't support them, and you still can't save them when generated when created the client. It's just a security no-no! You'll have to POST a round-trip back to the server for downloading.

Having seen your other Forum posts on this 'dream', I'll offer the only practical way to get controlled content-disposition consideration by the browser: Form submit to an IFRAME. Content-disposition (Save As Dialog) handling is only possible through a browser window or FRAME/IFRAME.

ManagedIFrame's submitAsTarget method simplifies posting forms and handling such content. Demo here (http://demos.theactivegroup.com/demodesk.html?demo=mif&script=mifsubmit).

Note: Your Struts design seems a bit constrained when it comes to a download vs 'other' data. Why not create services that handle download streams specifically and target those as needed? Try not put yourself in a scenario where you have to evaluate headers unnecessarily.

tfrugia
30 Dec 2009, 10:20 AM
Do you have a timeline for updating ux.Media for Ext 3.1? Just curious.

palash
13 Jan 2010, 5:51 PM
Hi
I have tried to implemented the xtype:'flashpanel' like the following:
index.html
********


<head>
<title>Content Adviser</title>
<link rel="stylesheet" type="text/css" href="../css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../css/user.css" />
<script type="text/javascript" src="../js/ext/ext-base.js"></script>
<script type="text/javascript" src="../js/ext/ext-all.js"></script>
<script type="text/javascript" src="../js/ext/uxMedia213/uxvismode.js"></script>
<script type="text/javascript" src="../js/ext/uxMedia213/uxmedia.js"></script>
<script type="text/javascript" src="../js/ext/uxMedia213/uxflash.js"></script>
<script type="text/javascript" src="../js/index.js"></script>
</head>

index.js
***********


var viewport = new Ext.Viewport({
layout: 'border',
items: [
// create instance immediately
new Ext.Panel({
region: 'north',
deferredRender: false,
height: 75,
items: [{
contentEl: 'header'
}]
}), {
title:'&nbsp;',
collapsible:true,
region: 'east',
split: true,
width: '25%', // give east and west regions a width
// minSize: 175,
// maxSize: 400,
margins: '0 5 0 0',
//layout: 'fit', // specify layout manager for items
items:[
new Ext.Panel({
border: false,
deferredRender: false,
layout:'anchor',
items: [
new Ext.TabPanel({
id: 'west-tabs',
border: false,
activeTab: 1,
tabPosition: 'top',
anchor: '100% 50%',
autoScroll: true,
height:2000,
items: [{
id: 'instructions-tab',
autoScroll: true,
html: '',
title: 'Instructions'
},{
id: 'filter-tab',
autoScroll: true,
html: filterMarkup,
title: 'Filter By ...'
}, {
id: 'notes-tab',
html: '<p></p>',
title: 'Notes',
autoScroll: true
}]
})
]
})
]
},
{
region: 'west',
split: true,
deferredRender: false,
border: false,
width:'40%',
autoScroll:true,
margins: '1 1 1 5',
items:[
new Ext.Panel({
id: 'center-panel',
// a center region is ALWAYS required for border layout
// deferredRender: false,
cls:'custCenter',
title: 'Template',
// anchor: '100% 50%',
// autoHeight: true
items:[
{
title : 'Template Preview',
border : true,
id : 'clockPanel',
xtype : 'flashpanel',
hideMode : 'nosize',
autoScroll: false,
//autoHeight : true,
//autoWidth: true,
mediaCfg : {
url: '../flash/Hello.swf',
id: 'clock',
start : true,
controls :true,
unsupportedText:'SWF viewr not working',
params: {
scale :'exactfit',
salign :'t'
}
}
}]

})
]
},
{
region: 'center',
split: true,
deferredRender: false,
border: true,
/*layout:'table',
layoutConfig: {
columns: 2
},*/
width:'35%',
autoScroll: true,
//autoHeight: true,
margins: '1 1 1 1',
items:[

new Ext.Panel({
id: 'contents',
//region: 'center',
title: 'Contents',
border: false
// deferredRender: false,
// anchor: '100% 50%',

})]
}]
});


Issue:
*****
The swf file ( Hello.swf) appears nicely in "west" panel in FF, Chrome , but in IE6, it doesn't load the swf ( I can see the title of the panel(i.e: 'Template Preview'), but the SWF doesn't load.
Any idea where I might get wrong.
Thanks
Palash


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



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

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

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

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


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


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

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

nextdigital
17 Jan 2010, 3:05 PM
Do you have a timeline for updating ux.Media for Ext 3.1? Just curious.

any news on this yet?

Skunkerbr
22 Jan 2010, 4:12 AM
Hi..

I noticed that in your demo, de charts are not loading any data, and your example script below (with last svn files) do de same in ext 3.1.0 and 3.0 (or just getting blank with no loadmask).



<head>
<link rel="stylesheet" type="text/css" href="lib/ext/resources/css/ext-all.css" />
<script type="text/javascript" src="lib/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="lib/ext/ext-all-debug.js"></script>

<script type="text/javascript" src="sovmain/plugins/uxmedia.js"></script>
<script type="text/javascript" src="sovmain/plugins/uxflash.js"></script>
<script type="text/javascript" src="sovmain/plugins/uxchart.js"></script>
<script type="text/javascript" src="sovmain/plugins/uxfusion.js"></script>


<script type="text/javascript">
Ext.onReady(function(){
fusionPanel = new Ext.ux.Chart.Fusion.Panel({
title : 'ux.FusionPanel',
collapsible : true,
renderTo : Ext.getBody(),

chartCfg :{ id : 'chart1'
,params:{
flashVars : {
debugMode : 0,
lang : 'EN'
}
}
},
autoScroll : true,
id : 'chartpanel',
chartURL : 'charts/Charts/Column3D.swf',
autoLoad :'charts/Gallery/Data/Column3D.xml' , //let Ext autoLoad do the same.
loadMask : {msg: 'Loading data...'},
autoMask : true,
width : 500,
height : 400,
listeners :{
//chartload : function(p,obj){console.log('chart '+obj.id+' loaded.')},
//chartrender : function(p,obj){console.log('chart '+obj.id+' rendered.')}
}
});

});
</script>
</head>

ambience
22 Jan 2010, 4:08 PM
This is by no means a well researched or well undestood fix. But it does allow our charts to continue working on 3.1-tunk. In uxfusionpak-debug.js I have changed the following if block:


if(!this.mediaCfg.renderOnResize){
this.renderMedia(this.mediaCfg,this[this.mediaEl] || ct);
}


to simply


this.renderMedia(this.mediaCfg,this[this.mediaEl] || ct);

If I had to guess, I would say that 3.1 changes when resize events are fired (maybe fewer or none in some cases) and the charts were not getting rendered as they were expecting a resize event that never came. Pure conjecture, of course.

hendricd
22 Jan 2010, 4:19 PM
This is by no means a well researched or well undestood fix. But it does allow our charts to continue working on 3.1-tunk. In uxfusionpak-debug.js I have changed the following if block:


if(!this.mediaCfg.renderOnResize){
this.renderMedia(this.mediaCfg,this[this.mediaEl] || ct);
}
to simply


this.renderMedia(this.mediaCfg,this[this.mediaEl] || ct);If I had to guess, I would say that 3.1 changes when resize events are fired (maybe fewer or none in some cases) and the charts were not getting rendered as they were expecting a resize event that never came. Pure conjecture, of course.

Indeed, you guessed right! Gonna have to re-write (likely fork) the whole resize logic due to the Layout/Render separation in 3.1.1.

hendricd
24 Jan 2010, 10:36 AM
Attention:

I have updated the SVN/trunk with a newer build of the uxMedia and related Chartpacks for TESTING on the latest Ext 3.1.1 trunk (might work on the 3.1.1 beta?).

Skunkerbr
25 Jan 2010, 5:01 AM
Thanks for the update!

Frst I want to say that uxMedia its great. Thks for sharing.

If you let me, I have some observations...

Im having some 'glitches' still and it concerns 3.1.0. Dont know if you are just updanting for 3.1.1+.

1. In the example script, height in the Ext.ux.Chart.Fusion.Panel seems not to be considered (it goes to the end of the page).

2. If I use setChartData, refresh the media isn't necessary, but when changing the chartURL, refreshMedia (necessary) changes the chart, but changes the data to the original chart data (not the changed one).

3. With the last update, the chart is rendering, but in one border layout that I have, placing the panel on a region, the first render shows no bbar on the panel (the chart 'eats' the bbar). Refreshing makes the bbar reappear. But this Im still trying to replicate on a example. (this was ok on 2.2 and 3.0)

diparc
25 Jan 2010, 2:25 PM
Hi,

I have the following code, for some reason the divFlash.getBridge() is always null.
can someone pls help -


var tradeSchedulePanel = new Ext.ux.Media.Flex.Panel({
id: 'tradeScheduleBridge',
renderTo:'flexDiv',
mediaCfg : {
id: 'tradeScheduleBridge',
mediaType: 'SWF',
url: '/flex/Logic-1443.swf',
start: true,
scripting: true,
height: 320,
width: 300,
params: {
allowScriptAccess: 'sameDomain',
quality: 'high',
flashVars:{
styleURL: '/flex/style-' + '1443' + '.swf',
moduleName:'/flex/tradeSchedule/TradeSchedule-1443.swf',
bridgeName: 'tradeScheduleBridge'
}
}
}
});



if (tradeSchedulePanel.mediaCfg && tradeSchedulePanel.mediaCfg.params && tradeSchedulePanel.mediaCfg.params.flashVars) {
tradeSchedulePanel.mediaCfg.params.flashVars.bridgeName = 'tradeScheduleBridge';
}


var v = null;
if (message) {
v = message.tradeSchedule;
}

var divFlash = Ext.ComponentMgr.get('tradeScheduleBridge');
var flexApp = divFlash.getBridge();

hendricd
25 Jan 2010, 4:17 PM
@diparc --
Flex objects are just like an other external Flash object, you must wait for the Flex object to report ready. Set a 'flexinit' listener, then go to work.

diparc
25 Jan 2010, 6:04 PM
tried adding a listener, no luck. the function customFlexInit gets called but the bridge is still null. not sure if this helps but, I see a blank swf, I think i should expect to see the flex object without the data atleast.

......
......

tradeSchedulePanel.initComponent.apply(tradeSchedulePanel, arguments);
tradeSchedulePanel.on('flexinit', this.customFlexInit(message));


},
customFlexInit:function(message) {
var v = null;
if (message) {
v = message.tradeSchedule;
}

var divFlash = Ext.ComponentMgr.get('tradeScheduleBridge');
var flexApp = divFlash.getBridge();

WarEagle26
27 Jan 2010, 2:17 PM
I'm still fairly new to Ext JS and have what I believe should be a fairly simple problem to solve, I'm just not sure of the right way to do it. I have a very basic .swf object that I have created and am able to display it on screen. Basically, my screen is divided into two panels...one contains my .swf object and the other is a gridpanel.

This is where I create my FlashComponent:


var myTest = new Ext.ux.FlashComponent({
mediaCfg: {
mediaType : 'SWF'
,url : 'mySWF.swf'
,unsupportedText: 'Flash Player Required'
,style: {width:'100%',height:'100%',display:'inline'}
,params: {
allowScriptAccess : 'always'
,wmode :'transparent'
}
}
});


My .swf object allows you to roll over and highlight certain areas of an image. What I would like to be able to do is click on the different areas in my .swf and each time I click on an area I want to pass a corresponding variable into Ext. I could then use that variable to filter my data stores that feed my grid.

I would also like to be able to pass variables back to my .swf object from Ext and have the .swf object update.

Is this an easy thing to accomplish? Any help would be much appreciated.

(I apologize if this has already been covered in this thread. I looked through most of the 70 pages and wasn't able to find anything quite like what I needed. Then again...I could have just missed something.)

richgoldmd
28 Jan 2010, 1:10 PM
......
......

tradeSchedulePanel.initComponent.apply(tradeSchedulePanel, arguments);
tradeSchedulePanel.on('flexinit', this.customFlexInit(message));



The second line should be:


tradeSchedulePanel.on('flexinit', this.customFlexInit, this);
See if that helps.

-Rich

hendricd
28 Jan 2010, 3:54 PM
I'm still fairly new to Ext JS and have what I believe should be a fairly simple problem to solve, I'm just not sure of the right way to do it. I have a very basic .swf object that I have created and am able to display it on screen. Basically, my screen is divided into two panels...one contains my .swf object and the other is a gridpanel.

This is where I create my FlashComponent:


var myTest = new Ext.ux.FlashComponent({
mediaCfg: {
mediaType : 'SWF'
,url : 'mySWF.swf'
,unsupportedText: 'Flash Player Required'
,style: {width:'100%',height:'100%',display:'inline'}
,params: {
allowScriptAccess : 'always'
,wmode :'transparent'
}
}
});
My .swf object allows you to roll over and highlight certain areas of an image. What I would like to be able to do is click on the different areas in my .swf and each time I click on an area I want to pass a corresponding variable into Ext. I could then use that variable to filter my data stores that feed my grid.

I would also like to be able to pass variables back to my .swf object from Ext and have the .swf object update.

Is this an easy thing to accomplish? Any help would be much appreciated.

(I apologize if this has already been covered in this thread. I looked through most of the 70 pages and wasn't able to find anything quite like what I needed. Then again...I could have just missed something.)

@war -- You are mixing the Ext.ux.FlashComponent class that ships with Ext with config options unique to ux.Media.Flash extensions.

Sorta need to pick one or the other. ;)

WarEagle26
29 Jan 2010, 6:27 AM
You are mixing the Ext.ux.FlashComponent class that ships with Ext with config options unique to ux.Media.Flash extensions.

Thanks Doug. I've changed my code to look like this now...



var myTest = new Ext.ux.Media.Flash({
xtype:'flashpanel'
,mediaCfg: {
start:true
,controls:false
,url : 'mySWF.swf'
,unsupportedText: 'Flash Player Required'
,params: {
allowScriptAccess : 'always'
,wmode :'transparent'
}
}
});


Still not sure how to get an event inside my .swf object to pass a variable into Ext...and vice versa.

hendricd
30 Jan 2010, 10:06 AM
@WarEagle26 --

The Flash class supports inline event and ExternalInterface method bindings in the mediaCfg:



var myTest = new Ext.ux.Media.Flash({
xtype:'flashpanel'
,mediaCfg: {
start:true
,controls:false
,url : 'mySWF.swf'
,unsupportedText: 'Flash Player Required'
,params: {
allowScriptAccess : 'always'
,wmode :'transparent'
},
listeners : { //listen for public events raised by the Flash Component
click : console.info
},
// Define known externalInterface methods
boundExternals : [ 'sendMeAValue',
{name: 'someOtherMethod' , returnType:'xml' } //alternate declaration
] ,
externalsNamespace: 'widget'
}
});

myTest.render('somewhere');

myTest.widget.sendMeAValue('wakeUp', 45, [3,6,2,8,8,900] );

hendricd
30 Jan 2010, 1:01 PM
@diparc --

The 'id' property of the mediaCfg should match/define your bridge name.

I've whipped up an example on the demo site demonstrating various bindings that the FABridge emulation supports here (http://demos.theactivegroup.com/demodesk.html?demo=flex&script=bridging).



tried adding a listener, no luck. the function customFlexInit gets called but the bridge is still null. not sure if this helps but, I see a blank swf, I think i should expect to see the flex object without the data atleast.

......
......

tradeSchedulePanel.initComponent.apply(tradeSchedulePanel, arguments);
tradeSchedulePanel.on('flexinit', this.customFlexInit(message));


},
customFlexInit:function(message) {
var v = null;
if (message) {
v = message.tradeSchedule;
}

var divFlash = Ext.ComponentMgr.get('tradeScheduleBridge');
var flexApp = divFlash.getBridge();

WarEagle26
4 Feb 2010, 10:44 AM
@WarEagle26 --

The Flash class supports inline event and ExternalInterface method bindings in the mediaCfg:



var myTest = new Ext.ux.Media.Flash({
xtype:'flashpanel'
,mediaCfg: {
start:true
,controls:false
,url : 'mySWF.swf'
,unsupportedText: 'Flash Player Required'
,params: {
allowScriptAccess : 'always'
,wmode :'transparent'
},
listeners : { //listen for public events raised by the Flash Component
click : console.info
},
// Define known externalInterface methods
boundExternals : [ 'sendMeAValue',
{name: 'someOtherMethod' , returnType:'xml' } //alternate declaration
] ,
externalsNamespace: 'widget'
}
});

myTest.render('somewhere');

myTest.widget.sendMeAValue('wakeUp', 45, [3,6,2,8,8,900] );



@hendricd

I've been fighting with this for a couple days now trying to get this to work, but I just can't seem to figure out what I'm doing wrong. Your previous reply seemed pretty straightforward, but I'm obviously still not connecting all the dots. I would really appreciate any more help you could pass along.

Here is my extjs:


var myTest = new Ext.ux.Media.Flash({
xtype:'flashpanel'
,mediaCfg: {
start:true
,controls:false
,url : 'mySWF.swf'
,unsupportedText: 'Flash Player Required'
,params: {
allowScriptAccess : 'always'
,wmode :'transparent'
},
,listeners: {
click : console.info
}
,boundExternals : [ 'sendMeAValue']
,externalsNamespace: 'myNamespace'
}
});

//I have an EXT button that, when pressed, calls this function

function sendToFlash() {
myTest.myNamespace.sendMeAValue('sent from javascript');
}

This is where I'm adding the media panel to an existing ColdExt panel:


<ext:panel id="swfPanel" region="north" height="400" layout="fit" itemsJS="myTest" />


And this is my actionscript:


import flash.external.ExternalInterface;
namespace myNamespace;

//myText2 is a dynamic text field that I would like to be set to "sent from javascript"
myNamespace function showValue(val:String){
myText2.text = val;
}

ExternalInterface.addCallback("sendMeAValue",showValue);


I get an error saying "myTest.myNamespace is undefined"

I've never used namespaces before, so maybe I'm just not implementing that part properly in my actionscript.

Bucs
6 Feb 2010, 7:33 AM
Great ux Doug! I might be starting a project that will require users to launch and complete videos, which will necessitate event monitoring on completion. I take it that you can add simple ExtJS listeners to the events exposed by your Media control? If so, very cool as that is all I'll need.

Also, I see the support for Flash and RealVideo, could it also work with WMV? I see it says "add your own as needed", just not sure what all is entailed in that. I am obviously not a "video guru".

Thanks a lot tho, very cool component :)

hendricd
6 Feb 2010, 7:43 AM
@WarEagle26--

Note that the externalsNamespace config option simply gives a 'binding' (with the uxMediaFlash instance) to reference the external interfaces supported by your Flash object.

I misplaced the externalsNamespace config in the sample I gave earlier. Try this again:



var myTest = new Ext.ux.Media.Flash({
xtype:'flashpanel'
,externalsNamespace: 'myNamespace'
,mediaCfg: {
start:true
,controls:false
,url : 'mySWF.swf'
,unsupportedText: 'Flash Player Required'
,params: {
allowScriptAccess : 'always'
,wmode :'transparent'
},
,listeners: {
click : console.info
}
,boundExternals : [ 'sendMeAValue']
}
});

//I have an EXT button that, when pressed, calls this function

function sendToFlash() {
myTest.myNamespace.sendMeAValue('sent from javascript');
}
Also, if you wanted to forego the namespace reference altogether, you could also use:

myTest.getInterface().sendMeAValue('something');

hendricd
6 Feb 2010, 7:50 AM
Great ux Doug! I might be starting a project that will require users to launch and complete videos, which will necessitate event monitoring on completion. I take it that you can add simple ExtJS listeners to the events exposed by your Media control? If so, very cool as that is all I'll need.

Also, I see the support for Flash and RealVideo, could it also work with WMV? I see it says "add your own as needed", just not sure what all is entailed in that. I am obviously not a "video guru".

Thanks a lot tho, very cool component :)
@Bucs -- Yes the Component suite is quite flexible. I've pre-defined many popular mediaCfg's and you certainly can add your own to support odd browsers plugins you might wish to deploy (assuming the interfaces are well-known and well-behaved).

I will offer this advice, however: Evaluate your long-term needs and try to select a single player that supports the MOST audio/video codecs with a single player (eg, Quicktime can support many and has an excellent API for binding events and playback control, and is widely installed on most browsers anyway).

Bucs
6 Feb 2010, 8:15 AM
Very cool, thanks for the advice. I'm pretty sure that the media company supplying the videos can dictate the format, so I would indeed request Quicktime format for all vids. I will know more next week and probably have more questions then if I can't figure things out on my own. Love the ExtJS style documentation tho for your components, very nice.

Haven't looked extensively at the code but looks like you're adding a global window object to reference the instantiated player and then creating a delegate for that object which monitors the player and raises events. Is this correct...is there an example of responding to say the completion event somewhere?

Thanks!

hendricd
6 Feb 2010, 8:26 AM
Very cool, thanks for the advice. I'm pretty sure that the media company supplying the videos can dictate the format, so I would indeed request Quicktime format for all vids. I will know more next week and probably have more questions then if I can't figure things out on my own. Love the ExtJS style documentation tho for your components, very nice.

Haven't looked extensively at the code but looks like you're adding a global window object to reference the instantiated player and then creating a delegate for that object which monitors the player and raises events. Is this correct...is there an example of responding to say the completion event somewhere?

Thanks!

@Bucs -- Every player author handles callbacks/events differently. There is no standard. The ux.Media classes simply normalize them into standard Ext-style events for use within Ext layouts.

You will not be requesting Quicktime format. Quicktime is a player that can render multiple video/audio formats (MOV, WAV, WMV, MP3, MP4, etc).. You'll ideally want to choose a browser plugin/player that supports the video formats you intend to handle.

Here are uxMedia demos of two good all-around (Flash-based) players that support multiple video formats. JWPLayer (http://demos.theactivegroup.com/demodesk.html?demo=media&script=jwplayer) and FlowPlayer (http://demos.theactivegroup.com/demodesk.html?demo=media&script=flowplayer).

Good luck in your in research.

richgoldmd
8 Feb 2010, 5:34 AM
Hi Doug,

I was testing my app in Safari/Webkit - I found that embedded PDFs (the media I need to use) do not shim on Webkit/Safari4. I tried your demo as well in Safari and the shimmed popup-window displays BEHIND the PDF.

I tried looking for workarounds for Safari and webkit, to no avail. Any thoughts?

(My purpose is to use Air or more likely Titanium to wrap up my app, both based on Webkit. The behavior in the latest Titanium release mimics that of Safari4 - I haven't tested Air directly).

Thanks,

Rich

hendricd
8 Feb 2010, 4:20 PM
Hi Doug,

I was testing my app in Safari/Webkit - I found that embedded PDFs (the media I need to use) do not shim on Webkit/Safari4. I tried your demo as well in Safari and the shimmed popup-window displays BEHIND the PDF.

I tried looking for workarounds for Safari and webkit, to no avail. Any thoughts?

(My purpose is to use Air or more likely Titanium to wrap up my app, both based on Webkit. The behavior in the latest Titanium release mimics that of Safari4 - I haven't tested Air directly).

Thanks,

Rich
@rich -- You'll need to shim an Ext.Component expected to be rendered/displayed OVER the PDF. Is that your goal? Can you post your mediaCfg for the PDF and the Component you are rendering over it?

richgoldmd
8 Feb 2010, 4:59 PM
@rich -- You'll need to shim an Ext.Component expected to be rendered/displayed OVER the PDF. Is that your goal? Can you post your mediaCfg for the PDF and the Component you are rendering over it?

I am doing as you suggest. Shimming is working in other browsers, just not in Safari or WebKit. I used your ux.Media PDF demo with the shimmed floating window and the behavior is the same as my app. BTW, this behavior is not specific to your extension, it occurs with or without it.

I was hoping you might have some idea about it.

Thanks,

Rich

WarEagle26
12 Feb 2010, 8:30 AM
Note that the externalsNamespace config option simply gives a 'binding' (with the uxMediaFlash instance) to reference the external interfaces supported by your Flash object.

I misplaced the externalsNamespace config in the sample I gave earlier. Try this again:



var myTest = new Ext.ux.Media.Flash({
xtype:'flashpanel'
,externalsNamespace: 'myNamespace'
,mediaCfg: {
start:true
,controls:false
,url : 'mySWF.swf'
,unsupportedText: 'Flash Player Required'
,params: {
allowScriptAccess : 'always'
,wmode :'transparent'
},
,listeners: {
click : console.info
}
,boundExternals : [ 'sendMeAValue']
}
});

//I have an EXT button that, when pressed, calls this function

function sendToFlash() {
myTest.myNamespace.sendMeAValue('sent from javascript');
}
Also, if you wanted to forego the namespace reference altogether, you could also use:

myTest.getInterface().sendMeAValue('something');

@hendricd -- Thanks for all your help on this! I was finally able to get the javascript to actionscript communication working. I guess because I'm putting myTest inside a ColdExt panel I had to access the external interface function this way...


Ext.getCmp('ColdExtPanel').getComponent('someId').getInterface().sendMeAValue(value);
//where 'ColdExtPanel' is the id of my ColdExt panel and 'someId' would be the id of myTest

I still can't get the actionscript to javascript communication working, however. In my actionscript I have:


//this gets executed when I click on a particular button
ExternalInterface.call("sentFromFlash", "sent from actionscript");

And in my javascript I have:



function sentFromFlash(value){
alert(value);
}

Any thoughts as to what I may be doing wrong?
Thanks for your help!

BilelExtjs
17 Feb 2010, 3:47 PM
I need Help please..its about the HTML fragment of the flow-player plugin which alow me to use Ext.ux.media....i mean after including (ext-base.js;ext-all.js) what do i include???

please i need help send me the HTML fragment please!!!!!!!!!!!!!!!!!!!!

BilelExtjs
18 Feb 2010, 3:57 AM
Please does anyone have a clear example using "uxmedia" i want to put my flowplayer inside a window but i'm not able to do it.. please i need help :-/ :((

WarEagle26
23 Feb 2010, 5:59 AM
I still can't get the actionscript to javascript communication working, however. In my actionscript I have:


//this gets executed when I click on a particular button
ExternalInterface.call("sentFromFlash", "sent from actionscript");

And in my javascript I have:



function sentFromFlash(value){
alert(value);
}

Any thoughts as to what I may be doing wrong?

I thought that I could do an ExternalInterface.call from my actionscript but I never could get that to work. I ended up having to use fscommand instead and put in a listener that listens for fscommand commands:



uh60swf = new Ext.ux.Media.Flash({
id:'someId',
xtype:'flashpanel',
listeners: {
fscommand : function(panel,command,args){
sentFromFlash (command,args);
}
},
mediaCfg: {
start : true
,controls : false
,url : 'mySWF.swf'
,unsupportedText: 'Flash player required.'
,params: {
allowscriptaccess :'always'
,wmode :'transparent'
}
,boundExternals: ['sendToFlash']
}
});

Thanks for all the help!

balybaloo
23 Feb 2010, 6:45 AM
richgoldmd : i have the same problem with chrome 4 and with Firefox 3.6.

How can we can fix it?

richgoldmd
23 Feb 2010, 7:33 AM
I can reproduce the problem in FF 3.6 as well. But it seems to be specific to Acrobat, flash player does not have the same issue.

I think it is a browser issue, and not easily overcome. In my particular case, we are moving away from using PDFs in our app as a ersult.

Nash-T
23 Feb 2010, 1:12 PM
Does anyone know the correct way to create a silverlight canvas in an extjs form using uxmedia2? or how to create a silverlight canvas in-line?

Here is what I have tried:



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

I have also tried this code with all the commented lines uncommented, no luck. BTW, I also have copied the updated silverlight code 'damian79' posted previously into the uxmedia.js file.


update: This works:


{
title : 'SigDraw'
,id : 'signaturePanel'
,xtype : 'mediapanel'
,autoHeight : true
,autoWidth: true
,mediaCfg : {
mediaType:'SILVERLIGHT2'
,source: 'SignatureDraw.xap'
,id: 'sigdraw'
,height: 130
,width : '100%'
,params: {
background : 'green'
}
}
}

Saneth
26 Feb 2010, 9:19 AM
Hello,

I am testing last svn release of media (on Feb 16) against Ext 3.1.1 with following simple case :




Ext.onReady(function(){

var win = new Ext.Window({
layout: 'fit',
title: 'TEST',
items: [new Ext.ux.MediaPanel({
mediaCfg:{
mediaType: 'HTM',
url: 'http://www.extjs.com'
}
})]
});

win.show();

var win2 = new Ext.ux.MediaWindow({
title: 'TEST',
mediaCfg:{
mediaType: 'HTM',
url: 'http://www.extjs.com'
}
});

win2.show();

});

I would like both windows media content to be able to fit to the window when resizing vertically. Is there a config option to achieve this ?


EDIT :

After a few tries, I came up with the following implementation to suit this need :



var win = new Ext.Window({
layout: 'fit',
title: 'TEST',
items: [new Ext.ux.MediaPanel({
autoScroll: false,
border: false,
style: 'height:100%;',
bodyStyle: 'height:100%;',
mediaCfg: {
mediaType: 'HTM',
url: 'http://www.extjs.com'
}
})]
});

win.show();

soulgen
9 Mar 2010, 5:27 AM
Hello, I have the code like this:



var panel = new Ext.Panel({
id: 'ClockPanel',
title: 'Clock Panel',
renderTo: 'clock-container',
width: 235,
height: 200,
style: 'margin: 10px;',
items: [
{
xtype: 'mediapanel',
mediaCfg: {
mediaType: 'SWF',
url: 'clock.swf',
start: true,
controls: true
}
}
]
});

Ext.Msg.alert('Test', 'Hello World');


And, I got an error informed by firebug like this:
Ext.Element.cache is undefined

Because of this error, the entire next codes (substitude by the alert box) won't works...

Any idea?

Thank you before

soulgen
14 Mar 2010, 6:50 PM
Problem solved:

I commented that error code line.

It's looks like the Ext.Element doesn't have cache property.

stephenliberty
26 Mar 2010, 5:00 PM
Hey,

I was playing around with the samples to try and figure this out, but just couldn't nail it. I've got a flash uploader (built in Flex). Next to it is a tree of folders that you can upload to. I'd like to make sure that the tree is disabled until the flash movie is done loading - otherwise when you click on a folder, it'll either throw an error or look like it did something but really didn't. There are a few other things I'd like to do when it gets done loading, but that's kind of irrelevant I guess. Anyway, I tried this code and I never got any kind of alert:
(note that "uid" is an id that I generate and flashParams is just an object of data that I need to have sent over as well - php session id, etc)

{
xtype:'flashpanel',
id:uid,
itemId:'uploaderMovie',
externalsNamespace:'uploaderMovie',
width:430,
hideLabel:true,
autoMask:true,
mediaCfg:{
start:true,
id:uid,
mediaType:'SWF',
height:220,
width:400,
url:'/flash/Uploader.swf',
eventSynch:true,
scripting:true,
controls:true,
params:{
allowScriptAccess:"always",
flashVars:flashParams
},
boundExternals:['setExtId','setFolder']
},
scope:this,
listeners:{
flashinit:function(C, playerObj){
alert('init')
}
}
}

I'm sure that I'm missing something simple here - I just can't nail it :(

art.home.ext
29 Mar 2010, 12:37 AM
Is the MediaDemo expected to work on 3.1.1 ?
I tried 3.2rc, 3.1.1 & 3.0.3 without success.

It works with 3.0.0.

The problem seems to come from the override in medpanel.js
It seems to work when removing it.

/*
Ext.override(Ext.Container,{
add : function(comp){
if(!this.items){
this.initItems();
}
var a = arguments, len = a.length;
if(len > 1){
for(var i = 0; i < len; i++) {
this.add(a[i]);
}
return;
}
if(comp){
var c = this.lookupComponent(this.applyDefaults(comp));
var pos = this.items.length;
if(this.fireEvent('beforeadd', this, c, pos) !== false && this.onBeforeAdd(c) !== false){
this.items.add(c);
c.ownerCt = this;
this.fireEvent('add', this, c, pos);
}
return c;
} else {return null;}
}
});
*/

hendricd
29 Mar 2010, 3:49 PM
@stephen--
Get rid of the DUPLICATE id created by mediaCfg.id = uid. That would generate multiple DOM element with the same ID as the MediaPanel container.

hendricd
29 Mar 2010, 3:52 PM
@art--

No the older mediademo is not compatible with most of Ext 3.0+.

See http://demos.theactivegroup.com/ and select some of the uxMedia demos in the left NavPanel for working Ext3 source samples.




Is the MediaDemo expected to work on 3.1.1 ?
I tried 3.2rc, 3.1.1 & 3.0.3 without success.

It works with 3.0.0.

The problem seems to come from the override in medpanel.js
It seems to work when removing it.

/*
Ext.override(Ext.Container,{
add : function(comp){
if(!this.items){
this.initItems();
}
var a = arguments, len = a.length;
if(len > 1){
for(var i = 0; i < len; i++) {
this.add(a[i]);
}
return;
}
if(comp){
var c = this.lookupComponent(this.applyDefaults(comp));
var pos = this.items.length;
if(this.fireEvent('beforeadd', this, c, pos) !== false && this.onBeforeAdd(c) !== false){
this.items.add(c);
c.ownerCt = this;
this.fireEvent('add', this, c, pos);
}
return c;
} else {return null;}
}
});
*/

travep
30 Mar 2010, 9:23 AM
I am very new to extjs & even newer to the user extensions. However, I came across this media player component & it's exactly what I need. I am interested in using it with JW player so I could us the same player to display audio, video & a jpg image.

I tried to get the zip files at the beginning of the thread but maybe I have gotten the wrong version of things somewhere. When attempting to load the mediapanel.html page I get an error on line 397 of the medpanel.js file when it tries to use the this.tree variable. It's undefined so this line (last line below) is unable to execute:



this.tree = get('samples');
this.tabs = get('demoTabs');
var sm = this.tree.getSelectionModel();


The samples id refers to a tree panel...do I need to include the tree libraries in order to see the demo locally so I can play with it? I apologize in advance for my obvious limitations with this stuff...I love the media library, though...

Thanks, Travis

hendricd
30 Mar 2010, 2:23 PM
@travep--
Already done for you. See: http://demos.theactivegroup.com/?demo=media&script=jwplayer

The demo site is built on Ext 3.x using the latest uxMedia classes. See the source Tab on the demo Window for sample code.

Good Luck.

travep
30 Mar 2010, 4:56 PM
Doug,

I know I'm being thick but I don't understand how it's used. When I view source on the html page I see a bunch of references to things I don't know about. $JIT, workers just to name a couple. The examples I've looked at and had some success muddling through had html files referencing a number of .js files...one of which was specific to the page at hand. I have minimally unzipped the 3.1 project & have been working mostly from the examples directory.

I looked at the API docs but I was unable to really latch onto things from it. I have unzipped all the zip files in the beginning of the thread & have copied the jwplayer.js file & put it in my media directory under examples. What do I use as an html file? Do I need to install other plugins other than those you've generously provided?

Travis

mschwartz
31 Mar 2010, 5:28 AM
@doug

Seems like the ExtJS people have unchained you from your desk and allowed you to post again.
:D

swarm
8 Apr 2010, 7:03 AM
I was wondering if it was possible to do something like this:



var mConfig = {
mediaType: 'HTM',
url: response.NextURL,
autoSize: true
};
var p = new Ext.ux.MediaWindow({
bodyStyle: 'position:relative; padding:0px;',
width: 800,
height: 600,
mediaCfg: mConfig,
title: 'title'
}).show();



and in the code that's loaded from my response.NextURL to put a handler or something that gives the user a button or link to close the MediaWindow?

hendricd
8 Apr 2010, 7:18 AM
I was wondering if it was possible to do something like this:



var mConfig = {
mediaType: 'HTM',
url: response.NextURL,
autoSize: true
};
var p = new Ext.ux.MediaWindow({
bodyStyle: 'position:relative; padding:0px;',
width: 800,
height: 600,
mediaCfg: mConfig,
title: 'title'
}).show();

and in the code that's loaded from my response.NextURL to put a handler or something that gives the user a button or link to close the MediaWindow?

@swarm --
The ManagedIFrame extension provides better support for what you seek. See this recent post (http://www.extjs.com/forum/showthread.php?p=456290#post456290) for more on how.

swarm
8 Apr 2010, 7:23 AM
@swarm --
The ManagedIFrame extension provides better support for what you seek. See this recent post (http://www.extjs.com/forum/showthread.php?p=456290#post456290) for more on how.


Does MIF work with Ext 3.2 yet? Also, I am already using ux.Media in other parts of my application and was aiming not to bloat it with to many extensions. I take it ux.Media doesn't have support for this?

hendricd
8 Apr 2010, 7:34 AM
Does MIF work with Ext 3.2 yet? Also, I am already using ux.Media in other parts of my application and was aiming not to bloat it with to many extensions. I take it ux.Media doesn't have support for this?

Yes, MIF is now Ext.3.2 compatible.

To do the same with uxMedia:HTM would require significant code maintenance on your part to keep it working x-browser.

swarm
8 Apr 2010, 7:37 AM
Yes, MIF is now Ext.3.2 compatible.

To do the same with uxMedia:HTM would require significant code maintenance on your part to keep it working x-browser.

Fair enough - the word significant has put me off :P will go down the route of MIF.

Great extensions btw!!

Eric24
13 Apr 2010, 8:50 AM
I'm trying to use uxMedia to display Acrobat using the PDFFRAME approach. Of course this works perfectly on FF and Safari, but in IE, I get the "IE has decided to protect you from yourself and block this site from downloading files that you don't really want anyway" info bar. I've added the site to the IE Trusted Sites list and checked that the security settings for that zone allow file downloads.

First of all, why does IE think this is file download? What's the difference between loading a PDF file into an iframe vs. loading a PNG file into an HTML page?

But beyond that, is there any hope for this? (And no, it's not really likely we can just tell everyone to use FF).

Note: Doug's Demo Desk shows has the same problem, but it doesn't seem like it has anything to do with my application.

hendricd
13 Apr 2010, 4:47 PM
I'm trying to use uxMedia to display Acrobat using the PDFFRAME approach. Of course this works perfectly on FF and Safari, but in IE, I get the "IE has decided to protect you from yourself and block this site from downloading files that you don't really want anyway" info bar. I've added the site to the IE Trusted Sites list and checked that the security settings for that zone allow file downloads.

First of all, why does IE think this is file download? What's the difference between loading a PDF file into an iframe vs. loading a PNG file into an HTML page?

But beyond that, is there any hope for this? (And no, it's not really likely we can just tell everyone to use FF).

Note: Doug's Demo Desk shows has the same problem, but it doesn't seem like it has anything to do with my application.

@Eric--

Much has to do with with the Content-Disposition headers your server may be sending to the browser.

Content_Disposition: inline; filename=something.pdf

would be a good start.

With properly relaxed security settings on IE, the demo site has no problem rendering PDF inline with uxMedia or an IFRAME.

Bucs
16 Apr 2010, 1:43 PM
I have a new project starting where I need to show videos and handle events like when a video finishes playing. I wanted to use the latest extension version, but it doesn't look like the Ext.ux.Media control is supported on the 3.x framework. Is this correct? And if so, are there any plans to port to 3.x?

Was really hoping to not have to go back to 2.2. Thanks.

hendricd
16 Apr 2010, 2:24 PM
I have a new project starting where I need to show videos and handle events like when a video finishes playing. I wanted to use the latest extension version, but it doesn't look like the Ext.ux.Media control is supported on the 3.x framework. Is this correct? And if so, are there any plans to port to 3.x?

Was really hoping to not have to go back to 2.2. Thanks.
@Bucs --
uxMedia IS compatible with Ext 2.x and 3.x

Bucs
17 Apr 2010, 3:38 AM
Hmmm, ok, guess I missed it when looking thru the 3.0 forum. When searching it seemed to only appear in the 2.0 forum and I would swear I did not see 3.0 under the "supported Ext releases". My bad.

Next question. I see that you have upgraded the Audio Events to handle the new HTML5 nuances...will the ux.Media do anything to handle the new HTML5 video tags at all? Is that even worth worrying about at this point? Given how Apple is so anti-Flash now, I want to avoid putting together a video solution that is not compatible with the new hardware or is outdated by new standards.

Also, in your opinion, what would be the most "accepted" video format to use for the web for an app that wants to serve video? Again, preferably non-Flash...would love to use the iPad to demonstrate the app when complete.

And lastly, do any of your demos (haven't downloaded yet) show building a custom component around the player? I will need to do this so that I can switch between loading HTML, a test questions component, and a video component into the same content panel.

Thanks Doug for your components and tutelage :)

hendricd
19 Apr 2010, 3:13 PM
@Bucs--

Interesting topic, and one I should have addressed a few months ago. But, first some interesting reading on the state of HTML5 and Video Codecs. Review these and continue:

http://arstechnica.com/open-source/news/2009/07/decoding-the-html-5-video-codec-debate.ars
http://lwn.net/Articles/372566/
http://diveintohtml5.org/video.html

(Some are redundant, but worth the ride.)

In the good-old days, it was IE vs the rest. Now, with advent of HTML5, it's H.264 vs Theora vs Flash vs Opera vs Firefox vs Webkit vs Apple vs mobile-devices vs YOU! Ironic, isn't it? What are standards for anyway? Pfft.. :-?

As far as uxMedia goes, you'd simply add a mediaType to the existing prototypes to support any tag you wish to render. Something like this should get you close:



//Define a suitable HTML5 video tag
Ext.ux.Media.mediaTypes.VIDEO5 = {
tag : 'video'
,cls : 'x-media x-media-video'
,controls : '@controls'
,autoSize :true
,cn : [ //let the browser choose the probable candidate
{ tag : 'source',
src : '@url.ogg',
type :'video/ogg; codecs="theora, vorbis"'
},
{ tag : 'source',
src : '@url.mp4',
type :'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'
}
]
};
Then, let uxMedia's Macro/goodies engine handle the rest:


new Ext.ux.Media.Window({
mediaCfg : {
mediaType : 'VIDEO5',
url : './assets/tutorial' //mp4/ogg
controls : 'controls'
}
play :function(){
var V;
if(V = this.getInterface()){
V.Play();
}
},
stop : function(){
var V;
if(V = this.getInterface()){
V.Stop();
}
},

load : function(url){
var V;
if(url && (V = this.getInterface())){
V.Open(url);
}
}

}).show()

So, what about IE, you ask?
I'd recommend the Flash Flowplayer or JwPlayers (uxMedia demos (http://demos.theactivegroup.com/?demo=media&script=flowplayer)/source here). They handle MPEG-4(H.264) / MPEG-3 containers quite nicely on all platforms (via Flash tho) , and I've already abstracted the full event/controls interfaces for you (but neither are always free).

Detection.
As shown above you can let the <video> tag TRY to render what you have available or use ext-basex (I'll be expanding uxMedia to detect those as well) to detect what video codecs are support on the browser so you can decide which component class to render:


Ext.capabilities.hasVideo[mp4, ogg] == true/false; ??So, in short, a little R&D is required and if you are planning on publishing 'media-for-the-masses', your strategy might well include support for Theora, MPEG(H.264), AND a Flash player until at least 2025.

Lemme know how it goes ;)

Bucs
19 Apr 2010, 6:39 PM
OMG, this makes the "Browser Wars" look like a playground skirmish.

Doesn't even seem worth it to try to tackle the HTML5 issue at this point until there is a clearer picture of which format will win out as the standard. It seems to me that for now it's best to still embrace the Flash Player and container format (.flv) as it will most likely result in the widest successful browser playback, correct? But what CODEC then should be used to encode the video that would work on most browsers?

Sorry for being dense on this...the topic is WAY more involved than I imagined. I figure if YouTube uses Flash still today, then it's probably still ok to go with that format in my app. But that begs the question, how is the iPad YouTube player successfully showing the videos if they don't support flash???

I have not even played my first video with the ux.Media set of controls, so not really following the code yet...I will be there soon...and probably here too with more questions :)

Thanks for your extremely informative input.

UPDATE: Now I remember...same issue happened when the iPhone came out and there were only a couple of YouTube videos initially. They had to re-encode all their videos into the MPEG or whatever format that the iPhone would support...and I guess they are doing what you said and serving the appropriate video according the browser/device capabilities.

billprince
26 Apr 2010, 11:26 PM
Problem solved:

I commented that error code line.

It's looks like the Ext.Element doesn't have cache property.


Thanks for you! When I use the Audio Events ,I have met the error as you mentioned!I'm agree and do what you say . As expected,the problem is gone.You make a good job,dude!Thank you!

Bucs
27 Apr 2010, 6:44 PM
I am trying to create a component around the ux.Media extension so that I can load the JWPlayer into a DIV on an web page and play M4V or FLV files. The example on the Demo site is a Window so I am trying to modify it pull out just the flashpanel and wrap it in a component that I can load into a DIV as I will need to do this dynamically in other parts of the site.

I tried to dig around and ensure that I have referenced all the proper files but I must be missing something important. The following code gives no errors in FireBug, and the title bar of the flashpanel does in fact show up in the intended DIV, but I do not get anything below the title...no movie, no anything. I did get the Flash message to Download flash, but after I did that, I am back to getting nothing except the title bar.

Here are my references to the ux.Media files:


<script type="text/javascript" src="/lib/extjs/ux/ux.Media/uxvismode.js"></script>
<script type="text/javascript" src="/lib/extjs/ux/ux.Media/uxmedia.js"></script>
<script type="text/javascript" src="/lib/extjs/ux/ux.Media/uxflash.js"></script>
On the Home page where I want the Video to begin playing I have the following HTML fragment in the content area:


....
<div id="divVideoArea" class="default_page_video_area"></div>
....
I also have the following module file referenced and loaded when the home page loads:


function loadUI() {

var F = Ext.util.Format;

var vizPlugin = Ext.ux.plugin && Ext.ux.plugin.VisibilityMode // && !Ext.isIE
? new Ext.ux.plugin.VisibilityMode({ hideMode: 'nosize' })
: { init: Ext.emptyFn };

//JWV Player sends notifications through a global 'playerReady' function handler.
//This will be mapped to each player instance.
window.playerReady = function (obj) {
//Search for a ux.Flash-managed player.
var mediaComp, el = Ext.get(obj['id']);
if (mediaComp = (el ? el.ownerCt : null)) {
mediaComp.onFlashInit();
}
};

window.JWPtrace = function () { console.log(arguments); };


// Load Main Menu
var tb = new AMD.Control.mainMenu();

// Load Video Player
var myplayer = new AMD.Control.mediaPlayer();
}

Ext.onReady(loadUI);
The manMenu is a ExtJS toolbar that shows up fine. Here is the mediaPlayer component wrapper code:


AMD.Control.mediaPlayer = Ext.extend(Ext.Panel, {
renderTo: 'divVideoArea', // <--- Just doing this for simplicity for now
initComponent: function () {
this.items = [
{
xtype: 'flashpanel',
id: 'jwplaything',
title: 'LongTail (JWPlayer 4.4)', // <---- I downloaded the latest which is 5.1, not a problem right?
autoMask: true, //set true here because this player provides feedback when ready
autoScroll: false,
externalsNamespace: 'player',
listeners: {
/*
* we MUST wait until the Flash object renders fully
* and reports ready
*/

flashinit: function (C, playerObj) {
//construct a global status callback for this instance
var cbName = 'recorder_' + playerObj.id;
window[cbName] = function (state) {
//Demo.balloon(null, 'Player Reports:', state.newstate);
} .createDelegate(this);

//Demo.balloon(null, 'Player Reports:', 'Ready');

//Use the externalsNamespace 'player' binding we defined earlier
with (C.player) {
addModelListener("STATE", cbName);
}
//Or, use the direct <object> tag reference instead
playerObj.sendEvent('PLAY', 'true');
},
scope: this,
delay: 100
},
mediaCfg: {
url: '/lib/jwplayer/player.swf',
autoSize: true,
volume: 25,
start: true,
loop: false,
scripting: 'always',

//ExternalInterface bindings
boundExternals: ['sendEvent',
{ name: 'addModelListener', returnType: 'xml' },
'addControllerListener',
'addViewListener',
'getConfig',
'getPlaylist'
],
params: {
wmode: 'opaque',
allowfullscreen: true,
flashVars: {
autostart: '@start',
//file: 'http://content.bitsontherun.com/videos/6AJT5nbx.m4v',
file: '/images/video.flv', // <--- tried the flv when I couldn't get the above to play either
duration: 30,
stretching: 'fill',
fullscreen: true,
shuffle: false,
repeat: false,
volume: '@volume' //(0-100)
// ,tracecall : 'JWPtrace' //debug aid
}

}
}

}
];

AMD.Control.mediaPlayer.superclass.initComponent.call(this);

}
});
I am not using the JIT code yet as I have not used that before, but sure seems useful so I will be looking at it. I am obviously new to the video extensions as well, as I really am not sure where I have gone wrong with the above. I'm sure I am missing something big and more than likely stupid.

Thanks for any guidance beforehand :)

Bucs
27 Apr 2010, 7:12 PM
Just noticed some potentially important lines of code that I left out :)

I notice that following in the Demo for the JWPlayer:

sourceModule : Demo.resolveURL( 'media', 'jwplayer.js')

What is this property doing, have not seen this before. NOr do I have the Demo object so not sure what the resolve URL is doing. Is this needed?
Also, where is the jwplayer.js file? I cannot seem to find that anywhere. It's not coming down in the download package from LongTail entitled mediaplayer.zip.

Also, what is the following actually achieving? Again, not familiar with JIT.


$JIT.provide('jwplayer'); //logical module registration



Like I said, I am really missing the boat....but there sure appears to be a lot more going on here than downloading and implementing a simple extension.

Thanks again.

Bucs
28 Apr 2010, 6:22 AM
Well, I figured out the problem. Missing a "height: 375" tag for the flashpanel item. I thought of that before but didn't do it as I thought the video would at least play or be heard in the background....guess not :)

Again, I am used to working within Viewports or other containers with layouts sizing the children. The fact that this is a web page that I need to infuse the content into, I guess I need to manually deal with the sizing. :-?

Bucs
28 Apr 2010, 9:15 AM
I am making progress but cannot seem to get the flashinit listener code to work. The player renders and plays the video, but firebug breakpoints set inside of the flashinit listener are never hit. In my code posted above, I have the global window code in the loadUI function and I have tried setting the id property to the same in both the flashpanel config and the flash vars config as others have reported but that did work.

If I change the flashinit listener name to mediaload, the function gets called but not sure how to monitor the start, pause, and finish events...with finish being the most important. Not sure why the flashinit is not being called as my code is pretty much the exact code in the demo. Not even sure if I need to flashinit...I just need to make a Direct call once the media is finished playing.

And help would be GREATLY appreciated.

Also, wondering if using the JWPlayer version 5.1 is causing all these problems. I noticed the Demo specified 4.4 in the title, and also noticed that the JWPlayer author has changed the the event model a bit. Would this effect the event handler code in the demo?

Bucs
28 Apr 2010, 10:57 AM
I definitely think there is some differences in the versions, although I don't seem to be able to get 4.4 working either. Here is the latest version of my control. Notice the new flashvar "playerready" which properly calls the method on the bottom of the component. So that is working for init code that I need to call. But I desparately need to monitor the Media event for when a video has completed playing. After reading a bit here (http://developer.longtailvideo.com/trac/wiki/Player5Events), Looks like the API has changed and the completed event was deprecated for the PlayerStateEvent....it now moves from PLAYING to IDLE when complete.

In any event, here is the code. Sure would love to know how to handle the COMPLETED media event, which now looks like it's called MediaEvent.JWPLAYER_MEDIA_COMPLETE (jwplayerMediaComplete).

Thanks for any help:



AMD.Control.mediaPlayer = Ext.extend(Ext.Panel, {
renderTo: 'divVideoArea',
initComponent: function () {
this.items = [
{
xtype: 'flashpanel',
id: 'jwplaything',
//title: 'LongTail (JWPlayer)',
height: 375,
autoMask: true, //set true here because this player provides feedback when ready
autoScroll: false,
externalsNamespace: 'player',
listeners: {
/*
* we MUST wait until the Flash object renders fully
* and reports ready
*/
mediaload: { scope: this, fn: function (C, playerObj) {
//construct a global status callback for this instance
var cbName = 'recorder_' + playerObj.id; // <---- This reports 'recorder_extgen20'
window[cbName] = function (state) { // <---- state is undefined....why?
//Demo.balloon(null, 'Player Reports:', state.newstate);
alert('State is ' + state.newstate); // <---- never fires
} .createDelegate(this);

//Demo.balloon(null, 'Player Reports:', 'Ready');

//Use the externalsNamespace 'player' binding we defined earlier
with (C.player) { // <---- C.player is valid object ref
addModelListener("STATE", cbName);
}
//Or, use the direct <object> tag reference instead
playerObj.sendEvent('PLAY', 'true'); // <---- reports 'not a function'
}}
},

mediaCfg: {
url: '/lib/jwplayer/player_5.1.swf',
autoSize: true,
volume: 25,
start: true,
loop: false,
scripting: 'always',

//ExternalInterface bindings
boundExternals: ['sendEvent',
'addModelListener',
'addControllerListener',
'addViewListener',
'getConfig',
'getPlaylist'
],

params: {
wmode: 'opaque',
allowfullscreen: true,
flashVars: {
autostart: '@start',
//file: 'http://content.bitsontherun.com/videos/6AJT5nbx.m4v',
file: '/lib/jwplayer/video.flv',
duration: 6,
stretching: 'fill',
fullscreen: true,
shuffle: false,
repeat: false,
playerready: this.playerReadyCallback, // <---- new after 4.x I think
volume: '@volume' //(0-100)
// ,tracecall : 'JWPtrace' //debug aid
}

}
}

}
];

AMD.Control.mediaPlayer.superclass.initComponent.call(this);

}

, playerReadyCallback: function (obj) {
alert('the videoplayer ' + obj['id'] + ' has been instantiated'); // <---- works fine, obj['id'] = jwplaything
player = document.getElementById(obj['id']);
}
});

hendricd
28 Apr 2010, 2:43 PM
@Bucs -- I haven't had a chance to play much with v 5.0 yet, but this modified fragment from my demo site should get your started:




var F = Ext.util.Format;

var vizPlugin = Ext.ux.plugin && Ext.ux.plugin.VisibilityMode // && !Ext.isIE
? new Ext.ux.plugin.VisibilityMode({hideMode:'nosize'})
: {init: Ext.emptyFn};

//JWV Player sends notifications through a global 'playerReady' function handler.
//This will be mapped to each player instance.
window.playerReady= function(obj) {
//Search for a ux.Flash-managed player.
var mediaComp, el = Ext.get(obj['id']);
if(mediaComp = (el?el.ownerCt:null)){
mediaComp.onFlashInit();
}
};


//If nesting, config parent as fit layout
{
xtype : 'flashpanel',
id : 'jwplaything',
title : 'LongTail (JWPlayer 4.4)',
autoMask : true, //set true here because this player provides feedback when ready
autoScroll : false,
externalsNamespace : 'player',
listeners:{
/*
* we MUST wait until the Flash object renders fully
* and reports ready
*/

flashinit: function(C, playerObj){
//construct a global status callback for this instance
var cbName = 'recorder_'+playerObj.id;
window[cbName] = function(state){
console.info('Player Reports:',state.newstate);
}.createDelegate(this);

Demo.balloon('Player Reports:','Ready');

//Use the externalsNamespace 'player' binding we defined earlier
with(C.player){
addModelListener("STATE",cbName);
}
//Or, use the direct <object> tag reference instead
playerObj.sendEvent('PLAY','true');
},
scope: this,
delay : 100
},
mediaCfg:{
url : 'demos/media/JWP/player-viral.swf',
autoSize : true,
volume : 25,
start :false,
loop :false,
scripting :'always',

//ExternalInterface bindings
boundExternals : ['sendEvent' ,
{name:'addModelListener',returnType:'xml'},
'addControllerListener',
'addViewListener',
'getConfig',
'getPlaylist'
],
params:{
wmode :'opaque',
allowfullscreen : true,
flashVars: {
autostart :'@start',
file :'http://content.bitsontherun.com/videos/6AJT5nbx.m4v',
duration : 30,
playerready : 'playerReady', //a string name of the callback function

stretching :'fill',
fullscreen : true,
shuffle : false,
repeat : false,
volume :'@volume' //(0-100)

}

}
}
From what I can tell from the JWP Site, 5.0 should be 4.x API compat.