PDA

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



Pages : 1 2 3 [4]

Bucs
28 Apr 2010, 6:11 PM
Thanks a lot for the reply Doug, I know your busy.

Unfortunately, that doesn't really work. Not sure if it is the way I am wrapping the flashpanel in a component or what, but the flashinit event will simply not fire. If I change the listener event name to mediaload, like I saw you suggest at one point, the listener code does fire and allow the debugger to step into the code, but the State event is not tracking for some reason. Going to post my component code again for reference:



AMD.Control.mediaPlayer = Ext.extend(Ext.Panel, {
renderTo: 'divVideoArea',
//layout: 'fit',
initComponent: function () {
this.items = [
{
xtype: 'flashpanel',
id: 'jwplaything',
height: 375,
//title: 'LongTail (JWPlayer)',
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){ // <----- Does not fire
mediaload: 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: '/lib/jwplayer/player_5.1.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: '/lib/jwplayer/video.flv',
duration: 6,
stretching: 'fill',
fullscreen: true,
shuffle: false,
repeat: false,
//playerready: this.playerReadyCallback,
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');
player = document.getElementById(obj['id']);

}

});



Also, my module code that instantiates the AMD.Control.mediaPlayer includes the other necessary code that you mention. This shouldn't cause a problem with the flashinit listener should it?



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);




Thank's again for you time!

Bucs
29 Apr 2010, 7:39 AM
Doug, I think there is something not right in the the setup of the global handler, or in the way I am implementing the player as a component or something as the flashinit event never fires, nor is the mediaComp ever set to anything other than 'undefined'.

Here is the latest code for the global handler setup, which is called from an Ext onReady command for the main page.


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) { // <--- obj = client - "FLASH WIN 10,0,45,2", id - "extgen20", version - "5.1.897"
//Search for a ux.Flash-managed player.
var mediaComp, el = Ext.get(obj['id']);
//if (mediaComp = (el ? el.ownerCt : null)) { // <---- el.OwnCt ALWAYS undefined on start, that right? And is the '=' in here supposed to be a conditional '==' ?
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 above code is loaded from a default page that has several <div> tags, one of which is:

...<div id="divVideoArea" class="default_page_video_area"><div>...

The call to my component wrapper is as follows:


AMD.Control.mediaPlayer = Ext.extend(Ext.Panel, {
renderTo: 'divVideoArea',
//layout: 'fit',
initComponent: function () {
this.items = [
{
xtype: 'flashpanel',
id: 'jwplaything',
height: 375,
//title: 'LongTail (JWPlayer)',
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){
//mediaload: function(C, playerObj){
//construct a global status callback for this instance
var cbName = 'recorder_'+playerObj.id;
window[cbName] = function(state){
alert('Player Reports state of:' + state.newstate)
//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: '/lib/jwplayer/player_5.1.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: '/lib/jwplayer/video.flv',
duration: 6,
stretching: 'fill',
fullscreen: true,
shuffle: false,
repeat: false,
playerready : 'playerReady',
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');
player = document.getElementById(obj['id']);

}

, playTracker: function (obj) {
//alert('Video is done playing');
alert('the new mute state is: '+obj.state);
}


});




I know you are a busy man, but when you get a chance, could you possibly load the above code into the appropriate files and attempt to fire the flashinit event? It simply does not fire for me, so no STATE is ever set, the medComp var is always undefined...just not working for me and I really need it to, can't spend much more time on this as it's really setting me back.

Thanks a ton in advance.

hendricd
29 Apr 2010, 2:26 PM
@Bucs --

It looks like much has changed with the JWP5 API. Let me get back to the 'lab' this weekend and see what I can see.

Bucs
29 Apr 2010, 2:30 PM
You da man Doug...I can move on with other items for my app and hopefully we can get something figured out with event handling in the new JWP framework.

Thanks so much for the reply and your time!

hendricd
2 May 2010, 11:40 AM
@Bucs -- I've upgraded the demo site to include support for JWP5 (adds ext-style listeners to relevant model/controller events generated by the Player as well. Ext.Component/Panel/Portlet/Window are all available for use as well.

Examine both source files here : http://demos.theactivegroup.com/demodesk.html?demo=media&script=jwplayer5demo
The JWPLayer media classes are also available via SVN at google.code for the project.

Good hunting..

Bucs
3 May 2010, 12:59 AM
Awesome Doug, I'll be looking at this later today. Thanks so much for your timely help!

Bucs
4 May 2010, 8:50 PM
Doug, thanks again for your work this weekend, it indeed looks like a lot has changed.

However, I am still at a loss as to trying to get ANY event to fire even with the new code. Here is what I have:

I downloaded your jwplayer5.js code into a file in my ux directory.

I am using the player_5.1.swf player file (added ver # myself).

I am not using JIT but my references in my root project HTML file are as follows:



<!-- BEGIN: ExtJS Extensions-->

<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>
<script type="text/javascript" src="/lib/extjs/ux/ux.Media/jwplayer5.js"></script>

<!-- END : ExtJS Extensions-->

<!-- BEGIN: MODULES -->
<script type="text/javascript" src="/lib/amd/modules/application/app.js"></script>
<script type="text/javascript" src="/lib/amd/controls/mainMenu.js"></script>
<script type="text/javascript" src="/lib/amd/controls/mediaPlayer.js"></script>
<script type="text/javascript" src="/lib/amd/modules/home/home.js"></script>
<!-- END : MODULES -->
My Home.js file sets up the page environment by instantiating the menu and the video player as such:



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 };

// Looks like you moved the global handler code to the jwplayer5.js code so I should have to call that directly

// Load Main Menu
var tb = new AMD.Control.mainMenu();

// Load Video Player
var myplayer = new AMD.Control.mediaPlayer();
}

Ext.onReady(loadUI);
My JS file that is called to load the Video Player control is as follows:


AMD.Control.mediaPlayer = Ext.extend(Ext.Panel, {
renderTo: 'divVideoArea',
//layout: 'fit',
initComponent: function () {
this.items = [
{
xtype : 'jwpanel',
id : 'jwplaything',
//title : 'LongTail (JWPlayer 5.1)',
playerURL : '/lib/3rdparty/jwplayer/player_5.1.swf',
height : 375,

playerCfg:{
volume : 25,
start : true,
params:{
flashVars: {
file :'http://content.bitsontherun.com/videos/6AJT5nbx.m4v',
duration : 30
}
}
},
listeners:{
/*
* we MUST wait until the Flash object renders fully
* and reports ready
*/
playerready: function(C, player){
C.play();
//player.sendEvent('PLAY','true');
alert('Please fire this event: Play');
},
buffering : function(C, state){
//Demo.balloon(null,'Player Reports:',state.newstate);
},
completed : function(C, state){
//Demo.balloon(null,'Player Reports:',state.newstate);
alert('Please fire this event: Completed');
},
playing : function(C, state){
//Demo.balloon(null,'Player Reports:',state.newstate);
},
paused : function(C, state){
//Demo.balloon(null,'Player Reports:',state.newstate);
alert('Paused');
},
mute : function(C, muted){
//Demo.balloon(null,'Player Reports Muted:',String(muted.state));
}
}

}
];

AMD.Control.mediaPlayer.superclass.initComponent.call(this);

}
});


As I said, no event is getting fired no matter what I do. What am I missing? Is there a timing difference to where the events are not getting attached properly? Am I missing a reference to a mediaCfg or a JS file altogether? Man, I feel dumb..sure wish I could figure this out without having to bug you like this. Apparently not a lot of people are handling events with the control or I think I would have more responses than just yours. So thanks for your help when you can take a look at this!

Bucs
6 May 2010, 1:54 PM
Doug, can you see anything I am doing wrong (or missing ref, or anything else) in the previous post that would cause the events to not be wired up or not fire at all? Have I made all the right inclusions to JS files?

Thanks a ton...

hendricd
6 May 2010, 2:08 PM
Doug, can you see anything I am doing wrong (or missing ref, or anything else) in the previous post that would cause the events to not be wired up or not fire at all? Have I made all the right inclusions to JS files?

Thanks a ton...

@Bucs --
Nothing stands out in your sample. Does it work from my demo URL (http://demos.theactivegroup.com/demodesk.html?demo=media&script=jwplayer5demo) I gave you?

Have you rencently upgraded your Java Runtime? There are Flash problems with certain releases of recent JRE's.

Bucs
6 May 2010, 3:57 PM
Thanks for the reply Doug. Your example works fine on the same browser (FF 3.6.6- for Win) I am testing my code against, so it's not the JRE. I am not using JIT to load the script files are you are...should that matter? Would that create a timing difference where something is not available yet? I am using ExtJS 3.2, as I'm sure you are too.

What versions of the following do I need? Here is what I have
uxmedia.js <==== Version 2.1 11/11/2008
uxflash.js <==== version 2.1

Any chance you could try my code out (without JIT) and see what you get? If it works for you, then I have a referencing problem or JS file version issue of some type.

I would appreciate it in a huge way!

hendricd
6 May 2010, 5:04 PM
Thanks for the reply Doug. Your example works fine on the same browser (FF 3.6.6- for Win) I am testing my code against, so it's not the JRE. I am not using JIT to load the script files are you are...should that matter? Would that create a timing difference where something is not available yet? I am using ExtJS 3.2, as I'm sure you are too.

What versions of the following do I need? Here is what I have
uxmedia.js <==== Version 2.1 11/11/2008
uxflash.js <==== version 2.1

Any chance you could try my code out (without JIT) and see what you get? If it works for you, then I have a referencing problem or JS file version issue of some type.

I would appreciate it in a huge way!

2008 seems a bit old.

Get the goods from here (http://code.google.com/p/uxmedia/source/browse/#), and follow the online demo source closely.

Bucs
6 May 2010, 5:58 PM
Eureka Doug, apparently I had an outdated version on uxmedia.js...the one that added 3.1 compatibility. After grabbing that, all is right in the Event world. My code was ok all along :)

Thanks so much!

alphadogg
26 May 2010, 3:42 PM
Awesome user extension. But, it seems to crash Firefox v3.6.3 when I don't supply a URL. On IE, it just shows a 'red X' icon.



xtype: "mediapanel",
id: "reportViewer",
border: false,
autoSize: true,
mediaCfg:
{
mediaType: 'PDF',
url: '../../images/cert.pdf'
}

hendricd
27 May 2010, 2:09 PM
Awesome user extension. But, it seems to crash Firefox v3.6.3 when I don't supply a URL. On IE, it just shows a 'red X' icon.



xtype: "mediapanel",
id: "reportViewer",
border: false,
autoSize: true,
mediaCfg:
{
mediaType: 'PDF',
url: '../../images/cert.pdf'
}


@Alpha-- PDFFRAME is the safest mediaType to use these days for best x-browser support.

rishi89
7 Jun 2010, 10:00 PM
uxdocs.theactivegroup.com is not accessible.. i would like to read the documentation..

rishi89
8 Jun 2010, 2:56 AM
Well actually if I cant get to the documentation, then can anyone please show me how to play an FLV video using this?

Here is my code :


<html>
<head>


<title>MEDIA PANEL DEMO</title>

<!-- your usual ext stuff -->
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="lib/extjs/resources/css/ext-all.css">
<script src="lib/extjs/adapter/ext/ext-base.js"></script>
<script src="lib/extjs/ext-all-debug.js"></script>

<!-- Hendricd's Ext.ux.MediaPanel component -->
<script src="uxmedia.js"></script>
<script src="uxvismode.js"></script>
<script src="uxflash.js"></script>


<body>

<p>MEDIA PANEL SHOULD BE BELOW</p>

<script>

Ext.onReady(function(){
var win = new Ext.Window({
title : 'TEST',
layout : 'fit',
items : [new Ext.ux.FlashPanel({
border : false,
style : 'height:100%;',
bodyStyle: 'height:100%;',
mediaCfg: {
mediaType : 'FLV',
url : 'video.flv',
width : '400px',
height : '300px',
start : true,
loop : true,
controls : true,
}
})]
});
win.show();
});

</script>

</body>

</head>

</html>



I am having a hard time figuring out which of Doug's components should I use here.. Any help would be appreciated..

xbboys
8 Jun 2010, 8:38 PM
Hi,

I am facing some problem using this extension.

I have a pdf file displayed in a panel inside a window. The pdf object is always on top of everything else and overlapping the windows which has been brought to the front. I tried using Ext.useShims = true; and set shim:false to the window with the pdf object and shim:true to other windows. It worked, the pdf object is not overlapping other windows anymore but when I bring the window with the pdf object to the front again, the pdf object is now blocked by the window behind it.

20875

hendricd
9 Jun 2010, 2:22 PM
@xbboys --

overlapping multiple PDF anything is going to problematic on all browsers.

Start with shimming everything (they'll all need the same treatment). I would also recommend that you carry your PDF's in a single tabbed-interface Ext.Window instead. Ext.shims are IFRAMES, and shimming everything can be resource intensive.

Also, consider using the PDFFRAME mediaCfg instead of the PDF profile.

s4brown
10 Jun 2010, 3:06 PM
This plugin looks like it is exactly what I need, but I'm having a bit of trouble figuring it out without docs/examples. The link for the documentation and demos has been down for the last two days, is there another copy of the docs somewhere?

Thanks!

xbboys
10 Jun 2010, 4:59 PM
Doug,

I only have one PDF file displaying in one window. The other windows doesn't have any PDF object. Should I still shim every windows in this case? Currently, the PDF object is in a column layout Panel and this Panel is an item in an accordion layout panel in a window. Am I making it too complex? What you are suggesting is putting the PDF object in a TabPanel and put this TabPanel in a window?

I have been using PDFFRAME since I started using this extension.

P/S: s4brown is right. The demos page has been down for a few days now.

xbboys
20 Jun 2010, 5:41 PM
Hi,

I've just upgraded my Firefox from version 3.5.9 to version 3.6.3 and found an unexpected issue with PDF object and Ext.Window. I have a PDF object opened in a Ext.Window. When I open another pop up Ext.Window and bring it to the front of the PDF object, the window is overlapped by the PDF object but not the content within it (see attached image). This only happen after I upgrade my Firefox to 3.6.3.

21025

Is this issue related to the shimming of the window? I already shim the pop up window in front with shim:true and shim:false to the window with the PDF object. How can I solve this issue? Any help is greatly appreciated!

richgoldmd
21 Jun 2010, 4:37 AM
I have the same problem. The same is also true in Safari 4.

Bucs
21 Jun 2010, 1:06 PM
Anybody know how to STOP an audioEvent? I have added an audio event to a panel's afterrender event like so:



var audioClass = Ext.ux.Media.plugin.AudioEvents;

var audio = new audioClass({
audioEvents : {
afterrender : this.audioUrl
},
volume : .7
});
I need to be able to stop this event if the user does something to remove this component from the content container. I tried the clearMedia but doesn't seem to work or I'm doing something wrong. Any ideas here?

Trying the following to no avail:


,listeners : {
removed: function(cmp, ownCt) {
//cmp.plugins.clearMedia(); // event fires but audio is not stopped
}
}

Bucs
22 Jun 2010, 9:23 AM
Doug, you alive? :)

Any possible way to add a couple methods to the AudioEvents plugin? Need one to stop the playing of the file...otherwise it keeps playing no matter what the UI is doing.

Also badly needs event handling, especially for a "complete" event exactly like the one you have for the JW wrapped component.

Would it be easier to wrap a sound control like SoundManager2 (http://www.schillmania.com/projects/soundmanager2/) like you have done for the JWPlayer control? All the sound functionality is there in the control already...might make more sense if it's legally possible.

Thanks!

Bucs
26 Jun 2010, 6:39 AM
Sorry to be a pest but kinda need to know if the previous post is doable.

Without the ability to stop the audio file after started, then you can easily end up with multiple files playing at once (as stated my audio files are reading instructions, so a little longer than a "ding".) Also, really need the ability to handle the complete event.

Not sure if I'm being ignored cause you're way busy or because these are not possible to do :)

Thanks

hendricd
28 Jun 2010, 5:02 AM
For those who may be having media rendering issues (Flash, PDF, Charts etc) on Ext 3.2.x:

Ext.Element.unmask has a defect which does not remove the relevant masking CSS rules. Include the following override whilst I get this repaired in SVN:


Ext.override(Ext.Element, {

unmask : Ext.Element.prototype.unmask.createSequence( function(){
this.removeClass(['x-masked', 'x-masked-relative']);
})
});

Edit: Fixed in SVN 6798 Ext 3.2+

xbboys
14 Jul 2010, 4:18 PM
Is the issue with Firefox upgrade from version 3.5.9 to version 3.6.3 fixed yet? The window frame is overlapped by the the PDF object behind it but not the content within the window.

Please let me know what I can do to fix this issue. Thank you in advance...

hendricd
14 Jul 2010, 7:15 PM
@xbboys --

The reality is: Today's Ext.Panel (and subclasses) rely heavily on transparent backgrounds/images and opacity adjustments to give them the look and feel we all enjoy.

This does not mesh well (IFRAME-shimmed or not) when displayed over the windowed browser plugins (like Acrobat, Google Earth Plugin etc) on many browsers.

The uxMedia demo for Acrobat demonstrates one possible direction ( http://demos.theactivegroup.com/?demo=media&script=acrobat )

Launch the 'Show Shimmed Popup Window' and drag it around/over (if you can, hehe) both version of the embedded PDF's to see some of the challenges. (You'll also notice that every browser handles z-ordering of the Acrobat plugin differently !! )

I've crudely added baseCls : 'x-box' to that popup window's configuration. That would be just a start. What is really required is a custom structural CSS theme to address these and other issues for overlapping Panel and subclasses intended to traverse these (cross-browser of course ;) ).

Any takers? :-?

xbboys
14 Jul 2010, 10:22 PM
Hi Doug,

That would work for a temporary work around. Thanks... :)
But I really look forward to the custom CSS theme that would overcome this issue for good.

xbboys
25 Jul 2010, 8:34 PM
@Doug,

I manage to find a work around to solve the window issue in FF 3.6.
Just set a background-color to x-window class and the window is now displaying properly.

@richgoldmd,

Give it a try. It should solve your problem as well.

Will need to disable window shadow....

richgoldmd
26 Jul 2010, 3:36 AM
@Doug,

I manage to find a work around to solve the window issue in FF 3.6.
Just set a background-color to x-window class and the window is now displaying properly.

@richgoldmd,

Give it a try. It should solve your problem as well.

Will need to disable window shadow....

That seems to have worked, thanks. The shadow is not visible over the PDF but it remains visible elsewhere. For cinsistency you are right, shadow should be disabled.

I added this to my CSS FYI:



.ext-gecko3 .x-window {
background-color:white;
}

nsolsen
7 Aug 2010, 2:07 AM
Hi,

I am having some problems displaying a PDFFRAME MediaWindow on Linux. The same application works fine with various browsers under Windows Vista.

Basically the media window is blank, although while opening it (sometimes) briefly flashes something resembling the PDF it should show.

Are there known collaboration issues with uxMedia and Adobe Reader plugin under Firefox/Linux?

Details: Ubuntu 10.04, Firefox 3.6.8, Adobe Reader plugin 9.3, ExtJS 3.2.1, uxMedia213

Code to open the window:



var mConfig = {
mediaType :'PDFFRAME', //this is the most reliable cross-browser
url : myurl,
unsupportedText : 'Acrobat Viewer is not Installed',
autoSize : true
};

var p = new Ext.ux.MediaWindow({
id : 'PDFViewerWin',
bodyStyle : 'position:relative; padding:0px;',
width : 1000,
height : 800,
mediaCfg : mConfig,
title : 'PDF Document',
constrain : true
}).show();
TIA,
Niels

nsolsen
7 Aug 2010, 2:30 AM
I am having some problems displaying a PDFFRAME MediaWindow on Linux. The same application works fine with various browsers under Windows Vista.



Please disregard this.. I just restarted my machine and now it works. Kind of disappointing that Linux has such Windowesque "restart required" behaviour. And it didn't even tell me to restart.. :-/

But anyways, I'm happy again, and sorry for disturbing your saturday.

hendricd
7 Aug 2010, 5:09 PM
Good to hear you overcame, but Linux and Acrobat seem to be long-time antagonists. Keep your eyes open. ;)

nsolsen
14 Aug 2010, 2:09 AM
Good to hear you overcame, but Linux and Acrobat seem to be long-time antagonists. Keep your eyes open. ;)

Hmmm, it seems that there are still problems. I can open/close the PDFFRAME a varying number of times before it fails, typically 7-10 times. And when it fails, I have to restart Firefox to get it working again. Reloading the web page, or closing the tab and opening a new is not enough.

The problem does not seem to be with ExtJS/uxMedia, though. The code works perfectly in Windows browsers. So this must be an issue in the Linux/Firefox/Adobe Reader software stack. Not sure what to do about that.. :-?

It is issues like this, that is holding back Linux as a mainstream desktop OS.

hendricd
16 Aug 2010, 7:44 AM
Yes, Acrobat on Linux has long been a problem. ;)

Aero
9 Oct 2010, 2:02 PM
-Solved.



Ext.getCmp("jwplayer").player.sendEvent("LOAD",'path-to-flv');


Hi,thanks for ux.media.
I must be blind,but how can i dynamically change the file url param for the flashpanel (jwplayer) ?

I looked at the api doc and have tried to invoke externalinterfaces,setVariables,changed mediaCfg but nothing helps. It wont change file url.

Thanks

King_Aero
22 Oct 2010, 5:17 AM
@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!

I'm having the same trouble getting Actionscript to Javascript communication. Has anyone gotten this to work with this extension using the ExternalInterface method?

kamleshb
2 Nov 2010, 10:02 PM
I have downloaded "mediademo.zip" file which is provided on first post of this thread. But This is not working at all. Giving me error.
I have placed media folder and containing all files of the mediademo.zip in /ext-3.3.0/examples/media/ . And I have to add three more js file (uxflash.js, uxflex.js,uxmedia.js) to same folder. But when I view mediapanel.html. It giving me error as "this.tree is undefined" in medpanel.js on line

var sm = this.tree.getSelectedModel();

Please help me. I am doing some mistake.

kamleshb
2 Nov 2010, 10:21 PM
What I want to do is I want to load flash charts in Portlets of portals in viewport. I am currently using portlet example which extjs examples has provided, and I am providing swf file by adding complete object tag to html of each portlets.
Problem I am facing is when user drag or drop it or collapse and expand portlet, flash chart reloads. This problem is occurred browsers other than IE.

So I want to load flash chart the way it is used in demos.theactivegroup.com. Where I haven't got that problem. How I can use this component to solve this problem.

Please give me Sample code to show flash chart in portlets of viewport. I am new to extjs.

rproudman
2 Dec 2010, 11:11 AM
By any chance does the ux.Media work with streaming audio (ie: listening to a radio station)? I'm having difficulty getting something to work on an HTML 5 browser (ie: Safari, etc.) so IPod, etc. could play the streaming audio?

Thanks.

hendricd
2 Dec 2010, 6:25 PM
By any chance does the ux.Media work with streaming audio (ie: listening to a radio station)? I'm having difficulty getting something to work on an HTML 5 browser (ie: Safari, etc.) so IPod, etc. could play the streaming audio?

Thanks.
@rproudman --
The ux.Media components manage rendering of browser plugins that manage the rendering/playback of audio/video within Ext layouts. It, by itself, is NOT a media player.

The HTML5 audio tag (to date) has limited cross-browser support for audio, especially on iOS.
What codec/audio format or source are you trying to support? Personal or x-browser use?

rproudman
7 Dec 2010, 4:16 PM
Thanks Doug.

I understand now how it manages the browser plugin for audio. On our site, www.ibuddz.com it works fine for playing audio songs and radio streams. However, for our mobile site (ie: iPod, Android, etc.) it's another story getting radio streams to work.

Thanks ahead for the answer.

Russ

borbpet
8 Dec 2010, 3:55 AM
ux.Media does not work in chrome 8.
I tried exporting grid's data and chrome downsized the page.
Any idea?

msinn
8 Dec 2010, 4:46 AM
Thank you for the extension.
Your demo links don't work anymore...

gkainth
10 Dec 2010, 9:14 AM
Hi

We were getting some curious behaviour of objects duplicating or overwriting each other in our application, where we have subclassed Flash Panel.
Digging into it, it seems there is a bug in the construction of probably anything uxmedia based.

Taking Ext.ux.Media.Panel as an example...



constructor : function(config){
//Inherit the ux.Media class
Ext.apply(this , this.mediaClass.prototype );
ux.Panel.superclass.constructor.apply(this, arguments);
},

When the mediaClass prototype is applied to the current scope, it also overrides the constructor.
This means that every instance of every ux.Media object that is instantiated shares the same constructor instance. thus any config stored in the constructor such as xtype returns the same value for every instance and subclass... doesn't seem quite right.

a quick and dirty fix of: -



constructor : function(config){
//Inherit the ux.Media class
var c = this.constructor;
Ext.apply(this , this.mediaClass.prototype );
ux.Panel.superclass.constructor.apply(this, arguments);
this.constructor = c;
},

Seems to resolve this locally for us, but obviously this may not be the best way.

Thanks
Gush

lagodoy
11 Dec 2010, 10:01 AM
hello friend, you could send me a model? I am not able to use this component
thanks

hendricd
11 Dec 2010, 1:03 PM
Thanks Gush,

I'll re-evaluate the multiple-inheritance quandary...

hendricd
11 Dec 2010, 1:04 PM
hello friend, you could send me a model? I am not able to use this component
thanks
@lagodoy--
What are you trying to accomplish?

kamleshb
20 Dec 2010, 4:45 AM
I am trying to load flex chart in Portal of Viewport. For that I have create pd item in portlet item and loaded flexpanel with xtype:'flexpanel' and other configurations.
I usit creates <object > tag in portlet when i had viewng firebug. But problem is, I could not see flex chart loading in portlet. On the other hand I am loading flex chart using "html:" with <object> tag and <embed > tag but with html codes as String. It works and loads same flex chart.

I want to use this media library so that I can use bridge as object.

Let me know if i am missing anything.

stephroy
4 Jan 2011, 11:54 AM
Hi Doug,

I'm using the ux.MediaWindow component with a mediaType of 'PDFFRAME' in order to show users a pdf document in an Ext dialog. All works well on the windows platform. My issue is on the Mac, where out of the box, the Safari browser makes use of of the Mac Native OS X PDF viewer.

The initial view of the PDF renders properly and the buttons to zoom in/out, save and open the pdf in a new window all work fine. But then any attempt to scroll through the document (either by mouse or arrow keys) results in screen flickers at the top of the document, but the viewport will not move away from the first page.

Is the ux.MediaPackage intended to work with the native pdf viewer on Mac?

Thanks,
Steph.

alphadogg
18 Jan 2011, 6:14 PM
Why wouldn't this display the PDF?



{
region: "south",
layout: "fit",
title: "PDF Viewer",
id: "BodyBottomContainer",
height: 200,
items : [{
xtype: "mediapanel",
id: "pdfViewer",
url: "http://localhost:57660/images/485.pdf",
border: false,
autoSize: true,
mediaCfg: { mediaType: "PDFFRAME", autoSize: true }
}],
border: false,
split: true,
collapsible: true,
collapsed: true
}
Typing the url directly into the address bar displays the PDF without any issue.

BTW, included files are:


<script type="text/javascript" src="/Scripts/uxmedia.js"></script>
<script type="text/javascript" src="/Scripts/uxflash.js"></script>
<script type="text/javascript" src="/Scripts/uxvismode.js"></script>

alphadogg
18 Jan 2011, 8:04 PM
Actually, it seems to work if I load a document "after the fact", and not in the configuration.

Adding a some code to a button on the page that calls:


Ext.getCmp("pdfViewer").mediaCfg.url = "http://localhost:57660/images/485.pdf";
Ext.getCmp("pdfViewer").refreshMedia();
Ext.getCmp("pdfViewer").setVisible(true);


results in a viewable PDF.

mschwartz
19 Jan 2011, 8:30 AM
doug,

I'm curious if this works with PDF in Chrome 8.

I haven't tried using these extensions, but just opening an Ext Window with body as iframe and src=URL_OF_A_PDF, and the entire document gets zoomed to 10%. Not the PDF, EVERYTHING. The ExtJS viewport, the window, anything else...

Carwise
20 Jan 2011, 3:00 AM
doug,

I'm curious if this works with PDF in Chrome 8.

I haven't tried using these extensions, but just opening an Ext Window with body as iframe and src=URL_OF_A_PDF, and the entire document gets zoomed to 10%. Not the PDF, EVERYTHING. The ExtJS viewport, the window, anything else...

Funny that you wrote this yesterday. Experiencing the same problem and looking for an answer. There is a browser solution:
Type 'about:plugins' in your browser: Disable the chrome pdf plugin and enable the Adobe one ..
But can't ask all my visitors to do this..

Martin

mschwartz
20 Jan 2011, 6:29 AM
Funny that you wrote this yesterday. Experiencing the same problem and looking for an answer. There is a browser solution:
Type 'about:plugins' in your browser: Disable the chrome pdf plugin and enable the Adobe one ..
But can't ask all my visitors to do this..

Martin

Exactly.

stephroy
20 Jan 2011, 7:03 AM
Yeah, this is the same type of problem that I encountered in my post. It seems that Safari on Mac and Chrome each have native plugins for viewing PDFs which do not work well in the uxMedia component. Reports surrounding Chrome's release of their plugin assured us that the Chrome plugin would need to be manually enabled(http://blog.chromium.org/2010/06/bringing-improved-pdf-support-to-google.html), but a December update to my installation silently kicked my Adobe plugin out of the way in favor of the Chrome version (Correct me if I'm wrong Google, but isn't that being evil?).

Anyways, I've been able to convince management that we should detect if the Adobe plugin is installed/enabled and if not, to show our users a 'suggestion' that optimal usage will be experienced if it were. Having said that, it would really help if support for these native plugins was added to the uxMedia component.

Doug?

hendricd
20 Jan 2011, 7:46 AM
Frustrating indeed.

See: http://code.google.com/p/chromium/issues/detail?id=65395

There is a Chrome fix for IFRAME, but when? You might try the
mediaType: 'PDF'
instead of PDFRAME in your mediaCfg, which uses the <OBJECT> tag rendering method.

The 'global-zoom' problem is apparently not present there.

mschwartz
20 Jan 2011, 7:52 AM
Frustrating indeed.

See: http://code.google.com/p/chromium/issues/detail?id=65395

There is a Chrome fix for IFRAME, but when? You might try the
mediaType: 'PDF'
instead of PDFRAME in your mediaCfg, which uses the <OBJECT> tag rendering method.

The 'global-zoom' problem is apparently not present there.

See comment #74 on the bug report you linked :)

Object in iframe was the first thing I tried. In my case, the users are supposed to print the PDF and <object> only shows the PDF content but not the controls.

hendricd
20 Jan 2011, 7:57 AM
No, the IFRAME as host -- is the problem.

ux.Media users should use the PDF mediaType (which renders a native <OBJECT> tag).

You guys doing things manually should try replacing your IFRAME strategy with the same.

mschwartz
20 Jan 2011, 8:06 AM
No, the IFRAME as host -- is the problem.

ux.Media users should use the PDF mediaType (which renders a native <OBJECT> tag).

You guys doing things manually should try replacing your IFRAME strategy with the same.

I meant, "Object instead of Iframe" not "Object in Iframe" Sorry.

As I wrote, my users need to print the PDF. Not in Iframe and they try to print, they print the WHOLE browser window, Viewport and all. Not what we want :)

hendricd
23 Jan 2011, 10:39 AM
@alphadogg --

The url belongs directly in the mediaCfg:



{
region: "south",
layout: "fit",
title: "PDF Viewer",
id: "BodyBottomContainer",
height: 200,
items : [{
xtype: "mediapanel",
id: "pdfViewer",

border: false,
autoSize: true,
mediaCfg: {
mediaType: "PDFFRAME",
url: "http://localhost:57660/images/485.pdf",
autoSize: true
}
}],
border: false,
split: true,
collapsible: true,
collapsed: true
}

amadman
6 Feb 2011, 7:31 PM
Hello!

Excellent component!, i am using the flashpanel to play a video file within a form. The problem is, i reuse the form and therefore, need to change the URL and load a new video file..

I play it with the following code:



xtype : 'flashpanel',
id : 'flowplaything',
title : 'Flowplayer',
autoMask : false,
autoScroll : false,
mediaCfg:{
url : 'flash/flowplayer-3.2.5.swf',
autoSize : true,
volume : 25,
start :false,
loop :false,
scripting :'always',
encodeParams : false,

params:{
wmode :'opaque',
allowfullscreen : true,
cachebusting : true,
flashVars: ('config='+Ext.encode({
clip : { //playlist defualts
autoPlay: false,
autoBuffering: true,
scaling: "fit"
},
playlist : [
// playlist entry as a string means the url
{url :'path/to/video/file'},
]

})).replace(/\"/g,"\'")//Convert to single-quote for inclusion in <PARAM> markup
}
}


Any suggestion on how i could change the video playing and reload once the component has already been created?

Suggestions would be appreciated.

Cheers!

amadman
6 Feb 2011, 9:16 PM
Hello!

Excellent component!, i am using the flashpanel to play a video file within a form. The problem is, i reuse the form and therefore, need to change the URL and load a new video file..

I play it with the following code:



xtype : 'flashpanel',
id : 'flowplaything',
title : 'Flowplayer',
autoMask : false,
autoScroll : false,
mediaCfg:{
url : 'flash/flowplayer-3.2.5.swf',
autoSize : true,
volume : 25,
start :false,
loop :false,
scripting :'always',
encodeParams : false,

params:{
wmode :'opaque',
allowfullscreen : true,
cachebusting : true,
flashVars: ('config='+Ext.encode({
clip : { //playlist defualts
autoPlay: false,
autoBuffering: true,
scaling: "fit"
},
playlist : [
// playlist entry as a string means the url
{url :'path/to/video/file'},
]

})).replace(/\"/g,"\'")//Convert to single-quote for inclusion in <PARAM> markup
}
}


Any suggestion on how i could change the video playing and reload once the component has already been created?

Suggestions would be appreciated.

Cheers!

I can see how i would do this if i wasn't using EXTjs and i was just calling this from a normal HTML page:


// button 3: replaces the whole playlist and starts the playback from beginning
$f().play([
{url: 'KimAronson-TwentySeconds70930.flv', title: 'Eating Sushi'},
{url: 'KimAronson-TwentySeconds72119.flv', title: 'Big spider web'}
]);

I just need to figure out how i can get a reference to the flowplayer object from ux.media. I'll keep digging but if someone wants to throw me a lifeline i wont be offended.

:o)

amadman
6 Feb 2011, 9:59 PM
I can see how i would do this if i wasn't using EXTjs and i was just calling this from a normal HTML page:


// button 3: replaces the whole playlist and starts the playback from beginning
$f().play([
{url: 'KimAronson-TwentySeconds70930.flv', title: 'Eating Sushi'},
{url: 'KimAronson-TwentySeconds72119.flv', title: 'Big spider web'}
]);

I just need to figure out how i can get a reference to the flowplayer object from ux.media. I'll keep digging but if someone wants to throw me a lifeline i wont be offended.

:o)

ok, did some googling around the sencha site, found the renderMedia function, which should update things. So i took the media config and updated the URL of the video file and ran this:


Ext.getCmp('flowplaything').renderMedia(
{
url : 'flash/flowplayer-3.2.5.swf',
autoSize : true,
volume : 25,
start :false,
loop :false,
scripting :'always',
encodeParams : false,

params:{
wmode :'opaque',
allowfullscreen : true,
cachebusting : true,
flashVars: ('config='+Ext.encode({
clip : { //playlist defualts
autoPlay: false,
autoBuffering: true,
scaling: "fit"
},
playlist : [
// playlist entry as a string means the url
{url :zFailPath},
]
})).replace(/\"/g,"\'")//Convert to single-quote for inclusion in <PARAM> markup
}
});

when i run this in the app, i get the following error:

"media is undefined" in uxmedia.js 327, which has the following line of code:

var unsup = this.assert(m.unsupportedText|| this.unsupportedText || media.unsupportedText,null);

I feel like im making progress, any suggestions?

Cheers!

aridheva
7 Feb 2011, 9:51 PM
ok, did some googling around the sencha site, found the renderMedia function, which should update things. So i took the media config and updated the URL of the video file and ran this:


Ext.getCmp('flowplaything').renderMedia(
{
url : 'flash/flowplayer-3.2.5.swf',
autoSize : true,
volume : 25,
start :false,
loop :false,
scripting :'always',
encodeParams : false,

params:{
wmode :'opaque',
allowfullscreen : true,
cachebusting : true,
flashVars: ('config='+Ext.encode({
clip : { //playlist defualts
autoPlay: false,
autoBuffering: true,
scaling: "fit"
},
playlist : [
// playlist entry as a string means the url
{url :zFailPath},
]
})).replace(/\"/g,"\'")//Convert to single-quote for inclusion in <PARAM> markup
}
});when i run this in the app, i get the following error:

"media is undefined" in uxmedia.js 327, which has the following line of code:

var unsup = this.assert(m.unsupportedText|| this.unsupportedText || media.unsupportedText,null);

I feel like im making progress, any suggestions?

Cheers!


i'm nubi to this technology.
but, how about this :

var flow = Ext.getCmp('flowplaything');
flow.mediaCfg.params.flashVars = "bla..bla..bla.. with ur config";
then
flow.refreshMedia();

confirm me if above code works for u...

amadman
8 Feb 2011, 12:05 PM
i'm nubi to this technology.
but, how about this :

var flow = Ext.getCmp('flowplaything');
flow.mediaCfg.params.flashVars = "bla..bla..bla.. with ur config";
then
flow.refreshMedia();

confirm me if above code works for u...

Gave it a shot as suggested, but no go. no error reported, and the video did not change in the flash component. Appreciate the suggestion tho.

hendricd
8 Feb 2011, 1:11 PM
@amadman --

Why not use the Player's own API to do that:

Add a simple method to what you pasted:



playSong : function( uri ){
var player = this.getInterface(); //reference to the Player itself

if(player && player.play){
player.play(uri);
}

}


Lots more here: http://flowplayer.org/documentation/api/player.html

amadman
8 Feb 2011, 8:53 PM
@hendricd ~

Thanks for the tip, i gave it my best shot, but still no go, i ended up with the following:


var myFlash = new Ext.ux.FlashPanel({
id : 'flowplaything',
title : 'Flowplayer',
media: 'flash',
autoMask : false,
autoScroll : false,
mediaCfg: mConfig,
playSong: function( uri ){
var player = this.getInterface(); //reference to the Player itself
if(player && player.play){
player.play(uri);
}
}
});

The i ran myFlash.playSong(zFailPath);

Nothing happened, and nothing in the error console. This is starting to stray off topic, so i'll keep poking around. Thanks for the tips.

Sesshomurai
24 Feb 2011, 5:19 AM
Hi,
I am using a media panel to load a URL with some text.

I want to get the loaded document (html or text) after it loads or renders.

I use the events 'mediaload' or 'mediarender'.

I get the panel.mediaObject and attempt to get the iframe inner document text, but its always empty.
Even though the panel displays the URL document.

For example:


alert(pmp.mediaObject.dom.contentWindow.document.body.text);


How to retrieve it from mediaObject?

I used debug tools to navigate the DOM but can't find the loaded text/html from the event callback mediaObject.

thanks!

hendricd
27 Feb 2011, 10:37 AM
@Sesshomurai --

document.body is an HTMLElement, thus it's content is accessed with:

document.body.innerHTML

Sesshomurai
1 Mar 2011, 5:39 AM
In the event callbacks I look at that (in chrome) and it says a one line text (off the top of my head) "Your browser does not support Iframes..." when clearly it does.

i.e. I thought it would contain the loaded content, but it doesn't.

hendricd
2 Mar 2011, 4:34 PM
@Sesshomurai--

Why are you trying to render an IFRAME with ux.Media?

Use ux.ManagedIframe instead.

Sesshomurai
7 Mar 2011, 10:25 AM
I guess I've been using the Ext.ux.Media.Panel with mediaType:'HTM'. It seems to be, itself, an iframe as well. But I will try the managedIframe. Not sure what the difference is yet.

Appreciate the tip!

hendricd
7 Mar 2011, 4:41 PM
@Sesshomurai--

FYI - ux.Media manages <OBJECT> tags primarily. The HTML profile renders a VERY simple Object tag that looks like an IFRAME, but all browsers functionally limit what you can do with it. Consider it a 'read-ony' IFRAME (no scripting interactions permitted).

ux.MIF would be your best bet. Good luck...

Sesshomurai
11 Mar 2011, 5:18 AM
MIF works much better. thanks again for the response and tip.

jej2003
9 Apr 2011, 3:38 AM
I am not sure why but when using the Flex Panel I am seeing that there are times after the flexinit event gets thrown calls to getBridge() return null. If I call refreshMedia() this generally fixes the issue but it would be nice to know why this is happening. Has anyone seen this?

natalvc
1 Jul 2011, 2:07 AM
Thanks for this excellent component, really simplifies things when using ExtJS.

Just a quick remark because it took a while for me to figure this out -- I'm using the 'flashpanel' type component and strangely, mousewheel events were not being passed to the Flash application. I compared the parameters passed to the Flash player in the non-ux.media.flash version and apparently, by default, flashpanel adds the parameter:

<param name="wmode" value="opaque">

To get the mouse scrollwheel events to pass through to the Flash component, I had to override this parameter with the value "window":

params: {
wmode: 'WINDOW',
... }

mephy
21 Jul 2011, 2:44 AM
Big thanks for plugin - really nice work!

I have a flash app with some links - ExtJS should catch click events and show(), hide() windows.
Flex(FABridge emulation) example fits quite well
but have a couple of questions:):

- where I can find *.fla example?
- is there a simple example for what I need? This one http://demos.theactivegroup.com/demodesk.html?demo=flex&script=bridging is a bit complicated :)
- I have extJS 4. Does it matter?

hendricd
22 Jul 2011, 4:25 AM
Big thanks for plugin - really nice work!

I have a flash app with some links - ExtJS should catch click events and show(), hide() windows.
Flex(FABridge emulation) example fits quite well
but have a couple of questions:):

- where I can find *.fla example?
- is there a simple example for what I need? This one http://demos.theactivegroup.com/demodesk.html?demo=flex&script=bridging is a bit complicated :)
- I have extJS 4. Does it matter?

The ux.Media.* package has not been ported to Ext 4. (And, not sure when)

cdellasanta
18 Sep 2011, 11:27 PM
The ux.Media.* package has not been ported to Ext 4. (And, not sure when)

Hi,
Something new on this?
Or there are new packages for flash integration into Ext 4?

stewardsencha
14 Oct 2011, 5:36 AM
I came here shopping for something like this too.
Just want to put flowplayer into a panel.

I did not read my way through all 84 pages of discussion.

But I think maybe this stuff is not be necessary with ext4 and flowplayer 3.x
I gave up searching and started coding instead.

It seems to come together without any special plugins or controls...

Stop me if I'm stupid please.

Joe Kuan
20 Jan 2012, 4:11 PM
I have got the PDF viewer working.

However, I have read the documentation but I do not understand how to get the load mask to work and it is not in the demo page either.

Can someone kindly show some sample code of how the load mask works?

Thanks
Joe

SimoAmi
20 Feb 2012, 4:03 PM
1. Extending a "Ext.ux.Chart.amChart.Component" has problems. Observe the following:


Chart = Ext.extend(Ext.ux.Chart.amChart.Component, {
chartURL: "my_custom_swf_url"
});
var chart = new Chart();
alert(chart.chartURL);


chart.chartURL returns ""


The properties are not retained as you'd expect them to be. It's because you've defined your Ext.ux.Media.Component constructor as follows:


constructor : function(config){
//Inherit the ux.Media class
Ext.apply(this , config, this.mediaClass.prototype ); // <-- problem area
ux.Component.superclass.constructor.apply(this, arguments);
},


And as a result overriding properties or methods isn't possible! The following will work instead:


constructor : function(config){
//Inherit the ux.Media class
Ext.applyIf(Ext.ux.Media.Component.prototype, this.mediaClass.prototype);
Ext.apply(this , config);
ux.Component.superclass.constructor.apply(this, arguments);
},


2. (minor detail) The initComponent is always called without arguments, if you look at the native component initialization process (Component.js).


initComponent : function(){
ux.Component.superclass.initComponent.apply(this,arguments);
componentAdapter.init.apply(this,arguments);
},

So you don't need the arguments part.

3. getInterface() returns the mediaObject and reloadData isn't part of the mediaObject.
reloadData is part of the externalsNamespace ( which is set to 'chart') so you can access it as this.chart.reloadData or this[this.externalsNamespace].reloadData.

Therefore your code fails here:



setChartDataURL : function(url, immediate){
var o;
this.dataURL = url;
if(url && (o = this.getInterface()) && immediate !== false){
o.reloadData(encodeURI(this.prepareURL(url))); // <-- o.reloadData() fails!
}
return this;
}

kathykalor
6 Apr 2012, 2:16 AM
Thanks, it is just the plugin that i'm looking for

Nunoestrada
13 Apr 2012, 5:29 AM
Does this work with sencha touch 2.0?
Can someone give an example? Where to include the files and how to create a new instance of the mediaWindow?

linyajun
22 Apr 2013, 6:55 PM
nice work!

can anybody tell me how to use office in mediapanel?
when i click excel node it show me (MSOffice Is not installed),but i have office2003 in my pc.
i use mediaDemo.zip and same wrong in FF、ie
thanks

rajthakur
13 Mar 2014, 1:35 AM
evan i want to see demo since i am a new bee in extjs and which two file we have to download since there is 5 zip files.
mediapanel_31.zip‎
mediaDemo.zip‎
uxMedia21.zip‎
uxMedia211.zip
uxMedia212.zip‎
Kindly guide me
Thanks in advance