Sencha Touch : 컨테이너 클래스의 다른 라이브러리 구성 요소를 표시하는 방법

Question

Sencha Touch의 Ext.Container에 EaselJS (CreateJS) 객체를 표시 할 수 없습니다 (실행하려면 Canel 요소 안에 있어야합니다).

컨테이너에 요소를 성공적으로 만들었지 만 화면에 표시되지 않습니다. 그런 다음 obj 스테이지와 리스너를 윈도우에 정의한 후, 이젤 요소에 요소를 추가합니다. 그러나 함수가 정의 된 Ext Container에 표시하는 방법을 모르겠습니다. 컨테이너의 add 메소드를 사용하여 스테이지를 삽입하려고하면 오류가 발생합니다.

재개 : Sencha Touch의 컨테이너 안에 다른 라이브러리의 구성 요소를 추가/표시하는 방법을 알고 싶습니다. 다음은

내가 그것을 할 노력하고있어 클래스의 코드입니다 : 나는이 같은 문제를 가지고

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

Answer 1

일부 흔적과 오류가 발생한 후 내가 알게 당신은 코드 다음
를 사용하는 경우 항목 : 컨테이너의 [....] 구성. 캔버스에 대한 참조를 얻고 createJS를 사용할 수 있습니다. . 가

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

(대신 this.getMain() [컨트롤러에 정의 된 참조] 당신이 사용할 수있는이

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

는 캔버스 사용에 대한 참조를 얻으려면 Ext.ComponentQuery.query ('사용자 컨테이너 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();