View Full Version : How to call SWF functions from ExtJS?

Natalia S.
14 Mar 2013, 5:48 AM

I am trying to integrate flash application into ExtJS client. And I have to call some ActionScript ExternalInterface functions to pass data to the Flash. This is a simple task for JavaScript (http://help.adobe.com/en_US/as3/dev/WS5b3ccc516d4fbf351e63e3d118a9b90204-7cb1.html). But I cannot implement the same functionality with using ExtJS 4 framework. I always receive an error:

TypeError: <ActionScript_function> is not a function.

I am using Ext.flash.Component:

items: [{
xtype : 'flash',
id : 'flashApplication',
url : 'flash/FlashApp.swf',
listeners : {
success : function() {
// Here I need to call ActionScript function from SWF

17 Mar 2013, 7:46 AM
Get the SWF object and execute the method

27 Nov 2013, 6:36 AM
Did you ever solve this.

I'm trying to put a flex app inside an iframe which is inside a tab. Wanting the flex app to receive data and send data to Ext JS code. But upon calling the external interface (from Flex) to call a JS function which I've defined in the same Ext JS IFrame class it does nothing.

Doing so in a normal web html page works fine (for example using the default html page template flashbuilder gives you).

28 Jan 2014, 11:24 PM
I was getting the exact problem yesterday and this is how i fixed it
1. do all stuffs needed to call flex function
2.get the dom object

var extObject = items[0]
var swfObj = document.getElementById(extObject.id); //we need the internal id generated by extjs

3. call the flex function
swfObj.ActionScript_function(variables to pass..);

11 Feb 2014, 12:56 AM
I created a similar thread - so linking to it as it may well help.

I had my swf file inside a html page which was in an iframe.

From the iframe code you can grab a controller and call whatever Ext JS functions from there. Also on start up I'd register various callbacks so that the controller could call JS functions which were in the iframe->html code.

So if I know that there is a JS func that calls the flex app called myFunctionFromJStoFlex( params... ), then on start up I'd (this is in the iframe ->html ->js code)

var myParent = window.parent;
var controller = myParent.window.MyApp.app.getController('MyController' );
controller.registerCallBack( myFunctionFromJStoFlex );

From that point on inside your Ext JS controller you now have a reference to the JS function which is inside the Iframe->html code. That function has access to the flex app.

You can of course add additional logic in the controller to take more than one callback.