Как объединить графические элементы extjs и элементы easelJs

Question

Я хочу объединить приложение extjs, которое создает окно и холст easelJS, но когда я пытаюсь загрузить их одновременно, окно полностью запирается:(Вот мой код. Есть ли конфликт с подвижными окнами? положить мои окна в контейнер? Я новичок в этом, я возился с extjs около недели и только баловался с мольбертом js около 2 дней. У меня всего неделя. JS, так что, если мой вопрос кажется слишком большим, мои извинения.

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, one animal per location  ',
       width: 300,
       bodyPadding: 10,
       test: 'mycat',
       style: 'background-color: #Fdd;',


          items: [{
             itemId: 'button1',
             xtype: 'button',
             text: 'click the 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 your 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 a = Ext.create('ryan', {
renderTo: Ext.getBody()

});
    a.show();

     var b = Ext.create('ryan', {
renderTo: Ext.getBody()
});
    b.show();    
      });

Answer 1

Если взглянуть на это с первого взгляда, то мольберт, похоже, не загрязняет глобальное пространство имен, как и Ext4, поэтому нет никаких причин, по которым они не могут хорошо играть на одной странице.

Я проверил эту теорию в этой скрипке, и она действительно работает.

Я надеюсь, что следующий код поможет вам начать. Это использует html опция окна для создания холста.

Ext.define('EaselWindow', {
    extend: 'Ext.Window'

    ,html: '<canvas id="demoCanvas" width="500" height="300">'
        + 'alternate content'
        + '</canvas>'

    // The canvas markup will only be available after the window has rendered.
    // This is a useful protected method, but you could use a afterrender event instead.
    ,afterRender: function() {
        this.callParent(arguments);

        // The canvas is available to do 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();
    }
});