Sencha Touch: how show components of other library in a container class

Question

I'm not able show an EaselJS (CreateJS) object inside Ext.Container from Sencha Touch (the EaselJS must be inside a canvas element in order to run).

I've successfully created the elements in a Container, but they aren't showed in the screen. After, I have defined the obj stage and listener in window, I add the element in the EaselJL object, but I don't know how to show it in the Ext Container, where the function is defined. Trying to insert the stage obj witn the add method of the Container throws an error.

Resuming: I want to know how to add/show components of other libraries inside a Container in Sencha Touch.

Below is the code of the class where I'm trying to do it:

Ext.define('oa.view.Atividade', {
   extend : 'Ext.Container',

   stage : null,

   initialize: function() {
      console.log("Teste initialize!");

      this.testEaselJSSenha();
   },

   testEaselJSSenha  : function()
   {
      var canvas = document.createElement("canvas");

      canvas.id = "canvasEasyJS";

      canvas.setAttribute('width',350);

      canvas.setAttribute('height',400);

      document.body.appendChild(canvas);

      this.stage = new createjs.Stage(canvas);

      console.log(atividade.stage);

      createjs.Ticker.setFPS(10);

      createjs.Ticker.addListener(window);

      var texto = new createjs.Text("All you need is love!", "10px arial", "#f00070");

      this.stage.addChild(texto);

      //Erro: Uncaught TypeError: Object 7 has no method 'match'
      this.add([this.stage]);
   },

    tick: function()
    {
       console.log("tick...!");
        this.stage.update();
    }
});

No, @TDeBailleul, this.stage is a global variable that represents an EaselJS object, that is inserted into the — milaorrico, Apr 29 '13 at 18:43

score 0 · Answer 1 · edited Sep 10 '13 at 18:11

I had the same challenge and after some trail and error I found out that if you use the
following code in the items: [....] config of your container. You can get a reference to the canvas and use createJS.

Ext.create('Ext.draw.engine.Canvas', {<br>
    id: 'playgroundId',<br>
    baseCls: 'playground', // To give it a background color.<br>
    layout: 'fit',<br>
    height: '100%', // You might have to set height and width as a numbers.<br>
    widht: '100%'<br>
})

To get a reference to the canvas use this:

var canvasId = this.getMain().down('#playgroundId').canvases[0].id;

(Instead of this.getMain() [reference defined in the controller]. You can use Ext.ComponentQuery.query('your container id')[0] ).

//Create a stage by getting a reference to the canvas<br>
stage = new createjs.Stage(canvasId);

//Create a Shape DisplayObject.
circle = new createjs.Shape();
circle.graphics.beginFill("red").drawCircle(0, 0, 40);

//Set position of Shape instance.
circle.x = circle.y = 50;

//Add Shape instance to stage display list.
stage.addChild(circle);

//Update stage will render next frame<br>
//stage.update();

Sencha Touch: how show components of other library in a container class

1 Answers1