javascript - how to combine extjs graphical elements and easelJs elements -

i want combine extjs app creates window , easeljs canvas when try load them @ same time window's screwed :( here code. there conflict movable windows? have put windows in container? i'm brand new stuff, i've been tinkering extjs week , been messing easel js 2 days. i'm week.5 experiences js if question seems noob apologies.

var myimage; var stage; function init() { stage = new createjs.stage("democanvas"); myimage = new createjs.bitmap('dbz.jpg'); stage.addchild(myimage);  stage.update();   myimage.addeventlistener("click", function(){ var seed = new createjs.bitmap("seed.jpg"); seed.alpha = 0.5; stage.addchild(seed);  stage.update();  }); //end seed  } //end easel   var animals = ext.create('ext.data.store', {  fields: ['itemid', 'name'],  data: [{        "itemid": 'mycat',        "name": "mycat"     }, {          'itemid' : 'mydog',             "name": "mydog"     }, {         'itemid' : 'sbbargirls',          "name": "bargirls-when-drunk"            }            ]    }); //end animals.create   ext.define('ryan', {   // create better namespace company.project.class  extend: 'ext.window', //  config: {         itemid: 'ryanwindow',        bodystyle:{"background-color":"green"},        title: 'animal sanctuary, 1 animal per location  ',        width: 300,        bodypadding: 10,        test: 'mycat',        style: 'background-color: #fdd;',             items: [{              itemid: 'button1',              xtype: 'button',              text: 'click button',              handler: function(thebutton){                 ext.ajax.request({                 url: 'stuff.txt',                 method: 'get',                 success: function (result){                  thebutton.up('window').querybyid('wildanimal').setvalue(result.responsetext)                                           }                                  })                                           }              },{     itemid: 'wildanimal',     xtype: 'textfield',     fieldlabel: 'animal:',     name: 'myanimal'        }, { //end text field     itemid: 'mycombo',     xtype: 'combo',     fieldlabel: 'choose animal',             store: animals,     querymode: 'local',     displayfield: 'name',     listeners: {              'change': function(field, selectedvalue) {              this.up('window').querybyid('wildanimal').setvalue(selectedvalue);                                                        }                        }                }// end combo      ] //end items        //} // end config    }); //end define ryan    ////////// object instantiation  ext.onready(function(){ var = ext.create('ryan', { renderto: ext.getbody()  });     a.show();       var b = ext.create('ryan', { renderto: ext.getbody() });     b.show();           }); 

from quick @ it, easel doesn't seem pollute global namespace, , nor ext4, there no reason can't play on same page.

i have tested theory in this fiddle, , indeed works.

i hope following code can started. using html option of window create canvas.

ext.define('easelwindow', {     extend: 'ext.window'      ,html: '<canvas id="democanvas" width="500" height="300">'         + 'alternate content'         + '</canvas>'      // canvas markup available after window has rendered.     // useful protected method, use afterrender event instead.     ,afterrender: function() {         this.callparent(arguments);          // canvas available easel stuffs... have fun!         var stage = new createjs.stage("democanvas");          var circle = new createjs.shape();         circle.graphics.beginfill("red").drawcircle(0, 0, 50);         circle.x = 100;         circle.y = 100;         stage.addchild(circle);          stage.update();     } });