Sencha Touch：如何在容器类中显示其他库的组件答案

【问题标题】：Sencha Touch: how show components of other library in a container classSencha Touch：如何在容器类中显示其他库的组件
【发布时间】：2013-09-11 02:11:22
【问题描述】：

我无法在 Sencha Touch 的 Ext.Container 中显示 EaselJS (CreateJS) 对象（EaselJS 必须在画布元素内才能运行）。

我已经成功地在容器中创建了元素，但它们没有显示在屏幕上。之后，我在窗口中定义了 obj 阶段和侦听器，我在 EaselJL 对象中添加了元素，但我不知道如何在定义函数的 Ext Container 中显示它。尝试使用 Container 的 add 方法插入 stage obj 会引发错误。

恢复：我想知道如何在 Sencha Touch 的 Container 中添加/显示其他库的组件。

下面是我尝试做的类的代码：

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

【问题讨论】：

this.stage 只有 HTML 吗？
不，@TDeBailleul，this.stage 是一个代表 EaselJS 对象的全局变量，它被插入到

标签： sencha-touch-2.1 createjs

【解决方案1】：

我遇到了同样的挑战，经过一些跟踪和错误后，我发现如果您在项目中使用以下代码：[....] 容器的配置。您可以获得对画布的引用并使用 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>
})

要获得对画布的引用，请使用：

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

（而不是 this.getMain() [控制器中定义的引用]。您可以使用 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();

【讨论】：